javascript - 使用 gulp 压缩 Sass 并包含源映射？

Question

是否可以压缩 sass 并在结果中包含源映射？如果我包含.pipe(cssnano())它会删除源映射：

sass: function(sassFilename, basename) {
    return gulp.src(paths.sass + sassFilename)
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write())
        .pipe(cssnano())
        .pipe(rename({ basename:basename, suffix: '.min' }))
        .pipe(gulp.dest(paths.buildCss));
}

Answer 1

和调用需要“预定”您的流中的所有其他sourcemaps.init()阶段。任何在您的源地图之间没有发生并且不会记录在您的源地图中的事情（或者甚至可能在您的情况下将它们删除）。sourcemaps.write().pipe()sourcemaps.init()sourcemaps.write()

这意味着您需要将sourcemaps.write()呼叫移至以下行rename()：

sass: function(sassFilename, basename) {
  return gulp.src(paths.sass + sassFilename)
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sass().on('error', sass.logError))
    .pipe(cssnano())
    .pipe(rename({ basename:basename, suffix: '.min' }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.buildCss));
}