Question

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

Answer 1

您需要注意Gulp 3和Gulp 4之间有许多明显的区别。例如，Gulp.js 4.0引入了serial（）和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。

如何将Gulp3迁移到Gulp4（gulpfile.js）？

1 个答案: