Javascript 将gulp源地图与gulp csso和gulp sass相结合

我正试图让我的

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（）

有关，或者我是否在错误的时间调用了我的sourcemaps，但是当我检查开发工具时，源代码总是

style.min.css

我没有看到您的sass任务上的初始映射。您需要调用此函数两次，并根据设置适当地设置

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

---

我没有看到您的sass任务的初始映射。您需要调用此函数两次，并根据设置适当地设置

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