У меня проблемы с обновлением моего gulpfile.js с GULP3 до GULP4. Я пытался обновить с помощью gulp.series() и gulp.parallel(). Мой Gulpfile такой:
var gulp = require('gulp')
var browserSync = require('browser-sync').create()
gulp.task('serve', function(){
browserSync.init({
server: {
baseDir: './dist'
}
})
})
gulp.task('css', function(){
var processors = [
//postcssPlugins
]
return gulp.src('./srcFiles')
.pipe(postcss(processors))
.pipe(gulp.dest('./DestFiles'))
.pipe(browserSync.stream())
})
gulp.task('watch', function(){
gulp.watch('srcFiles', ['css'])
gulp.watch('DestFile.Html').on('change', browserSync.reload)
})
gulp.task('default', ['watch', 'serve'])
Ошибка, которую я получаю, это Task function must be specified
Существует ряд существенных различий между Gulp 3 и Gulp 4, о которых вам необходимо знать. Например, в Gulp.js 4.0 представлены методы series() и parallel() для объединения задач:
Для полного ознакомления с тем, как настроить gulpfile.js в Gulp 4, я рекомендую подробное руководство, которое можно найти на странице Кодер Кодер.
Между тем, быстрое переписывание вашего кода будет выглядеть примерно так...
var gulp = require("gulp"),
browserSync = require("browser-sync").create();
var paths = {
styles: {
src: "./path/to/scss/files/**/*.scss",
dest: "./folder/to/output/css/file"
}
}
function css(){
return gulp
.src(paths.styles.src)
// ... CSS Preprocessor Plugins
.pipe(gulp.dest(paths.styles.dest))
.pipe(browserSync.stream());
}
function reload(){
browserSync.reload();
}
function watch(){
browserSync.init({
server: { baseDir: "./dist" }
});
gulp.watch(paths.styles.src, css);
gulp.watch('DestFile.html', reload);
}
exports.watch = watch;
exports.css = css;
exports.default = gulp.parallel(css, watch);
Все, что вам нужно сделать, это запустить gulp
или gulp watch
, чтобы инициализировать сервер BrowserSync и начать отслеживать изменения.
Если вам нужно только перекомпилировать CSS, вы можете запустить gulp css
.
Чтобы просмотреть список доступных задач gulp, запустите gulp --tasks
.