创建源映射时出现 Gulp 错误（“CssSyntaxError”）答案

【问题标题】：Gulp error when creating sourcemap ("CssSyntaxError")创建源映射时出现 Gulp 错误（“CssSyntaxError”）
【发布时间】：2023-03-29 01:22:01
【问题描述】：

我无法弄清楚我在这里做错了什么。当我尝试使用 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']);

【问题讨论】：

为什么要将源地图放到生产服务器上？
@cimmanon 我没有将我的源地图放在任何生产服务器上。是什么让你产生了这个想法？
您做了：“我希望在单独的 .map 文件中创建它们，这样普通用户在访问该站点时就不会看到它们”。为什么普通用户会看到源地图，除非它在生产服务器上？
@cimmanon 默认情况下，源映射包含在 CSS 中。我只是想将它分开，这样我就不必在每次部署之前修改我的 gulpfile 并重新编译（对于无源映射版本）。
@cimmanon 我已经为你删除了令人困惑的句子。

标签： sass gulp source-maps

【解决方案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))

很想知道为什么：-/

【讨论】：

这里一样，但不知道为什么源图需要放在最后
@Jorre 我相信 sourcemaps.write() 需要在 autoprefixer() 之后，因为 autoprefixer 会尝试向源映射添加前缀，这会导致错误
@EddieHong 啊！谢谢你解释！这很有意义。
你能解释一下为什么 sourcemaps.write 需要放在最后吗？