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

Question

我正在阅读 Getting Started With Gulp 这本书（2015 年 1 月出版），但我意识到这是因为 Gulp 的开发进展很快，可能已经有点过时了。

这是我的 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']);

编辑：更改最后的 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

Answer 1

我不确定 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']);

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

如果您需要运行系列任务，我很幸运地使用了这个模块：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));
});

Answer 2

我正在读同一本书，但奇怪的是它不起作用。我注意到您所要做的就是将 Gulp 更新为 4.0

为什么不起作用

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

如何安装

全局安装

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

或

yarn global add gulpjs/gulp.git#4.0

从您的项目中

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

或

yarn add gulpjs/gulp.git#4.0

我还找到了一堆教程，讨论 Gulp 4.0

的新功能

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

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

还有一件事：

在 gulp4 中你必须为 watch 任务指定 parallel/series:

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'));
})

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

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

javascript

node.js

gulp

我正在读同一本书，但奇怪的是它不起作用。我注意到您所要做的就是将 Gulp 更新为 4.0

为什么不起作用

如何安装

全局安装

从您的项目中