Gulp 创建 sourcemap 时出错 ("CssSyntaxError")

Question

我不知道我做错了什么。当我尝试使用 Gulp.

创建源映射文件时，我收到了一条非常奇怪的错误消息

events.js:85
      throw er; // Unhandled 'error' event
            ^
CssSyntaxError: /www/static/sass/maps/main.css.map:1:198: Missed semicolon

我希望在单独的 .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']);

Answer 1

事实证明，这只是 .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))

很想知道为什么：-/

Gulp 创建 sourcemap 时出错 ("CssSyntaxError")

Gulp error when creating sourcemap ("CssSyntaxError")

sass

gulp

source-maps