Question

我是这个站点的新手。

我有2个文件- sass / styles.scss ，可编译为 main / styles.css

问题在于它不会像应该自动执行的那样监视更改。只要保存，就应该将scss编译为css。

现在，每次进行压力很大的更改时，我都必须运行 gulp watch 。

gulpfile.js

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

gulp.task('sass', function(){
return gulp.src('css/sass/styles.scss')
  .pipe(sass()) // Converts Sass to CSS with gulp-sass
  .pipe(gulp.dest('css/main'))
  });

gulp.task('watch', gulp.series('images', 'sass'), function(){
gulp.watch('images/**', ['oimages']);
gulp.watch('css/sass/**/*.scss', ['sass']); 
});

终端

[19:37:02] Starting 'watch'...
[19:37:02] Starting 'images'...
[19:37:04] gulp-imagemin: Minified 0 images
[19:37:04] Finished 'images' after 2.49 s
[19:37:04] Starting 'sass'...
[19:37:04] Finished 'sass' after 20 ms
[19:37:04] Finished 'watch' after 2.52 s

我想使它成为一个自动过程，而不是每次对sass文件进行更改时都运行 gulp watch 。

Answer 1

带有手表说明的功能应放在gulp.series内：

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

由于'images'和'sass'任务可能彼此独立，因此您可以

gulp.series(gulp.parallel('images', 'sass'), function() {...})

或浏览ignoreInitial选项。

Gulp自动监视scss文件中的更改，而无需每次都运行gulp watch

1 个答案: