在我的项目中,我使用gulp + browsersync。更新gulp v.4.0.0后,browsersync无法正常运行,并且在监视运行时未编译我的样式(仅在手动重启gulp watch
之后)。
这是我的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);
});
如何解决?
UPD
这是我的package.json
当我change scss file时,Gulp-watch无法正常工作。
答案 0 :(得分:0)
我相信你的观看'任务应该像这样重写:
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();
}));
因此使用watch调用函数是gulp.parallel调用的一部分。请参阅parallel tasks documentation和gulp.task signature。
gulp.task('default', gulp.parallel('one', 'two', function(done) {
// do more stuff
done();
}));