需要帮助优化我的 Gulp SCSS 编译任务

Question

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

On an average my Gulp Task runs 'sass' task around 6 times in a second, whether I make any change in code or not. It keeps on running like this redundantly even after closing the IDE (SublimeText). I feel like it might not be a good practice and also compromising my machine's performance.

这是我的 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 任务运行，写入 compile 文件夹，watch 看到该文件夹已更改，并且它会一遍又一遍地再次触发 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'));
});

需要帮助优化我的 Gulp SCSS 编译任务

Need help in Optimizing my Gulp Task for SCSS compilation

sass

npm

node-modules

gulp