在优化我的Gulp任务以进行SCSS编译时需要帮助

2024-05-21 • 问答

我为本地项目配置了这个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'));

由于以下两行，您正在创建循环：

 .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编译时需要帮助

xzgfzcnk 回答：在优化我的Gulp任务以进行SCSS编译时需要帮助

大家都在问