将 gulp-sourcemaps 与 gulp-csso 和 gulp-sass 结合使用答案

【问题标题】：Combining gulp-sourcemaps with gulp-csso and gulp-sass将 gulp-sourcemaps 与 gulp-csso 和 gulp-sass 结合使用
【发布时间】：2017-10-19 17:09:52
【问题描述】：

我正在尝试让我的gulpfile.js 的这一部分工作：

gulp.task('compileSass', function() {
    return gulp.src(folders.src+'/scss/*scss')
    .pipe(sass())
    .pipe(gulp.dest(folders.dest+'/css'));
});

gulp.task('minifyStyles', ['compileSass'], function() {
    return gulp.src(folders.dest+'/css/style.css')
    .pipe(maps.init())
    .pipe(minCss({
        sourceMap: true
    }))
    .pipe(maps.write('./'))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(folders.dest+'/css'));
});

我想要开发工具来显示 .scss 文件。我不确定它是否与rename() 或我在错误的时间调用我的源映射有关，但是当我检查开发工具时，源始终是style.min.css。

【问题讨论】：

标签： javascript node.js gulp gulp-sass gulp-sourcemaps

【解决方案1】：

我没有看到您的 sass 任务的初始映射。您需要调用它两次，并根据docs 适当地设置loadMaps。试试下面...

gulp.task('compileSass', function() {
  return gulp.src(folders.src+'/scss/*scss')
  .pipe(maps.init()) /* `init` here */
  .pipe(sass())
  .pipe(gulp.dest(folders.dest+'/css'));
});

gulp.task('minifyStyles', ['compileSass'], function() {
  return gulp.src(folders.dest+'/css/style.css')
  .pipe(maps.init({
    loadMaps: true /* `init` again, load prior from sass */
  }))
  .pipe(minCss({
    sourceMap: true
  }))
  .pipe(maps.write('./'))
  .pipe(rename('style.min.css'))
  .pipe(gulp.dest(folders.dest+'/css'));
});

【讨论】：