Я только что обновил gulp3 на gulp4, и у меня возникла проблема с gulp.watch (). Я прочитал документацию и многие веб-сайты о том, какие шаги нужно предпринять, чтобы преобразовать ваш оригинальный gulfile в совместимость с gulp4, поэтому я явно что-то упускаю.
Поскольку ни один из моих вызовов не выполняется, я просто поставлю свои задачи CSS и HTML.
Моя задача CSS
// Compile SCSS
gulp.task('css:compile', function(cb) {
return gulp.src('./scss/**/*.scss')
.pipe(sass.sync({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(gulp.dest('./src/assets/css'))
});
// Minify CSS
gulp.task('css:minify', function(cb) {
return gulp.src([
'./src/**/*.css',
'!./src/**/*.min.css'
])
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./app'))
.pipe(browserSync.stream());
});
gulp.task('css', gulp.series('css:compile', 'css:minify'));
Моя задача HTML
// Includer (For head, footer, nav, etc.)
gulp.task('html:include', function(done) {
gulp.src('./src/**/*.html')
.pipe(includer())
.pipe(htmlclean())
.pipe(gulp.dest('./app'))
done();
});
gulp.task('html', gulp.series('html:include'));
Мои задачи по наблюдению
//Compile CSS and JS, Include all HTML before watching
gulp.task('start', gulp.series(gulp.parallel('css', 'js'), 'html', 'browserSync'));
//Watch for changed files and reload browser
gulp.task('watch', function() {
gulp.watch('./scss/*.scss', gulp.series('css'));
gulp.watch('./src/**/*.js', gulp.series('js'));
gulp.watch('./src/**/*.html', gulp.series('html', browserSync.reload()));
});
// Dev environment start
gulp.task('dev', gulp.series('start', 'watch'));
Здесь нет ничего особенного, но я перепробовал все варианты, чтобы сделать каждый час переменным, например
var watcher = gulp.watch('./scss/*.scss')
watcher.on('change',function(event){
console.log('event:'+ event);
}
Я не уверен, что еще мне не хватает, но я возился с этим последние 4 часа ...