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.
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'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.task line, it runs 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
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:
// 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.
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:
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));
});