A sample gulpfile for typical frontend dev
var gulp = require('gulp'),
browserify = require('browserify'),
es6ify = require('es6ify'),
hbsfy = require('hbsfy'),
bulkify = require('bulkify'),
source = require('vinyl-source-stream'),
streamify = require('gulp-streamify'),
concat = require('gulp-concat'),
gutil = require('gulp-util'),
livereload = require('gulp-livereload'),
less = require('gulp-less'),
autoprefixer = require('autoprefixer-core'),
postcss = require('gulp-postcss'),
minify = require('gulp-minify-css'),
argv = require('yargs').argv,
gulpif = require('gulp-if'),
uglify = require('gulp-uglify');
es6ify.traceurOverrides = {experimental: true};
/*
Browserify, transform and concat all javascript
*/
gulp.task('scripts', function() {
return browserify('./src/main/scripts/app.js')
.add(es6ify.runtime)
.transform(hbsfy)
.transform(es6ify.configure(/^(?!.*node_modules)+.+\.js$/))
.transform(bulkify)
.bundle()
.pipe(source('app.js'))
.pipe(streamify(concat('build.js')))
.pipe(gulpif(argv.production, uglify()))
.pipe(gulp.dest('./WebContent/js'))
.pipe(gulpif(!argv.production, livereload()));
});
/*
Convert, prefixize and concat all .less files
*/
gulp.task('stylesheets', function() {
gulp.src('src/main/stylesheets/main.less')
.pipe(less())
.on('error', gutil.log)
.pipe(concat('build.css'))
.pipe(postcss([autoprefixer({
browsers: ['last 2 versions', 'android >= 2.3', '> 1%'],
cascade: false
})]))
.pipe(gulpif(argv.production, minify()))
.pipe(gulp.dest('./WebContent/css'))
.pipe(gulpif(!argv.production, livereload()))
});
/*
Refresh HTML
*/
gulp.task('html', function() {
gulp.src('src/main/html/**')
.pipe(gulp.dest('./WebContent'))
.pipe(gulpif(!argv.production, livereload()))
});
/*
Rerun the task when a file changes
*/
gulp.task('watch', function() {
gulp.watch('src/main/scripts/**', ['scripts']);
gulp.watch('src/main/stylesheets/**', ['stylesheets']);
gulp.watch('src/main/html/**', ['html']);
});
/*
The default task (called when you run `gulp` from cli)
*/
gulp.task('default', ['stylesheets', 'scripts', 'html', 'watch’]);