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

Posted 2023-03-07

【中文标题】在为 SCSS 编译优化我的 Gulp 任务方面需要帮助

【英文标题】：Need help in Optimizing my Gulp Task for SCSS compilation

【发布时间】：2020-06-28 00:10:23

【问题描述】：

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

【参考方案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'));
);

【讨论】：

哦..我明白了。这确实有道理。让我试试这个。

谢谢。这有帮助。需要另一个帮助，你能帮我在我的任务中添加 AutoPrefixer。我尝试了多次，但都失败了。

实际上，我只使用 autoprefixer 来部署最终代码——而不是与 sass 一起使用——所以我无法帮助你。但是请参阅对另一点的答案的编辑。