在为 SCSS 编译优化我的 Gulp 任务方面需要帮助

Question

我为我的本地项目配置了这个 Gulp 任务。它完美地监视着我的文件夹，将 SCSS 文件编译为 CSS。 唯一的问题是 -

无论我是否对代码进行任何更改，我的 Gulp 任务平均每秒运行 6 次“sass”任务。即使在关闭 IDE（SublimeText）之后，它也会继续像这样冗余地运行。我觉得这可能不是一个好习惯，而且还会影响我机器的性能。

这是我的 Gulp 代码：

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function(){
   return gulp.src('compile/style.scss')
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(sass())
      .pipe(sass({outputStyle: 'expanded',sourceComments: false}))
      .pipe(sourcemaps.write('../../../compile'))
      .pipe(gulp.dest('public/assets/css'));
});

gulp.task('watch', function(){
    gulp.watch('compile/**/*', gulp.series('sass'));
});

gulp.task('default', gulp.series('sass','watch'));

Answer 1

由于这两行，您正在创建一个循环：

 .pipe(sourcemaps.write('../../../compile'))    // saving to compile


gulp.task('watch', function(){
    gulp.watch('compile/**/*', gulp.series('sass'));  // watching compile
});

因此，您的 sass 任务运行，写入 watch 看到的 compile 文件夹已更改，它会一遍又一遍地再次触发 sass 任务。

将您的源地图保存在您的watch 文件夹中不包括的位置。

---

gulp.task('sass', function(){
   return gulp.src('compile/style.scss')
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(sass())                           // delete this, no need for two sass pipes
      .pipe(sass({outputStyle: 'expanded',sourceComments: false}))
      .pipe(sourcemaps.write('../../../compile'))
      .pipe(gulp.dest('public/assets/css'));
});