atma
10/8/2014 - 2:38 AM

A sample gulpfile for typical frontend dev

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’]);