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

Question

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

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() 调用需要 "book-end" 流中的所有其他 .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));
}

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

Compress Sass and include sourcemaps with gulp?

javascript

sass

gulp

gulp-sass

gulp-sourcemaps