gulpfile.js

   1
   2 var gulp = require('gulp');
   3 var browserify = require('browserify');
   4 var watchify = require('watchify');
   5 var es6ify = require('es6ify');
   6 var source = require('vinyl-source-stream');
   7 var rename = require('gulp-rename');
   8 var less = require('gulp-less');
   9 var LessPluginAutoPrefix = require('less-plugin-autoprefix');
  10 var autoprefix = new LessPluginAutoPrefix({
  11   browsers: ["last 2 versions"]
  12 });
  13 var notify = require('gulp-notify');
  14 var plumber = require('gulp-plumber');
  15
  16 var reactify = require('./vendor/reactify');
  17
  18 var jsMainFile = './main.jsx';
  19
  20 var vendorFiles = [
  21     'node_modules/es6ify/node_modules/traceur/bin/traceur-runtime.js'];
  22 var vendorBuild = 'build/vendor';
  23 gulp.task('vendor', function () {
  24     return gulp.src(vendorFiles).
  25         pipe(gulp.dest(vendorBuild));
  26 });
  27
  28 // Compile stylesheets into build/bundle.css
  29 gulp.task('less', function() {
  30   return gulp.src('css/main.less').
  31     pipe(less({ plugins: [autoprefix] })).
  32     pipe(rename('bundle.css')).
  33     pipe(gulp.dest('build/'));
  34 });
  35
  36 // Bundle JS / JSX files into build/bundle.js
  37 gulp.task('build', function() {
  38   return bundle(browserify(jsMainFile));
  39 });
  40
  41 gulp.task('all', ['build', 'less', 'vendor']);
  42
  43 // Continuously bundle JS / JSX files into build/bundle.js
  44 gulp.task('watch', ['less', 'vendor'], function() {
  45   var watcher = watchify(jsMainFile);
  46   watcher.on('update', function(ids) {
  47     console.log('Update bundle due to change in: ', ids);
  48     return bundle(watcher);
  49   });
  50   watcher.on('bytes', function(bytes) {
  51     console.log('Done. ' + bytes + ' bytes written.');
  52   });
  53   return bundle(watcher);
  54 });
  55
  56 function bundle(bundler) {
  57   return bundler.
  58     transform(reactify).
  59     transform(es6ify.configure(/\.jsx?/)).
  60     bundle({ debug: true }).
  61     pipe(plumber({ onError: notify.onError("Build failed: <%= error.message %>") })).
  62     pipe(source(jsMainFile)).
  63     pipe(rename('bundle.js')).
  64     pipe(gulp.dest('build/')).
  65     pipe(notify("Build done: <%= file.filename %>"));
  66 }