制作一个大文件：调用gulp.parallel时出错

我正在通读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']); 

据我所知，系列和。平行不存在。 一旦我做了这些更新它的作品。

如果你需要连续运行任务，我已经有了这个模块的好运气： 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的并行和串行function，您必须安装Gulp 4.0

如何安装

• 全局安装 npm uninstall gulp -g && npm install gulpjs/gulp-cli#4.0 -g

• 从你的项目中 npm uninstall gulp && npm install gulpjs/gulp.git#4.0 --save-dev

我还发现了一大堆关于Gulp 4.0新function的教程

我假设这是因为这本书是为即将到来的function而编写的。 我认为，有时候不能认为这个项目的进展会很快。 我仍然不明白的是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')); })