[英]Browsersync + gulp-watch not working
In my project i use gulp + browsersync. 在我的项目中,我使用gulp + browsersync。 After update gulp v.4.0.0., browsersync not working and my styles not compiled when watch run (only after in manual restart
gulp watch
). 更新gulp v.4.0.0。之后,当watch运行时(仅在手动重启
gulp watch
),browsersync无法正常工作,并且我的样式也未编译。
This is my gulpfile.js: 这是我的gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
concat = require('gulp-concat'),
uglify = require('gulp-uglifyjs'),
cssnano = require('gulp-cssnano'),
rename = require('gulp-rename'),
del = require('del'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(autoprefixer(['last 15 versions', '> 1%'], {cascade: true}))
.pipe(cssnano())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('css-libs', gulp.parallel('sass'), function(){
return gulp.src('app/css/main.css')
.pipe(cssnano())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('app/css'));
});
gulp.task('browser-sync', function(){
browserSync({
server: {
//baseDir: 'app'
baseDir: './'
},
notify:false
})
});
gulp.task('watch', gulp.parallel('browser-sync', 'css-libs'), function(){
gulp.watch('app/scss/*.scss', ['sass']);
gulp.watch('*.html', browserSync.reload);
});
How to fix it? 如何解决?
UPD UPD
This is my package.json
这是我的
package.json
Gulp-watch not working when i change scss file . 当我更改scss文件时, gulp -watch无法正常工作。
I believe your 'watch' task should be rewritten like so: 我相信您的“监视”任务应这样重写:
gulp.task('browser-sync', function(){
// note the .init
browserSync.init({
server: {
//baseDir: 'app'
baseDir: './'
},
notify:false
})
});
gulp.task('watch', gulp.parallel('browser-sync', 'css-libs', function(done){
// change in the previous line and the following line
gulp.watch('app/scss/*.scss', gulp.series('sass'));
gulp.watch('*.html', browserSync.reload);
done();
}));
so that the function call with the watches is part of the gulp.parallel call. 因此,手表的函数调用是gulp.parallel调用的一部分。 See the parallel tasks documentation and gulp.task signature .
请参阅并行任务文档和gulp.task签名 。
gulp.task('default', gulp.parallel('one', 'two', function(done) {
// do more stuff
done();
}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.