创建源图时出现Gulp错误("CssSyntaxError")

Chu*_*utt 9 sass source-maps gulp

我无法弄清楚我在这里做错了什么.当我尝试使用Gulp创建源图文件时,我收到一条非常奇怪的错误消息.

events.js:85
      throw er; // Unhandled 'error' event
            ^
CssSyntaxError: /www/static/sass/maps/main.css.map:1:198: Missed semicolon
Run Code Online (Sandbox Code Playgroud)

我希望它们在一个单独的.map文件中创建.我无法理解为什么它告诉我在我要求它创建的文件中有错误...?

我究竟做错了什么?

这是我的gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    minifyCSS = require('gulp-minify-css'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    input = 'static/sass/**/*.scss',
    output = 'static/css';

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'expanded'
};

gulp.task('sass', function() {
    return gulp
        .src(input)
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(autoprefixer())
        .pipe(minifyCSS())
        .pipe(gulp.dest(output))
});

gulp.task('watch', function() {
    gulp.watch(input, ['sass']);
});

// Default task - Compile then set Watch
gulp.task('default', ['sass', 'watch']);
Run Code Online (Sandbox Code Playgroud)

Chu*_*utt 29

事实证明,这只是线的放置.pipe(sourcemaps.write('.')).移动它解决了这个问题:

return gulp
    .src(input)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(minifyCSS())
    .pipe(sourcemaps.write('.')) // This line moved to here
    .pipe(gulp.dest(output))
Run Code Online (Sandbox Code Playgroud)

很想知道原因: - /

  • @Jorre我相信sourcemaps.write()需要在autoprefixer()之后,因为autoprefixer试图在源地图中添加前缀,这会导致错误 (3认同)