Base Gulpfile

gulpfile.js

/*global require */
'use strict';

var _          = require('lodash');
var browserify = require('browserify');
var colors     = require('colors');
var concatCss  = require('gulp-concat-css');
var del        = require('del');
var gulp       = require('gulp');
var gulpif     = require('gulp-if');
var gutil      = require('gulp-util');
var lrload     = require('livereactload');
var nodemon    = require('gulp-nodemon');
var path       = require('path');
var source     = require('vinyl-source-stream');
var sourcemaps = require('gulp-sourcemaps');
var ts         = require('gulp-typescript');
var watchify   = require('watchify');

var watching = false;

// SOURCES
//==============================================================================

var libs = [
    'react',
    'lodash',
    'jquery',
    'd3',
    'moment',
    'halogen'
];

var sources = relativeToRoot(
    'src/app.ts',
    'src/timeline.ts',
    'src/toolbar.ts',
    'src/dropdown.ts',
    'src/selector.ts',
    'src/checkbox.ts',
    'src/tooltip.ts',
    'src/button.ts',
    'src/highlight.ts',
    'src/date-range-slider.ts',
    'src/lane.ts',
    'src/bar.ts',
    'src/statistics.ts',
    'src/data.ts'
);

var typings = relativeToRoot(
    'typings/lodash/lodash.d.ts',
    'typings/moment/moment.d.ts',
    'typings/jquery/jquery.d.ts',
    'typings/d3/d3.d.ts',
    'typings/react/react.d.ts'
);

var htmlSources = [
    'index.html',
    'src/omnibox-sprite.png'
];

var jsSources = sources.map(ts2js).concat(relativeToRoot(
    'src/slider.js'
));

var cssSources = [
    './src/css/style.css'
];

//==============================================================================

var bundler = browserify({
    entries:      jsSources,
    paths:        ['src'],
    transform:    gutil.env.type === 'production' ? [] : [lrload], // For production this needs to be false
    debug:        true,
    cache:        {},
    packageCache: {},
    fullPaths:    true
});

var tsProject = ts.createProject({
    noExternalResolve: true,
    module: 'commonjs',
    sortOutput: true
});


// TASKS
//==============================================================================

gulp.task('copyHtml', function() {
    gulp.src(htmlSources).pipe(gulp.dest('dist'));
});

gulp.task('build', function() {
    return gulp.src(sources.concat(typings))
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject)).js
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('js'));
});

gulp.task('css', function () {
  var stream = gulp.src(cssSources)
    .pipe(concatCss("bundle.css"))
    .pipe(gulp.dest('./dist'));

    return stream;
});

gulp.task('bundle', ['vendor','build'], _.partial(bundle, 'app.js', bundler, true));

gulp.task('vendor', _.partial(bundle, 'vendor.js', browserify(), false));

gulp.task('watch', ['deploy', 'serve'], function() {
    watching = true;

    gulp.watch(sources,     ['build']);
    gulp.watch(htmlSources, ['copyHtml']);
    gulp.watch(cssSources,  ['css']);
    lrload.listen();

    watchify(bundler)
        .on('error', gutil.log)
        .on('update', _.partial(bundle, 'app.js', bundler, true));
});

gulp.task('serve', function() {
    nodemon({ script: 'server.js', ext: 'js', ignore: ['gulpfile.js', 'dist/app.js', 'dist/vendor.js','js/*', 'node_modules/*'] })
        .on('restart', function () { gutil.log('Server restarted'); });
});

gulp.task('clean', function() { del(['js', 'dist']); });

gulp.task('deploy', ['copyHtml', 'css', 'bundle'])

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

// HELPER FUNCTIONS
//==============================================================================

function bundle(output, b, isExternal) {
    console.log('Bundling', output);

    libs.forEach(function(lib) {
        (isExternal) ? b.external(lib) : b.require(lib);
    });
    b.bundle()
        .on('error', function(err) { gutil.log(err.message.bgRed); })
        .pipe(source(output))
        .pipe(gulp.dest('dist'))
        .pipe(gulpif(watching, lrload.gulpnotify()));
}

function relativeToRoot () {
    var splitPath = function(p) { return path.join.apply(undefined, p.split('/')); };
    return _.map(arguments, _.compose(path.resolve, splitPath));
}

function ts2js (f) {
    return f
        .replace('src/', 'js/')
        .replace('.ts', '.js');
}