Creating gulpfile: getting error when calling gulp.parallel

Question

I’m working on the book Getting Started with Gulp (which was published in January 2015), but I understand that since development with Gulp is moving pretty fast, it might be a bit dated.

Here is my 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 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.task line gulp.task it starts, but I still get the following error:

 [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

I'm not sure where gulp.parallel or gulp.series come from, but you can do the same by changing the code to this:

 // 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 does not exist. Once I made these updates, it works.

If you need to run tasks sequentially, I got lucky with this module: https://github.com/OverZealous/run-sequence . You would change your task:

 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

I read the same book and found that it does not work. I noticed that you needed to upgrade Gulp to 4.0

Why does it not work

To execute a parallel and serial function from Gulp, you must install Gulp 4.0

How to install

• Global installation of npm uninstall gulp -g && npm install gulpjs/gulp-cli#4.0 -g

• From your project npm uninstall gulp && npm install gulpjs/gulp.git#4.0 --save-dev

I also found a bunch of tutorial on new features from Gulp 4.0

I suppose 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.parallel and just passing an array.

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

One more thing:

In gulp4, you must specify a parallel / series for the view task:

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