serve в соответствии с 4 версией:gulp.task('serve', function(){
browserSync.init({
server: './src',
notify: false,
host: '185.27.134.11'
});
gulp.watch('src/sass/**/*.sass', gulp.series('sass'));
gulp.watch('src/*.html', gulp.series('название таска, который обрабатывает html'));
})parallel task-и в потоке выполняются вместе.series тут сперва выполнится первый task, потом второй и т.д.
var browserSync = require('browser-sync').create()
var bsConfig = {
server: {
baseDir: 'app'
},
notify: false,
open: false
};
gulp.task('watch', function(){
browserSync.init(bsConfig);
gulp.watch("app/pug/*.pug", gulp.parallel("pug"));
})Watcher предлагаю использовать таким способом)
Gulp.Gulp 4 и установить прошлую версию Gulp 3.9.1npm uninstall -g gulp && npm i -g gulp@3.9.1 и код Ваш заработает.Gulp 4 и перейдите по этой ссылке и прочитайте инструкцию.Gulp 4:gulp.task('watch', function(){
browserSync.init({
сюда конфиг вашего сервера
});
gulp.watch("Путь к файлам Html", gulp.series('html')); // <--- В кавычках название таска
gulp.watch("Путь к файлам CSS", gulp.series('prefix'));
})parallel и series. То есть в первом случае Ваши task-и в потоке выполняются вместе. А в другом случае, сперва выполнится первый task, потом второй, третий и до конца.
server засунуть, наоборот, в watcher:var config = {
server: {
baseDir: "src/"
}
}Watcher будет выглядеть так:gulp.task('watch', function(){
browserSync.init(config);
gulp.watch("src/less/*.less", gulp.series("less"));
--> x
})gulp.series или gulp.parallel. Их разница в порядке выполнения тасков. Я рекомендую использовать gulp.series для подобных тасков.
watcher:gulp.task('watch', function(){
gulp.watch('файлы html', gulp.series('html'));
gulp.watch('файлы css', gulp.series('css'));
gulp.watch('файлы js', gulp.series('js'));
gulp.watch('файлы img', gulp.series('img'));
})'файлы [html, css, js&img]' пишите путь до файлов.builder примерно такой:gulp.task('build',
gulp.series(
сюда можно таск очитки dist папки засунуть, т.е. его название, типа 'clean',
gulp.parallel(
'html',
'styles',
'js',
'img'
)));gulp.series, при этом не забыть удалить все скобки, связанные с этим методом.
gulp 4gulp.task('watch', function(){
gulp.watch("src/*.html", gulp.series("html"));
gulp.watch("src/js/*.js", gulp.series("scripts"));
gulp.watch("src/sass/*.sass", gulp.series("sass"));
gulp.watch("src/images/*.+(jpg|jpeg|png|gif)", gulp.series("imgs"));
})parallel и series. То есть в первом случае Ваши task-и в потоке выполняются вместе. А в другом случае, сперва выполнится первый task, потом второй, третий и до конца.
gulp.task('removedist', function (done) {
del.sync('dist');
done();
});gulp, то task для вашей сборки должен выглядеть так:gulp.task('build',
gulp.series(
'removedist',
gulp.parallel(
'imagemin',
'styles',
'scripts'
)));gulp.task('watch', function(){
browserSync.init(config);
gulp.watch(path.watch.html, gulp.series('html:build'));
gulp.watch(path.watch.scss, gulp.series('scss:build'));
gulp.watch(path.watch.css, gulp.series('css:build'));
gulp.watch(path.watch.js, gulp.series('js:build'));
gulp.watch(path.watch.images, gulp.series('images:build'));
gulp.watch(path.watch.fonts, gulp.series('fonts:build'));
})parallel и series. То есть в первом случае Вашиtask-и в потоке выполняются вместе. А в другом случае, сперва выполнится первый task, потом второй, третий и до конца.build можно сделать так:gulp.task('build',
gulp.series(
'clean:build',
gulp.parallel(
'html:build',
'css:build',
'js:build',
'images:build',
'fonts:build'
)));dist, а потом собирается продакшн.