1

我从 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')))
4

1 回答 1

4

您拥有的“监视”任务是不必要的（并且它的语法错误）：

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'因为您已经'sass'在默认任务中调用了 first，因此您在任务中不需要它'server'。

还要注意gulp.series('sass')在第一个手表中使用 代替gulp.task('sass').

最后，由于我们要删除单独的'watch' 任务，请将“默认”任务更改为：

gulp.task('default', gulp.series('sass', 'server'));

并删除gulp.parallel那里 - 你只是想'sass'在之前运行'server'。

以下是所有更改：

// 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.task('watch', function() {
//    gulp.watch(['sass']);
// });

gulp.task('default', gulp.series('sass', 'server'));
于 2019-02-02T16:28:19.820 回答