Question

我从Gulp 3更改为Gulp 4，但无法正常工作。

当我运行gulp并保存SCSS或HTML文件时，它会成功创建一个新文件。如果我再次保存，则什么也不会发生。 它只能运行一个。

下面是我的 gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

sass.compiler = require('node-sass');


gulp.task('sass', function() {
 return gulp.src('template/assets/scss/**/*.scss')
   .pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError))
   .pipe(gulp.dest('template/assets/css/'))
   .pipe(browserSync.stream());
});


// Static Server and watching scss/html files
gulp.task('server', gulp.series('sass', function(){
    browserSync.init({
        server: {
            baseDir: "./template"
        }
    });
    gulp.watch("template/assets/scss/**/*.scss", gulp.task('sass'));
    gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);
    gulp.watch("template/**/*.html", browserSync.reload);
}));


gulp.task('watch', function() {
    gulp.watch(['sass']);
});


gulp.task('default', gulp.series(gulp.parallel('sass', 'watch', 'server')))

Answer 1

在“监视”任务中，您有没有必要（和它语法错误）：

animation-iteration-count

因此将其删除。您的gulp.task('watch', function() { gulp.watch(['sass']); });任务中已经有gulp.watch条语句：

'server'

我评论上面，因为你已经调用第二个

gulp.watch("template/assets/scss/**/*.scss", gulp.task('sass'));
//  gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);

在.pipe(browserSync.stream());任务的末尾，因此注释掉的'sass'行也是可重复的。

您也需要在“服务器”任务中发出异步完成信号，请参阅我在何处添加了browserSync.reload回调函数来完成此操作：

done

我从// Static Server and watching scss/html files gulp.task('server', function (done) { browserSync.init({ server: { baseDir: "./template" } }); gulp.watch("template/assets/scss/**/*.scss", gulp.series('sass')); // gulp.watch("template/assets/scss/**/*.scss", browserSync.reload); gulp.watch("template/**/*.html", browserSync.reload); done(); });任务开始删除gulp.series('sass')调用，因为你已经叫'serve'首先在默认的任务，所以你不需要它在{{1} }任务。

还请注意，第一只手表使用'sass'而不是'server'。

最后，由于我们要删除单独的gulp.series('sass')任务，因此将'default'任务更改为：

gulp.task('sass')

并删除其中的'watch'-您只希望gulp.task('default', gulp.series('sass', 'server'));在gulp.parallel之前运行。

下面是所有的变化：

'sass'

Gulp 4手表不工作，只能运行一次

1 个答案: