如何将 Gulp 3 迁移到 Gulp 4 (gulpfile.js)？

Question

我在将 gulpfile.js 从 GULP 3 更新到 GULP 4 时遇到问题我尝试使用 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

Answer 1

Gulp 3 和 Gulp 4 之间有许多您需要注意的显着差异。例如，Gulp.js 4.0 引入了 series() 和 parallel() 方法来组合任务：

系列(...) 运行s任务按照指定的顺序一次一个，并且
并行(...) 运行s 任务以任何顺序同时进行。

有关如何在 Gulp 4 中设置 gulpfile.js 的完整 walk-through，我推荐在 Coder Coder.

中找到详细教程

与此同时，快速 re-write 您的代码大致如下所示...

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。

如何将 Gulp 3 迁移到 Gulp 4 (gulpfile.js)？

How can I migrate Gulp3 to Gulp4 (gulpfile.js)?

terminal

gulp

gulp-sass

postcss

gulp-4