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

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