1

Im having problems to update my gulpfile.js from GULP3 to GULP4 I tried to update with gulp.series() and gulp.parallel() My Gulpfile is like this :

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'])

The error I get is Task function must be specified

4

1 回答 1

0

您需要注意 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.

于 2019-07-23T14:53:35.810 回答