gulpfile.js

// FOUNDATION FOR APPS TEMPLATE GULPFILE
// -------------------------------------
// This file processes all of the assets in the "client" folder, combines them with the Foundation for Apps assets, and outputs the finished files in the "build" folder as a finished app.

// 1. LIBRARIES
// - - - - - - - - - - - - - - -

var $ = require('gulp-load-plugins')();
var argv = require('yargs').argv;
var gulp = require('gulp');
var rimraf = require('rimraf');
var router = require('front-router');
var sequence = require('run-sequence');
var open = require('open');

// Check for --production flag
var isProduction = !!(argv.production);

// 2. FILE PATHS
// - - - - - - - - - - - - - - -

var paths = {
  assets: [
    './client/**/*.*',
    '!./client/templates/**/*.*',
    '!./client/assets/{scss,js}/**/*.*'
  ],
  // Sass will check these folders for files when you use @import.
  sass: [
    'client/assets/scss',
    'bower_components/foundation-apps/scss',
    'bower_components/font-awesome/scss'
  ],
  // These files include Foundation for Apps and its dependencies
  foundationJS: [
    'bower_components/fastclick/lib/fastclick.js',
    'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
    'bower_components/tether/tether.js',
    'bower_components/hammerjs/hammer.js',
    'bower_components/angular/angular.js',
    'bower_components/angular-animate/angular-animate.js',
    'bower_components/angular-ui-router/release/angular-ui-router.js',
    'bower_components/foundation-apps/js/vendor/**/*.js',
    'bower_components/foundation-apps/js/angular/**/*.js',
    '!bower_components/foundation-apps/js/angular/app.js',
    'bower_components/jquery/dist/jquery.js',
    'bower_components/ng-file-upload/ng-file-upload.js',
    'bower_components/lodash/dist/lodash.js',
    'bower_components/angular-simple-logger/dist/angular-simple-logger.js',

    'bower_components/angular-google-maps/dist/angular-google-maps.js',
    'bower_components/markerclustererplus/dist/markerclusterer.min.js',
    'bower_components/google-maps-utility-library-v3-infobox/dist/infobox.js',
    'bower_components/google-maps-utility-library-v3-keydragzoom/dist/keydragzoom.js',
    'bower_components/google-maps-utility-library-v3-markerwithlabel/dist/markerwithlabel.js',
    'bower_components/js-rich-marker/src/richmarker.js',
    'bower_components/underscore/underscore.js',
    'bower_components/angularjs-datepicker/dist/angular-datepicker.js',
    'bower_components/angular-svg-round-progressbar/build/roundProgress.js',
    'bower_components/angular-payments/lib/angular-payments.js',
    'bower_components/angular-load/angular-load.js',
    'bower_components/moment/moment.js',
    'bower_components/angular-moment/angular-moment.js'
  ],
  // These files are for your app's JavaScript
  appJS: [
    'client/assets/js/app.js'
  ],
  controllersJS: [
    'client/assets/js/controllers/**/*.js'
  ],
  directivesJS: [
    'client/assets/js/directives/**/*.js'
  ],
  servicesJS: [
    'client/assets/js/services/**/*.js'
  ],
  filtersJS: [
    'client/assets/js/filters/**/*.js'
  ]
}

// 3. TASKS
// - - - - - - - - - - - - - - -

// Cleans the build directory
gulp.task('clean', function(cb) {
  rimraf('./build', cb);
});

// Copies everything in the client folder except templates, Sass, and JS
gulp.task('copy', function() {
  return gulp.src(paths.assets, {
      base: './client/'
    })
    .pipe(gulp.dest('./build'));
});

// Copies your app's page templates and generates URLs for them
gulp.task('copy:templates', function() {
  return gulp.src('./client/templates/**/*.html')
    .pipe(router({
      path: 'build/assets/js/routes.js',
      root: 'client'
    }))
    .pipe(gulp.dest('./build/templates'));
});

// Compiles the Foundation for Apps directive partials into a single JavaScript file
gulp.task('copy:foundation', function(cb) {
  gulp.src('bower_components/foundation-apps/js/angular/components/**/*.html')
    .pipe($.ngHtml2js({
      prefix: 'components/',
      moduleName: 'foundation',
      declareModule: false
    }))
    .pipe($.uglify())
    .pipe($.concat('templates.js'))
    .pipe(gulp.dest('./build/assets/js'));

  // Iconic SVG icons
  gulp.src('./bower_components/foundation-apps/iconic/**/*')
    .pipe(gulp.dest('./build/assets/img/iconic/'));

  cb();
});

// Compiles Sass
gulp.task('sass', function() {
  var minifyCss = $.if(isProduction, $.minifyCss());

  return gulp.src('client/assets/scss/app.scss')
    .pipe($.sass({
      includePaths: paths.sass,
      outputStyle: (isProduction ? 'compressed' : 'nested'),
      errLogToConsole: true
    }))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie 10']
    }))
    .pipe(minifyCss)
    .pipe(gulp.dest('./build/assets/css/'));
});

// Compiles and copies the Foundation for Apps JavaScript, as well as your app's custom JS
gulp.task('uglify', ['uglify:foundation', 'uglify:app', 'uglify:controllers', 'uglify:directives', 'uglify:services', 'uglify:filters'])

gulp.task('uglify:foundation', function(cb) {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function(e) {
      console.log(e);
    }));

  return gulp.src(paths.foundationJS)
    .pipe(uglify)
    .pipe($.concat('foundation.js'))
    .pipe(gulp.dest('./build/assets/js/'));
});

gulp.task('uglify:app', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function(e) {
      console.log(e);
    }));

  return gulp.src(paths.appJS)
    .pipe(uglify)
    .pipe($.concat('app.js'))
    .pipe(gulp.dest('./build/assets/js/'));
});

gulp.task('uglify:controllers', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function(e) {
      console.log(e);
    }));

  return gulp.src(paths.controllersJS)
    .pipe(uglify)
    .pipe($.concat('controllers.js'))
    .pipe(gulp.dest('./build/assets/js/'));
});

gulp.task('uglify:directives', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function(e) {
      console.log(e);
    }));

  return gulp.src(paths.directivesJS)
    .pipe(uglify)
    .pipe($.concat('directives.js'))
    .pipe(gulp.dest('./build/assets/js/'));
});

gulp.task('uglify:services', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function(e) {
      console.log(e);
    }));

  return gulp.src(paths.servicesJS)
    .pipe(uglify)
    .pipe($.concat('services.js'))
    .pipe(gulp.dest('./build/assets/js/'));
});

gulp.task('uglify:filters', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function(e) {
      console.log(e);
    }));

  return gulp.src(paths.filtersJS)
    .pipe(uglify)
    .pipe($.concat('filters.js'))
    .pipe(gulp.dest('./build/assets/js/'));
});

// Starts a test server, which you can view at http://localhost:8079
/*
gulp.task('server', ['build'], function() {
  gulp.src('./build')
    .pipe($.webserver({
      port: 8079,
      host: 'localhost',
      fallback: 'index.html',
      livereload: true,
      open: true
    }))
  ;
});
*/

gulp.task('server', ['build'], function() {
  $.connect.server({
    root: ['./build'],
    port: process.env.PORT || 5000,
    livereload: false
  });
  if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === undefined ? true : false) {
    open('http://localhost:5000');
  }
});

// Builds your entire app once, without starting a server
gulp.task('build', function(cb) {
  sequence('clean', ['copy', 'copy:foundation', 'sass', 'uglify'], 'copy:templates', cb);
});

// Default task: builds your app, starts a server, and recompiles assets when they change
gulp.task('default', ['server'], function() {
  // Watch Sass
  gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);

  // Watch JavaScript
  gulp.watch(['./client/assets/js/**/*', './js/**/*'], ['uglify:app', 'uglify:controllers', 'uglify:directives', 'uglify:services', 'uglify:filters']);

  // Watch static files
  gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*'], ['copy']);

  // Watch app templates
  gulp.watch(['./client/templates/**/*.html'], ['copy:templates']);
});