Lỗi Gulp khi tạo sourcemap ("CssSyntaxError")

Question

Tôi không thể tìm ra những gì tôi đang làm sai ở đây. Tôi đang nhận được một thông báo lỗi thực sự kỳ lạ khi tôi cố gắng và tạo ra một tập tin sourcemap sử dụng Gulp.

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

Tôi muốn chúng được tạo trong tệp .map riêng biệt. Tôi không thể hiểu tại sao nó cho tôi biết có lỗi trong tập tin mà tôi đã yêu cầu tạo ra ...?

Tôi đang làm gì sai?

Dưới đây là gulpfile.js tôi:

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

Hóa ra nó chỉ đơn giản là các vị trí của dòng .pipe(sourcemaps.write('.')). Di chuyển nó giải quyết vấn đề:

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)) 

Rất thích biết tại sao: -/