Gulp Starter 2.0

- Full asset pipeline and static html compilation
- New directory structure
- Add Swig templating
- Use gulp-watch to catch new files
- Production mode w/ compression + filename revisioning
- Remove old examples and extraneous dependecies
- Upgrade dependencies (BrowserSync 2!)
- Move browserify transform options out of package.json

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
 .sass-cache
-build
+public
 Desktop.ini
 node_modules

LICENSE.md → LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Daniel Tello
+Copyright (c) 2015 Dan Tello
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

gulp/assets/javascripts/__tests__/global.coffee

@@ -0,0 +1,5 @@
+message = require '../global'
+
+describe 'global.coffee', ->
+  it 'exports a message', ->
+    message.should.equal 'global.js loaded!'

gulp/assets/javascripts/global.coffee

@@ -0,0 +1,4 @@
+message = 'global.js loaded!'
+console.log message
+
+module.exports = message

gulp/assets/stylesheets/base/_mixins.sass

@@ -0,0 +1,3 @@
+=font-smoothing
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased

gulp/assets/stylesheets/base/_typography.sass

@@ -0,0 +1,23 @@
+body
+  +font-smoothing // <- _mixins.scss
+  color: #555
+  font-family: sans-serif
+  font-size: 1.25em
+  padding: 5%
+  text-align: center
+
+small
+  font-size: 0.75em
+  margin-top: 0.25em
+
+code
+  background-color: lightgrey
+  border-radius: 3px
+  display: inline-block
+  font-family: monospace
+  font-size: 1.25em
+  padding: 0.25em 0.5em
+
+a
+  text-decoration: none
+  color: royalBlue

src/sass/_icons.sass → gulp/assets/stylesheets/generated/_icons.sass

@@ -4,8 +4,8 @@
 
 @font-face
   font-family: Post-Creator-Icons
-  src: url("fonts/Post-Creator-Icons.eot")
-  src: url("fonts/Post-Creator-Icons.eot?#iefix") format('embedded-opentype'), url("fonts/Post-Creator-Icons.woff") format('woff'), url("fonts/Post-Creator-Icons.ttf") format('truetype'), url("fonts/Post-Creator-Icons.svg#Post-Creator-Icons") format('svg')
+  src: url("/assets/fonts/Post-Creator-Icons.eot")
+  src: url("/assets/fonts/Post-Creator-Icons.eot?#iefix") format('embedded-opentype'), url("/assets/fonts/Post-Creator-Icons.woff") format('woff'), url("/assets/fonts/Post-Creator-Icons.ttf") format('truetype'), url("/assets/fonts/Post-Creator-Icons.svg#Post-Creator-Icons") format('svg')
   font-weight: normal
   font-style: normal
 
@@ -23,6 +23,14 @@
     text-transform: none
     @content
 
+=icon--test
+  +icon("\e005")
+    @content
+
+.icon
+  &.-test
+    +icon--test
+
 =icon--facebook
   +icon("\e001")
     @content

gulp/assets/stylesheets/global.sass

@@ -0,0 +1,3 @@
+@import generated/icons
+@import base/mixins
+@import base/typography

gulp/config.js

@@ -1,68 +1,90 @@
-var dest = "./build";
-var src = './src';
+var publicDirectory = "./public";
+var publicAssets    = publicDirectory + "/assets";
+var sourceDirectory = "./gulp";
+var sourceAssets    = sourceDirectory + "/assets";
 
 module.exports = {
+  publicDirectory: publicDirectory,
+  sourceAssets: sourceAssets,
+  publicAssets: publicAssets,
+
+  browserify: {
+    bundleConfigs: [{
+      entries: sourceAssets + '/javascripts/global.coffee',
+      dest: publicAssets + '/javascripts',
+      outputName: 'global.js',
+      extensions: ['.coffee', '.js'],
+      transform: [ 'coffeeify' ]
+    }]
+  },
+
   browserSync: {
     server: {
-      // Serve up our build folder
-      baseDir: dest
-    }
-  },
-  sass: {
-    src: src + "/sass/*.{sass,scss}",
-    dest: dest,
-    settings: {
-      indentedSyntax: true, // Enable .sass syntax!
-      imagePath: 'images' // Used by the image-url helper
-    }
+      baseDir: publicDirectory
+    },
+    files: ['pubilc/**/*.html']
   },
-  images: {
-    src: src + "/images/**",
-    dest: dest + "/images"
-  },
-  markup: {
-    src: src + "/htdocs/**",
-    dest: dest
-  },
-  iconFonts: {
+
+  iconFont: {
     name: 'Gulp Starter Icons',
-    src: src + '/icons/*.svg',
-    dest: dest + '/fonts',
-    sassDest: src + '/sass',
+    src: sourceAssets + '/icons/*.svg',
+    dest: publicAssets + '/fonts',
+    sassDest: sourceAssets + '/stylesheets/generated',
     template: './gulp/tasks/iconFont/template.sass.swig',
     sassOutputName: '_icons.sass',
-    fontPath: 'fonts',
+    fontPath: '/assets/fonts',
     className: 'icon',
     options: {
-      fontName: 'Post-Creator-Icons',
+      fontName: 'icons',
       appendCodepoints: true,
       normalize: false
     }
   },
-  browserify: {
-    // A separate bundle will be generated for each
-    // bundle config in the list below
-    bundleConfigs: [{
-      entries: src + '/javascript/global.coffee',
-      dest: dest,
-      outputName: 'global.js',
-      // Additional file extentions to make optional
-      extensions: ['.coffee', '.hbs'],
-      // list of modules to make require-able externally
-      require: ['jquery', 'backbone/node_modules/underscore']
-      // See https://github.com/greypants/gulp-starter/issues/87 for note about
-      // why this is 'backbone/node_modules/underscore' and not 'underscore'
-    }, {
-      entries: src + '/javascript/page.js',
-      dest: dest,
-      outputName: 'page.js',
-      // list of externally available modules to exclude from the bundle
-      external: ['jquery', 'underscore']
-    }]
+
+  html: {
+    watch: sourceDirectory + '/views/**/*.html',
+    src: [sourceDirectory + '/views/**/*.html', '!**/{layouts,shared}/**'],
+    dest: publicDirectory,
+    swig: {
+      defaults: { cache: false }
+    }
   },
+
+  images: {
+    src: sourceAssets + "/images/**",
+    dest: publicAssets + "/images"
+  },
+
+  karma: {
+    frameworks: ['mocha', 'sinon-chai', 'browserify'],
+    files: [
+      'gulp/assets/javascripts/**/__tests__/*'
+    ],
+    preprocessors: {
+      'gulp/assets/javascripts/**/__tests__/*': ['browserify']
+    },
+    browserify: {
+      debug: true,
+      extensions: ['.js', '.coffee'],
+      transform: ['coffeeify']
+    },
+    reporters: ['nyan'],
+    browsers: ['Chrome']
+  },
+
   production: {
-    cssSrc: dest + '/*.css',
-    jsSrc: dest + '/*.js',
-    dest: dest
+    cssSrc: publicAssets + '/**.css',
+    jsSrc: publicAssets + '/**.js',
+    dest: publicAssets
+  },
+
+  sass: {
+    autoprefixer: { browsers: ['last 2 version'] },
+    src: sourceAssets + "/stylesheets/**/*.{sass,scss}",
+    dest: publicAssets + '/stylesheets',
+    settings: {
+      indentedSyntax: true, // Enable .sass syntax!
+      imagePath: 'assets/images' // Used by the image-url helper
+    }
   }
 };

gulp/tasks/browserify.js

@@ -11,20 +11,24 @@
 var browserify   = require('browserify');
 var browserSync  = require('browser-sync');
 var watchify     = require('watchify');
-var bundleLogger = require('../util/bundleLogger');
+var bundleLogger = require('../lib/bundleLogger');
 var gulp         = require('gulp');
-var handleErrors = require('../util/handleErrors');
+var handleErrors = require('../lib/handleErrors');
 var source       = require('vinyl-source-stream');
 var config       = require('../config').browserify;
 var _            = require('lodash');
 
-var browserifyTask = function(callback, devMode) {
+var browserifyTask = function(callback, watch) {
 
   var bundleQueue = config.bundleConfigs.length;
 
   var browserifyThis = function(bundleConfig) {
 
-    if(devMode) {
+    // Work around a bug with passing transforms directly to browserify()
+    var transforms = bundleConfig.transform;
+    bundleConfig = _.omit(bundleConfig, ['transform']);
+
+    if(watch) {
       // Add watchify args and debug (sourcemaps) option
       _.extend(bundleConfig, watchify.args, { debug: true });
       // A watchify require/external bug that prevents proper recompiling,
@@ -34,6 +38,23 @@ var browserifyTask = function(callback, devMode) {
 
     var b = browserify(bundleConfig);
 
+    if(transforms) b.transform(transforms);
+
+    if(watch) {
+      // Wrap with watchify and rebundle on changes
+      b = watchify(b);
+      // Rebundle on update
+      b.on('update', bundle);
+      bundleLogger.watch(bundleConfig.outputName);
+    } else {
+      // Sort out shared dependencies.
+      // b.require exposes modules externally
+      if(bundleConfig.require) b.require(bundleConfig.require);
+      // b.external excludes modules from the bundle, and expects
+      // they'll be available externally
+      if(bundleConfig.external) b.external(bundleConfig.external);
+    }
+
     var bundle = function() {
       // Log when bundling starts
       bundleLogger.start(bundleConfig.outputName);
@@ -52,29 +73,14 @@ var browserifyTask = function(callback, devMode) {
         .pipe(browserSync.reload({stream:true}));
     };
 
-    if(devMode) {
-      // Wrap with watchify and rebundle on changes
-      b = watchify(b);
-      // Rebundle on update
-      b.on('update', bundle);
-      bundleLogger.watch(bundleConfig.outputName);
-    } else {
-      // Sort out shared dependencies.
-      // b.require exposes modules externally
-      if(bundleConfig.require) b.require(bundleConfig.require);
-      // b.external excludes modules from the bundle, and expects
-      // they'll be available externally
-      if(bundleConfig.external) b.external(bundleConfig.external);
-    }
-
     var reportFinished = function() {
       // Log when bundling completes
       bundleLogger.end(bundleConfig.outputName);
 
       if(bundleQueue) {
         bundleQueue--;
         if(bundleQueue === 0) {
-          // If queue is empty, tell gulp the task is complete.
+          // If all bundleConfigs have been bundled, tell gulp the task is complete.
           // https://github.com/gulpjs/gulp/blob/master/docs/API.md#accept-a-callback
           callback();
         }
@@ -84,11 +90,11 @@ var browserifyTask = function(callback, devMode) {
     return bundle();
   };
 
-  // Start bundling with Browserify for each bundleConfig specified
+  // Start bundling with Browserify for each bundleConfig listed
   config.bundleConfigs.forEach(browserifyThis);
 };
 
 gulp.task('browserify', browserifyTask);
 
-// Exporting the task so we can call it directly in our watch task, with the 'devMode' option
+// Exporting the task so we can call it directly in our watch task, with the 'watch' option
 module.exports = browserifyTask;

gulp/tasks/build.js

@@ -0,0 +1,6 @@
+var gulp         = require('gulp');
+var gulpSequence = require('gulp-sequence');
+
+gulp.task('build', function(cb) {
+  gulpSequence(['iconFont', 'images'], ['sass', 'browserify'], 'html', cb);
+});

gulp/tasks/clean.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var del = require('del');
+var config = require('../config');
+
+gulp.task('clean', function (cb) {
+  del([config.publicAssets,config.html.dest], cb);
+});

gulp/tasks/default.js

@@ -1,3 +1,9 @@
-var gulp = require('gulp');
+var gulp         = require('gulp');
+var gulpSequence = require('gulp-sequence');
 
-gulp.task('default', ['sass', 'images', 'markup', 'watch']);
+gulp.task('default', function(cb) {
+  var development = ['clean', ['iconFont', 'images'], ['sass', 'watchify'], 'html', 'watch', cb ];
+  var production  = ['karma', 'clean', 'build', ['minifyCss', 'uglifyJs'], 'rev', cb];
+  var tasks       = (process.env.NODE_ENV === 'production') ? production : development;
+  gulpSequence.apply(this, tasks);
+});

gulp/tasks/html.js

@@ -0,0 +1,11 @@
+var browserSync = require('browser-sync');
+var config      = require('../config').html;
+var gulp        = require('gulp');
+var swig        = require('gulp-swig');
+
+gulp.task('html', function() {
+  gulp.src(config.src)
+    .pipe(swig(config.swig))
+    .pipe(gulp.dest(config.dest))
+    .pipe(browserSync.reload({stream:true}));
+});

gulp/tasks/iconFont/generateIconSass.js

@@ -1,5 +1,5 @@
 var gulp     = require('gulp');
-var config   = require('../../config').iconFonts;
+var config   = require('../../config').iconFont;
 var swig     = require('gulp-swig');
 var rename   = require('gulp-rename');
 

gulp/tasks/iconFont/index.js

@@ -1,6 +1,6 @@
 var gulp             = require('gulp');
 var iconfont         = require('gulp-iconfont');
-var config           = require('../../config').iconFonts;
+var config           = require('../../config').iconFont;
 var generateIconSass = require('./generateIconSass');
 
 gulp.task('iconFont', function() {

gulp/tasks/images.js

@@ -1,8 +1,8 @@
-var changed    = require('gulp-changed');
-var gulp       = require('gulp');
-var imagemin   = require('gulp-imagemin');
-var config     = require('../config').images;
-var browserSync  = require('browser-sync');
+var browserSync = require('browser-sync');
+var changed     = require('gulp-changed');
+var config      = require('../config').images;
+var gulp        = require('gulp');
+var imagemin    = require('gulp-imagemin');
 
 gulp.task('images', function() {
   return gulp.src(config.src)