Как мне перенести Gulp3 на Gulp4 (gulpfile.js)?

У меня проблемы с обновлением моего 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


1
753
1

Ответ:

Решено

Существует ряд существенных различий между Gulp 3 и Gulp 4, о которых вам необходимо знать. Например, в Gulp.js 4.0 представлены методы series() и parallel() для объединения задач:

  • 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.