I am relatively new to writing gulpfile.js manually. I have a Backbone and Marionette project where the gulp file looked like this:
var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserify = require('browserify'); var del = require('del'); var watchify = require('watchify'); var source = require('vinyl-source-stream'); var stylish = require('jshint-stylish'); var buffer = require('vinyl-buffer'); var _ = require('lodash'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload; gulp.task('clean', function(cb) { return del([ 'app/tmp' ], cb); }); gulp.task('html', function() { return gulp.src('./src/index.html') .pipe($.plumber()) .pipe(gulp.dest('./dist')); }); gulp.task('images', function() { gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif', './src/assets/images/*.png' ]) .pipe(gulp.dest('./dist/images')); }); gulp.task('vendor-css', function() { gulp.src(['./src/assets/styles/vendor/*.css' ]) .pipe(gulp.dest('./dist')); }); gulp.task('fonts', function() { gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf', './src/assets/fonts/*.svg' ]) .pipe(gulp.dest('./dist/fonts')); }); gulp.task('styles', function() { return gulp.src('./src/main.styl') .pipe($.stylus()) .pipe($.autoprefixer()) .pipe($.rename('bundle.css')) .pipe(gulp.dest('./dist')) .pipe(reload({ stream: true })); }); var bundler = _.memoize(function(watch) { var options = {debug: true}; if (watch) { _.extend(options, watchify.args); } var b = browserify('./src/main.js', options); if (watch) { b = watchify(b); } return b; }); var handleErrors = function() { var args = Array.prototype.slice.call(arguments); delete args[0].stream; $.util.log.apply(null, args); this.emit('end'); }; function bundle(cb, watch) { return bundler(watch).bundle() .on('error', handleErrors) .pipe(source('bundle.js')) .pipe(buffer()) .pipe($.sourcemaps.init({ loadMaps: true })) .pipe($.sourcemaps.write('./')) .pipe(gulp.dest('./dist')) .on('end', cb) .pipe(reload({ stream: true })); } gulp.task('scripts', function(cb) { bundle(cb, true); }); gulp.task('jshint', function() { return gulp.src(['./src/**/*.js', './test/**/*.js']) .pipe($.plumber()) .pipe($.jshint()) .pipe($.jshint.reporter(stylish)); }); var reporter = 'spec'; gulp.task('mocha', ['jshint'], function() { return gulp.src([ './test/setup/node.js', './test/setup/helpers.js', './test/unit/**/*.js' ], { read: false }) .pipe($.plumber()) .pipe($.mocha({ reporter: reporter })); }); gulp.task('build', [ 'clean', 'html', 'images', 'vendor-css', 'fonts', 'styles', 'scripts', 'test' ]); gulp.task('test', [ 'jshint' ]); gulp.task('watch', ['build'], function() { browserSync.init({ server: { baseDir: 'dist' } }); reporter = 'dot'; bundler(true).on('update', function() { gulp.start('scripts'); gulp.start('test'); }); gulp.watch('./test/**/*.js', ['test']); gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']); gulp.watch(['./src/*.html'], ['html']); }); gulp.task('default', ['watch']);
Now I need to enable mini Javascript, for which I mentioned the link. I use one with uglify-js-harmony as the minifier support for ES6, as most of my code uses ES6 syntax. The modified gulp file is as follows:
var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserify = require('browserify'); var del = require('del'); var watchify = require('watchify'); var source = require('vinyl-source-stream'); var stylish = require('jshint-stylish'); var buffer = require('vinyl-buffer'); var uglifyjs = require('uglify-js-harmony'); var minifier = require('gulp-uglify/minifier'); var pump = require('pump'); var _ = require('lodash'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload; gulp.task('clean', function(cb) { return del([ 'app/tmp' ], cb); }); gulp.task('html', function() { return gulp.src('./src/index.html') .pipe($.plumber()) .pipe(gulp.dest('./dist')); }); gulp.task('images', function() { gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif', './src/assets/images/*.png' ]) .pipe(gulp.dest('./dist/images')); }); gulp.task('vendor-css', function() { gulp.src(['./src/assets/styles/vendor/*.css' ]) .pipe(gulp.dest('./dist')); }); gulp.task('fonts', function() { gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf', './src/assets/fonts/*.svg' ]) .pipe(gulp.dest('./dist/fonts')); }); gulp.task('styles', function() { return gulp.src('./src/main.styl') .pipe($.stylus()) .pipe($.autoprefixer()) .pipe($.rename('bundle.css')) .pipe(gulp.dest('./dist')) .pipe(reload({ stream: true })); }); var bundler = _.memoize(function(watch) { var options = {debug: true}; if (watch) { _.extend(options, watchify.args); } var b = browserify('./src/main.js', options); if (watch) { b = watchify(b); } return b; }); var handleErrors = function() { var args = Array.prototype.slice.call(arguments); delete args[0].stream; $.util.log.apply(null, args); this.emit('end'); }; function bundle(cb, watch) { return bundler(watch).bundle() .on('error', handleErrors) .pipe(source('bundle.js')) .pipe(buffer()) .pipe($.sourcemaps.init({ loadMaps: true })) .pipe($.sourcemaps.write('./')) .pipe(gulp.dest('./dist')) .on('end', cb) .pipe(reload({ stream: true })); } gulp.task('scripts', function(cb) { bundle(cb, true); }); gulp.task('jshint', function() { return gulp.src(['./src/**/*.js', './test/**/*.js']) .pipe($.plumber()) .pipe($.jshint()) .pipe($.jshint.reporter(stylish)); }); gulp.task('compress', function (cb) { var options = { preserveComments: 'license' }; pump([ gulp.src('./dist/bundle.js'), minifier(options, uglifyjs), gulp.dest('./dist') ], cb ); }); var reporter = 'spec'; gulp.task('mocha', ['jshint'], function() { return gulp.src([ './test/setup/node.js', './test/setup/helpers.js', './test/unit/**/*.js' ], { read: false }) .pipe($.plumber()) .pipe($.mocha({ reporter: reporter })); }); gulp.task('build', [ 'clean', 'html', 'images', 'vendor-css', 'fonts', 'styles', 'scripts', 'test', 'compress' ]); gulp.task('test', [ 'jshint' ]); gulp.task('watch', ['build'], function() { browserSync.init({ server: { baseDir: 'dist' } }); reporter = 'dot'; bundler(true).on('update', function() { gulp.start('scripts'); gulp.start('test'); }); gulp.watch('./test/**/*.js', ['test']); gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']); gulp.watch(['./src/*.html'], ['html']); }); gulp.task('default', ['watch']);
Now, when I start gulp , the task for compression begins, does not give any error, but never ends, and the assembly (dist) is performed in the same way as before (no minimization happens!) . Do I need to somehow integrate this compression task into the bundle function using another .pipe , or am I doing something else wrong? Also, is it correct to make a mini-code after creating bundle.js , what am I trying to do here, or should it be at a stage when the source files are still not merged?