gulp-autoprefixer出错，有遇到类似情况的朋友吗？

Question

错误现象

使用gulp-sourcemaps, gulp-sass, gulp-autoprefixer编译scss时出错。已经排除了gulp-sourcemaps影响的可能。

环境

• win7 x64

• node v0.12.7

• npm 2.11.3

控制台报错

CssSyntaxError: e:\workspace\test\angularjs\invite\assets\src\sass\invite.scss:93:12: Unknown word
        position: relative;
        // margin-bottom: 15px;
           [1;31m^[0m
        input[type="text"], input[type="password"] {
    at Input.error (e:\workspace\test\angularjs\invite\node_modules\gulp-autoprefixer\node_modules\postcss\lib\input.js:65:21)
    at Parser.unknownWord (e:\workspace\test\angularjs\invite\node_modules\gulp-autoprefixer\node_modules\postcss\lib\parser.js:382:30)
    at Parser.decl (e:\workspace\test\angularjs\invite\node_modules\gulp-autoprefixer\node_modules\postcss\lib\parser.js:230:22)
    at Parser.word (e:\workspace\test\angularjs\invite\node_modules\gulp-autoprefixer\node_modules\postcss\lib\parser.js:136:30)
    at Parser.loop (e:\workspace\test\angularjs\invite\node_modules\gulp-autoprefixer\node_modules\postcss\lib\parser.js:61:26)
    at Object.parse [as default] (e:\workspace\test\angularjs\invite\node_modules\gulp-autoprefixer\node_modules\postcss\lib\parse.js:21:12)
    at new LazyResult (e:\workspace\test\angularjs\invite\node_modules\gulp-autoprefixer\node_modules\postcss\lib\lazy-result.js:54:42)
    at Processor.process (e:\workspace\test\angularjs\invite\node_modules\gulp-autoprefixer\node_modules\postcss\lib\processor.js:30:16)
    at DestroyableTransform._transform (e:\workspace\test\angularjs\invite\node_modules\gulp-autoprefixer\index.js:24:5)

scss

.invite-form {
    .form-group {
        position: relative;
        // margin-bottom: 15px;
    }
}

gulp task: sass

var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var ngAnnotate = require('gulp-ng-annotate');
var sass = require('gulp-sass');
var prefixer = require('gulp-autoprefixer');

gulp.task('sass', function() {
    return gulp.src('assets/src/sass/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(prefixer({browsers: ['last 2 version']}))
        .pipe(sass({
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/dist/css'));
});

package.json 包

"devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-ng-annotate": "^1.1.0",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-uglify": "^1.3.0"
}

Answer 1

前面发现一点：单行注释双斜杠后如果有空格会报错，反之正常。

20150916 更新：已解决

问题出在gulp-autoprefixer和gulp-sass的pipe顺序上，scss文件只需要编译+压缩即可，所以autoprefixer可以再之后进行，gulpfile.js改动如下：

gulp.task('sass', function() {
    return gulp.src('assets/src/sass/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({ // firstly
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(prefixer({browsers: ['last 2 version']})) // secondly
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/dist/css'));
});