保存sass/js/html文件时,gulp watch任务不起作用 [英] Gulp watch task is not working when sass/js/html file is saved
本文介绍了保存sass/js/html文件时,gulp watch任务不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当scss,HTML和js文件更改时,我试图重新加载浏览器,但是当我运行gulp watch
命令时,它没有重新加载浏览器或看不到任何css/js/html更改.
I am trying to reload the browser when scss, HTML and js file is changed but when I run the gulp watch
command it's not reloading the browser or can't see any css/js/html changes.
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
推荐答案
您需要进行如下所示的更改:
You need to make a couple of changes shown here:
gulp.task('browserSync', function(done) { // done added here
browserSync.init({
server: {
baseDir: 'app'
},
});
done(); // done() called here
})
// gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.task('watch', gulp.series('browserSync', 'sass', function () { // see note below
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
// gulp.watch('app/*.html', browserSync.reload);
gulp.watch("app/*.html", { events: 'all' }, function(cb) {
browserSync.reload();
cb();
});
gulp.watch('app/js/**/*.js', browserSync.reload);
})); // added a )
gulp.watch()
接受2个参数,而不是3个.gulp.series()
应包括所有函数-包括包含watch
调用的匿名函数.并失去了阵列括号.
gulp.watch()
takes 2 arguments, not 3. gulp.series()
should include all the functions - including your anonymous function that contains the watch
calls. And lose the array brackets.
这篇关于保存sass/js/html文件时,gulp watch任务不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文