Gulp setup - 1

browserify.js

var gulp        = require('gulp');
var path        = require('path');
var browserify  = require('browserify');
var reactify    = require('reactify');
var watchify    = require('watchify');

var gulpif      = require('gulp-if');
var uglify      = require('gulp-uglify');
var streamify   = require('gulp-streamify');
var notify      = require('gulp-notify');
var gutil       = require('gulp-util');
var source      = require('vinyl-source-stream');

var browserifyTask = function (options) {

    var dependencies = [];
    options['src'].map(function(entry){
        // Our app bundler
        var appBundler = browserify({
            entries: [entry.file], // Only need initial file, browserify finds the rest
            transform: [reactify], // We want to convert JSX to normal javascript
            debug: options.development, // Gives us sourcemapping
            cache: {}, packageCache: {}, fullPaths: options.development // Requirement of watchify
        });

        // We set our dependencies as externals on our app bundler when developing
        (options.development ? dependencies : []).forEach(function (dep) {
            appBundler.external(dep);
        });

        // The rebundle process
        var rebundle = function () {
            var start = Date.now();
            console.log('Building APP bundle');
            appBundler.bundle()
                .on('error', gutil.log)
                .pipe(source(entry.source))
                .pipe(gulpif(!options.development, streamify(uglify().on('error', gutil.log))))
                .pipe(gulp.dest(entry.dest))
                .pipe(notify(function () {
                    console.log('APP bundle built in ' + (Date.now() - start) + 'ms');
                }));
        };

        // Fire up Watchify when developing
        if (options.development) {
            appBundler = watchify(appBundler, {
                poll: true
            });
            appBundler.on('update', function(){
                rebundle();
            });
        }

        rebundle();
    });
}

module.exports = browserifyTask;

gulpfile.js

'use strict';

var gulp       = require('gulp');
var requireDir = require('require-dir');
var argv = require('yargs').argv;

var tasks = requireDir('./gulp_tasks', { recurse: true });

gulp.task('default', ['build']);

// You should define here the list of the main commands you have available

html.js

var gulp        = require('gulp');

var usemin      = require('gulp-usemin');
var gulpif      = require('gulp-if');
var uglify      = require('gulp-uglify');
var cssmin      = require('gulp-cssmin');

// HTML
var htmlTask = function (options) {
    options['src'].map(function(file) {
        gulp.src(file)
            .pipe(usemin({
                css: [ cssmin() ],
                js: [ uglify()]
            }))
            .pipe(gulp.dest(options.dest));
    });
}

module.exports = htmlTask;

sass.js

var gulp        = require('gulp');
var gulpif      = require('gulp-if');
var notify      = require('gulp-notify');
var cssmin      = require('gulp-cssmin');
var sass        = require('gulp-sass');

// Sass compilation
var sassTask = function (options) {
    if (options.development) {
        var run = function () {
            console.log(arguments);
            var start = new Date();
            console.log('Building CSS bundle');
            gulp.src(options.src)
                .pipe(sass().on('error', sass.logError))
                .pipe(gulp.dest(options.dest))
                .pipe(notify(function () {
                    console.log('CSS bundle built in ' + (Date.now() - start) + 'ms');
                }));
        };
        run();
        gulp.watch(options.src, run);
    } else {
        gulp.src(options.src)
            .pipe(sass())
            .pipe(cssmin())
            .pipe(gulp.dest(options.dest));
    }
}

module.exports = sassTask;