如何将 Gulp3 迁移到 Gulp4 (gulpfile.js)？答案

【问题标题】：How can I migrate Gulp3 to Gulp4 (gulpfile.js)?如何将 Gulp3 迁移到 Gulp4 (gulpfile.js)？
【发布时间】：2019-07-17 20:55:55
【问题描述】：

我无法将我的 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

【问题讨论】：

标签： terminal gulp gulp-sass postcss gulp-4

【解决方案1】：

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

series(...) 按指定顺序一次运行一个任务，并且
parallel(...) 以任意顺序同时运行任务。

有关如何在 Gulp 4 中设置 gulpfile.js 的完整演练，我推荐在 Coder Coder 找到的详细教程。

同时，快速重写您的代码大致看起来像这样......

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。

【讨论】：