Sped up less compilation, added livereload and autoprefixer, cleaned up gulpfile a bit.

Note: this commit requires a Vagrant reprovision.

gulpfile.js

@@ -1,19 +1,9 @@
 var gulp = require("gulp"),
-    coffee = require("gulp-coffee"),
+    plug = require("gulp-load-plugins")(),
-    concat = require("gulp-concat"),
+    argv = require("yargs").argv;
-    sourcemaps = require("gulp-sourcemaps"),
-    cached = require("gulp-cached"),
-    plumber = require("gulp-plumber"),
-    notify = require("gulp-notify"),
-    order = require("gulp-order"),
-    argv = require("yargs").argv,
-    gulpif = require("gulp-if"),
-    uglify = require("gulp-uglify"),
-    less = require("gulp-less"),
-    minifyCss = require('gulp-minify-css');
 
 var plumberOptions = {
-    errorHandler: notify.onError("Error: <%= error.message %>")
+    errorHandler: plug.notify.onError("Error: <%= error.message %>")
 };
 
 gulp.task("scripts-app", function() {
@@ -36,8 +26,8 @@ gulp.task("scripts-app", function() {
     return argv.production
         // Production pipeline
         ? gulp.src(paths, {base: "app/scripts"})
-            .pipe(plumber(plumberOptions))
+            .pipe(plug.plumber(plumberOptions))
-            .pipe(order([
+            .pipe(plug.order([
                 "app/scripts/base/jquery-2.0.2.js",
                 "app/scripts/base/angular.js",
                 "app/scripts/base/*.{coffee,js}",
@@ -49,17 +39,20 @@ gulp.task("scripts-app", function() {
                 "app/scripts/app/controllers/*.{coffee,js}",
                 "app/scripts/**/*.{coffee,js}"
             ], {base: "."}))
-            .pipe(gulpif(/\.coffee/, coffee()))
+            .pipe(plug.if(/\.coffee/, plug.coffee()))
-            .pipe(concat("app.js"))
+            .pipe(plug.concat("app.js"))
-            .pipe(uglify())
+            .pipe(plug.uglify())
             .pipe(gulp.dest("public/build/scripts"))
         // Development/watch pipeline
         : gulp.src(paths, {base: "app/scripts"})
-            .pipe(plumber(plumberOptions))
+            .pipe(plug.plumber(plumberOptions))
-            .pipe(cached('scripts'))
+            .pipe(plug.cached('scripts'))
-            .pipe(sourcemaps.init())
+            .pipe(plug.sourcemaps.init())
-            .pipe(gulpif(/\.coffee/, coffee()))
+            .pipe(plug.if(/\.coffee/, plug.coffee()))
-            .pipe(sourcemaps.write())
+            .pipe(plug.sourcemaps.write({
+                includeContent: false,
+                sourceRoot: "/dev-scripts/"
+            }))
             .pipe(gulp.dest("public/build/scripts"));
 });
 
@@ -79,11 +72,11 @@ gulp.task("scripts-embed", function() {
     ];
     
     return gulp.src(includedScripts, {base: "app/scripts"})
-        .pipe(plumber(plumberOptions))
+        .pipe(plug.plumber(plumberOptions))
-        .pipe(gulpif(/\.coffee/, coffee()))
+        .pipe(plug.if(/\.coffee/, plug.coffee()))
-        .pipe(order(includedScripts, {base: "."}))
+        .pipe(plug.order(includedScripts, {base: "."}))
-        .pipe(concat("embed.js"))
+        .pipe(plug.concat("embed.js"))
-        .pipe(uglify())
+        .pipe(plug.uglify())
         .pipe(gulp.dest("public/build/scripts"));
 });
 
@@ -103,23 +96,44 @@ gulp.task("styles-app", function() {
         // to leave this path out in production so that embed files are not bloating
         // the css file
         includedStyles.push("app/styles/embed.css");
+
+        // Remove app.less from the cache so that it gets recompiled
+        var styleCache = plug.cached.caches.styles;
+        for (var file in styleCache) {
+            if (!styleCache.hasOwnProperty(file))
+                continue;
+
+            if (!endsWith(file, "app.less"))
+                continue;
+
+            delete styleCache[file];
         }
+    }
+
+    // note that we're not doing autoprefixer on dev builds for now to shave off roughly 600-700 milliseconds per
+    // build. It's already taking forever to recompile the less
 
     return argv.production
         // Production pipeline
         ? gulp.src(includedStyles, {base: "app/styles"})
-            .pipe(plumber(plumberOptions))
+            .pipe(plug.plumber(plumberOptions))
-            .pipe(gulpif(/\.less/, less()))
+            .pipe(plug.if(/\.less/, plug.less()))
-            .pipe(concat("app.css"))
+            .pipe(plug.autoprefixer({browsers: ["last 2 versions"], cascade: false}))
-            .pipe(minifyCss())
+            .pipe(plug.concat("app.css"))
+            .pipe(plug.minifyCss())
             .pipe(gulp.dest("public/build/styles"))
         // Development pipeline
         : gulp.src(includedStyles, {base: "app/styles"})
-            .pipe(plumber(plumberOptions))
+            .pipe(plug.plumber(plumberOptions))
-            .pipe(sourcemaps.init())
+            .pipe(plug.cached("styles"))
-            .pipe(gulpif(/\.less/, less()))
+            .pipe(plug.sourcemaps.init())
-            .pipe(sourcemaps.write())
+            .pipe(plug.if(/\.less/, plug.less()))
-            .pipe(gulp.dest("public/build/styles"));
+            .pipe(plug.sourcemaps.write({
+                includeContent: false,
+                sourceRoot: "/dev-styles/"
+            }))
+            .pipe(gulp.dest("public/build/styles"))
+            .pipe(plug.livereload());
 });
 
 gulp.task("styles-embed", function() {
@@ -128,13 +142,19 @@ gulp.task("styles-embed", function() {
     // already
 
     return gulp.src(["app/styles/embed.less"], {base: "app/styles"})
-        .pipe(less())
+        .pipe(plug.less())
-        .pipe(concat("embed.css"))
+        .pipe(plug.autoprefixer({browsers: ["last 2 versions"], cascade: false}))
-        .pipe(minifyCss())
+        .pipe(plug.concat("embed.css"))
+        .pipe(plug.minifyCss())
         .pipe(gulp.dest("public/build/styles"));
 });
 
 gulp.task("watch", function() {
+    plug.livereload.listen();
     gulp.watch("app/scripts/**/*.{coffee,js}", ["scripts-app"]);
     gulp.watch("app/styles/**/*.{css,less}", ["styles-app"]);
 });
+
+function endsWith(str, suffix) {
+    return str.indexOf(suffix, str.length - suffix.length) !== -1;
+}

package.json

@@ -9,11 +9,14 @@
   "dependencies": {},
   "devDependencies": {
     "gulp": "^3.8.11",
+    "gulp-autoprefixer": "^2.2.0",
     "gulp-cached": "^1.0.4",
     "gulp-coffee": "^2.3.1",
     "gulp-concat": "^2.5.2",
     "gulp-if": "^1.2.5",
     "gulp-less": "^3.0.3",
+    "gulp-livereload": "^3.8.0",
+    "gulp-load-plugins": "^0.10.0",
     "gulp-minify-css": "^1.1.0",
     "gulp-notify": "^2.2.0",
     "gulp-order": "^1.1.1",

vagrant/pony.fm.nginx.site.config

@@ -24,6 +24,14 @@ server {
         }
     }
 
+    location /dev-styles/ {
+        alias /vagrant/app/styles/;
+    }
+
+    location /dev-scripts/ {
+        alias /vagrant/app/scripts/;
+    }
+
     location ~ \.php$ {
         fastcgi_split_path_info ^(.+\.php)(/.+)$;
         fastcgi_pass unix:/var/run/php5-fpm.sock;