压缩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()调用需要在流中"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));
}