gulpfile.js

/* jshint node: true */
/* global open: true */

//NOTE: check out gulp-cache, gulp-modernizr, gulp-jscs

// var path     = require('path');
var _        = require('lodash');
var connect  = require('connect');
var open     = require('open');
var tinylr   = require('tiny-lr');
var gulp     = require('gulp');
var gutil    = require('gulp-util');
var sass     = require('gulp-sass');
var concat   = require('gulp-concat');
var clean    = require('gulp-clean');
var reload   = require('gulp-livereload');
var jshint   = require('gulp-jshint');
var karma    = require('gulp-karma');
var declare  = require('gulp-declare');
var template = require('gulp-tmpl');
var inject   = require('gulp-inject');
var uglify   = require('gulp-uglify');
var minify   = require('gulp-minify-css');
var rev      = require('gulp-rev');
var htmlmin  = require('gulp-htmlmin');
var plumber  = require('gulp-plumber');
var size     = require('gulp-size');


// dev server port
var port   = 3000;

// liveReload server port
var lrPort = 35729;

// all the app scripts
// .tmp/* are generated by other tasks
var scripts = [
  //vendor deps
  'src/vendor/jquery/dist/jquery.js',
  'src/vendor/lodash/dist/lodash.underscore.js',
  'src/vendor/backbone/backbone.js',
  // app
  'src/app/app.js',
  'src/app/router.js',
  '.tmp/app/templates.js',
  'src/app/models/*.js',
  'src/app/collections/*.js',
  'src/app/libs/*.js',
  'src/app/presenters/*.js',
  'src/app/views/*.js',
  'src/app/init.js'
];

// all the app styles
// .tmp/* are generated by other tasks
var styles = [
  '.tmp/styles/app.css'
];

var filesLinted = [
  'src/app/**/*.js',
  'src/test/**/*.spec.js',
  'gulpfile.js'
];

// namespace for tasks
var task = { dev: {}, build: {} };

// start karma test runner
function _runKarma(options) {
  options = _.defaults(options || {}, {
    configFile: 'karma.conf.js',
    action: 'start'
  });
  return gulp.src(scripts.concat(['src/test/**/*.spec.js']))
    .pipe(karma(options));
}

/**
 *
 * GENERAL TASKS
 *
 */

task.clean = function() {
  return gulp.src(['build','.tmp', 'coverage'], {read: false}).pipe(clean());
};
task.lint = function() {
  return gulp.src(filesLinted)
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('jshint-stylish'));
};

task.templates = function() {
  return gulp.src('src/app/templates/*.html')
    .pipe(template())
    .pipe(declare({
      namespace: 'app.TEMPLATES',
      noRedeclare: true
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('.tmp/app'));
};

/**
 *
 * DEV TASKS
 *
 */

task.dev.styles = function() {
  return gulp.src('src/styles/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest('.tmp/styles'));
};

task.dev.index = function(){
  return gulp.src('src/index.html')
    .pipe(inject(gulp.src(scripts.concat(styles), {read: false}), {
      ignorePath: ['src', '.tmp']
    }))
    .pipe(gulp.dest('.tmp'));
};

task.dev.server = function() {
  connect()
    .use(require('connect-livereload')())
    .use(connect.static('.tmp'))
    .use(connect.static('src'))
    .listen(port);
  open('http://localhost:' + port);
  gutil.log('Server listening on', gutil.colors.cyan('http://localhost:'+port));
};

task.dev.watch = function() {
  var lr = tinylr();
  lr.listen(lrPort);
  // precompile templates every time one changes
  gulp.watch('src/app/templates/*.html', task.templates);
  // regenerate css after a sass file is updated
  gulp.watch('src/styles/**/*.scss', task.dev.styles);
  // we need to redo the page when it changes
  // this is because we inject the scripts and generate another
  // index page in dist so that's the one the server is serving.
  gulp.watch('src/index.html', task.dev.index);
  // live lint
  gulp.watch([
    'src/app/**/*.js',
    'src/test/**/*.spec.js'
  ], task.lint);
  // reload the page when a change is picked up
  gulp.watch([
    'src/app/**/*.js',
    '.tmp/index.html',
    '.tmp/app/templates.js',
    '.tmp/styles/*.css'
  ], function(e) {
    gulp.src(e.path, {read: false}).pipe(reload(lr));
  });
};

task.dev.testing = function() {
  return _runKarma();
};

// run the test once
task.dev.test = function() {
  return _runKarma({action: 'run'});
};


/**
 *
 * BUILD TASKS
 *
 */

task.build.scripts = function() {
  return gulp.src(scripts)
    .pipe(uglify())
    .pipe(concat('all.js'))
    .pipe(rev())
    .pipe(gulp.dest('./build/assets/scripts'))
    .pipe(size({showFiles: true}));
};

task.build.styles = function() {
  return gulp.src('src/styles/*.scss')
    .pipe(sass())
    .pipe(concat('all.css'))
    .pipe(minify())
    .pipe(rev())
    .pipe(gulp.dest('build/assets/styles'))
    .pipe(size({showFiles: true}));
};

task.build.index = function() {
  var injectedFiles = [
    'build/assets/styles/*.css',
    'build/assets/scripts/*.js'
  ];

  return gulp.src('src/index.html')
    .pipe(inject(gulp.src(injectedFiles, {read: false}), {
      ignorePath: ['src', 'build']
    }))
    .pipe(htmlmin({
      removeComments: true,
      collapseWhitespace: true,
      collapseBooleanAttributes: true,
      removeAttributeQuotes: true,
      removeRedundantAttributes: true,
      useShortDoctype: true,
      removeEmptyAttributes: true
    }))
    .pipe(gulp.dest('build'))
    .pipe(size({showFiles: true}));
};

task.build.server = function() {
  connect().use(connect.static('build')).listen(port);
  open('http://localhost:' + port);
  gutil.log('Server listening on', gutil.colors.cyan('http://localhost:'+port));
};

gulp.task('clean',     task.clean);
gulp.task('lint',      task.lint);
gulp.task('templates', ['clean'], task.templates);
//build tasks
// TODO: build still needs to optimize images. and copy all assets (fonts, images)
gulp.task('build:styles',  ['clean'], task.build.styles);
gulp.task('build:scripts', ['clean', 'templates'], task.build.scripts);
gulp.task('build:index',   ['clean', 'build:styles', 'build:scripts'], task.build.index);
gulp.task('build',         ['clean', 'lint', 'build:styles', 'build:scripts', 'build:index']);
gulp.task('build:server',  ['build'], task.build.server);
// dev tasks
gulp.task('styles',    ['clean'], task.dev.styles);
gulp.task('index',     ['clean', 'templates', 'styles'], task.dev.index);
gulp.task('server',    ['index'], task.dev.server);
gulp.task('test',      ['index'], task.dev.test);
gulp.task('testing',   ['index'], task.dev.testing);
gulp.task('watch',     ['server'], task.dev.watch);
gulp.task('default',   ['clean', 'lint', 'styles', 'templates', 'index', 'server', 'watch', 'testing']);