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

【问题标题】：Compress Sass and include sourcemaps with gulp?使用 gulp 压缩 Sass 并包含源映射？
【发布时间】：2017-02-06 02:00:20
【问题描述】：

是否可以压缩 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));
}

【问题讨论】：

标签： javascript sass gulp gulp-sass gulp-sourcemaps

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

【讨论】：