javascript 制作 gulpfile：调用 gulp.parallel 时出错

Making a gulpfile: getting an error when call gulp.parallel

提问by damianesteban

I'm working through the book Getting Started With Gulp(which was published in January 2015) but I realize that because development with Gulp is moving quite fast it may be slightly out of date already.

我正在阅读Gulp 入门（于 2015 年 1 月出版）一书，但我意识到因为 Gulp 的开发进展非常快，所以它可能已经有点过时了。

Here is my gulpfile:

这是我的 gulpfile：

// Modules & Plugins
var gulp = require('gulp');
var concat = require('gulp-concat');
var myth = require('gulp-myth');
var uglify = require('gulp-uglify'); // newly added
var jshint = require('gulp-jshint'); // newly added
var imagemin = require('gulp-imagemin');
// let's add two node.js modules:
var connect = require('connect');
// var serve = require('serve-static');
var browsersync = require('browser-sync');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var plumber = require('gulp-plumber');

// Tasks
// styles task
gulp.task('styles', function(){
    return gulp.src('app/css/*.css')
    // now we add our pipes:
        .pipe(plumber())
        .pipe(concat('all.css'))
        .pipe(myth())
        .pipe(gulp.dest('dist'));
});

// scripts task
gulp.task('scripts', function() {
    return gulp.src('app/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

// images task
gulp.task('images', function() {
    return gulp.src('app/img/*')
      .pipe(imagemin())
      .pipe(gulp.dest('dist/img'));
});

// browsersync Task:
gulp.task('browsersync', function(cb) {
    return browsersync({
      server: {
        baseDir:'./'
      }
    }, cb);
});

// browserify Task:
gulp.task('browserify', function() {
    return browserify('./app/js/app.js')
      .bundle()
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('dist'));
});

// watch task:
gulp.task('watch', function() {
  gulp.watch('app/css/*.css',
   gulp.series('styles', browsersync.reload));
  gulp.watch('app/js/*.js',
   gulp.series('scripts', browsersync.reload));
  gulp.watch('app/img/*',
   gulp.series('images', browsersync.reload));
});

// Default Task
gulp.task('default', ['styles', 'scripts', 'images', 'browsersync', 'browserify', 'watch']);

EDIT: After changing the final gulp.taskline, it runs but I still get the following error:

编辑：更改最后gulp.task一行后，它运行但我仍然收到以下错误：

[13:51:21] Starting 'watch'...
[13:51:21] 'watch' errored after 146 μs
[13:51:21] TypeError: undefined is not a function
    at Gulp.<anonymous> (/Volumes/BigMan/Code/javascript/gulp-book/gulpfile.js:79:9)
    at module.exports (/Volumes/BigMan/Code/javascript/gulp-book/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Volumes/BigMan/Code/javascript/gulp-book/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Volumes/BigMan/Code/javascript/gulp-book/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/Volumes/BigMan/Code/javascript/gulp-book/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
    at startup (node.js:129:16)
    at node.js:814:3

采纳答案by Ryan

I'm not sure where the gulp.parallel or gulp.series is coming from but you should be able to accomplish the same thing by changing your code to this:

我不确定 gulp.parallel 或 gulp.series 来自哪里，但您应该能够通过将代码更改为以下内容来完成同样的事情：

// watch task:
gulp.task('watch', function() {
    gulp.watch('app/css/*.css', ['styles', browsersync.reload]);
    gulp.watch('app/js/*.js', ['scripts', browsersync.reload]);
    gulp.watch('app/img/*', ['images', browsersync.reload]);
});

gulp.task('default', ['styles', 'scripts', 'images', 'browsersync', 'browserify', 'watch']);

As far as I can tell .series and .parallel don't exist. Once I made those updates it works.

据我所知 .series 和 .parallel 不存在。一旦我进行了这些更新，它就可以工作了。

If you need to run tasks in series, I have had good luck with this module: https://github.com/OverZealous/run-sequence. You would change your watch task to this:

如果您需要连续运行任务，我很幸运使用这个模块：https: //github.com/OverZealous/run-sequence。您可以将监视任务更改为：

var runSequence = require('run-sequence');

// watch task:
gulp.task('watch', function() {
  gulp.watch('app/css/*.css', runSequence('styles', browsersync.reload));
  gulp.watch('app/js/*.js', runSequence('scripts', browsersync.reload));
  gulp.watch('app/img/*', runSequence('images', browsersync.reload));
});

回答by lac_dev

I'm reading the same book and found it extrange that it doesn't work. I noticed all you had to do was to update Gulp to 4.0

我正在阅读同一本书，但发现它不起作用。我注意到你所要做的就是将 Gulp 更新到 4.0

Why isn't it working

为什么它不起作用

In order to accomplish the parallel and series feature from Gulp, you must install Gulp 4.0

为了实现 Gulp 的并行和串行功能，您必须安装 Gulp 4.0

How to install

如何安装

Global installation

全局安装

npm uninstall gulp -g
npm install gulpjs/gulp-cli#4.0 -g

or

或者

yarn global add gulpjs/gulp.git#4.0

From within your project

从您的项目中

npm uninstall gulp
npm install gulpjs/gulp.git#4.0 --save-dev`

or

或者

yarn add gulpjs/gulp.git#4.0

I also found a bunch of tutorials talking about the new features from Gulp 4.0

我还发现了一堆关于 Gulp 4.0 新特性的教程

I'm assuming this is because the book was written with the upcoming features in mind. I think that sometimes it cannot be assumed that the project will move as fast. What I still don't understand is the difference between gulp.paralleland just passing an array.

我假设这是因为这本书是在考虑即将推出的功能的情况下编写的。我认为有时不能假设该项目会进展得如此快。我仍然不明白的是gulp.parallel和只是传递数组之间的区别。

http://fettblog.eu/gulp-4-parallel-and-series/

http://fettblog.eu/gulp-4-parallel-and-series/

One more thing:

还有一件事：

In gulp4 you must specify parallel/series for the watch task:

在 gulp4 中，您必须为监视任务指定并行/串行：

gulp.task('watch', function() {
    gulp.watch('app/css/*.css', gulp.parallel('styles'));
    gulp.watch('app/jss/*.js', gulp.parallel('scripts'));
    gulp.watch('app/img/*', gulp.parallel('images'));
})