Gulp blog post

asset_manifest.rb

# config/initializers/asset_manifest.rb

class AssetManifest
  @manifest = JSON.parse(File.read("public/assets/rev-manifest.json"))

  def self.manifest
    @manifest
  end

  def self.stylesheet_link_tag(url)
    @manifest ||= AssetManifest.manifest
    url += ".css" unless url.end_with?(".css")

    url = @manifest[url] || url
  end

  def self.javascript_include_tag(url)
    @manifest ||= AssetManifest.manifest
    url += ".js" unless url.end_with?(".js")

    url = @manifest[url] || url
  end
end

gulpfile.coffee

dotenv = require('dotenv')
dotenv._getKeysAndValuesFromEnvFilePath("../.env")
dotenv._setEnvs()

require "sugar"

path = require "path"
fs = require 'fs'

rimraf = require "rimraf"
gulp = require "gulp"

sass = require "gulp-sass"
autoprefixer = require "gulp-autoprefixer"
rename = require "gulp-rename"
concat = require "gulp-concat"
coffee = require "gulp-coffee"
cjsx   = require "gulp-cjsx"
filter = require "gulp-filter"
install = require "gulp-install"
include = require "gulp-include"
cssGlobbing = require "gulp-css-globbing"
debug = require "gulp-debug"
plumber = require "gulp-plumber"
liveReload = require "gulp-livereload"
templateCache = require "gulp-angular-templatecache"
sourceMaps = require "gulp-sourcemaps"
revAll = require "gulp-rev-all"
awspublish = require "gulp-awspublish"
parallelize = require "concurrent-transform"
uglify = require "gulp-uglify"
minifyCSS = require "gulp-minify-css"

railsEnv = process.env.RAILS_ENV || "development"

bowerComponentPath = (path, check = true) ->
  path = "bower_components/#{path}"
  throw new Error("#{path} not found when importing bower component") if check && !fs.existsSync(path)
  path

vendorStylesheetPath = (path, check = true) ->
  path = "vendor/stylesheets/#{path}"
  throw new Error("#{path} not found when importing vendor stylesheet") if check && !fs.existsSync(path)
  path

vendorJavascriptPath = (path, check = true) ->
  path = "vendor/javascripts/#{path}"
  throw new Error("#{path} not found when importing vendor js") if check && !fs.existsSync(path)
  path

buildJavascript = (inputs, output) ->
  coffeeFilter = filter ["**/*.coffee"]
  cjsxFilter = filter ["**/*.cjsx"]
  htmlFilter = filter ["**/*.html"]

  error = null
  gulp.src(inputs)
    .pipe(plumber((e) ->
      error = e
    ))
    .pipe(sourceMaps.init())
    .pipe(htmlFilter)
    .pipe(templateCache())
    .pipe(htmlFilter.restore())
    .pipe(cjsxFilter)
    .pipe(cjsx())
    .pipe(cjsxFilter.restore())
    .pipe(coffeeFilter)
    .pipe(coffee())
    .pipe(coffeeFilter.restore())
    .pipe(concat(path.basename(output)))
    .pipe(sourceMaps.write("."))
    .pipe(gulp.dest(path.dirname(output)))
    .pipe(liveReload()).on 'end', ->
      if error
        console.log error.stack
        fs.writeFileSync(output, "document.body.innerHTML = " + JSON.stringify(error.toString().replace(/\u001b.*?m/g, '')))

buildSass = (input, output) ->
  loadPath = [path.dirname(input), "bower_components/", "vendor/stylesheets"]

  gulp.src(input)
    .pipe(sourceMaps.init())
    .pipe(include())
    .pipe(cssGlobbing({extensions: [".css", ".scss"]}))
    .pipe(sass({includePaths: loadPath, sourceComments: true, errLogToConsole: true}))
    .pipe(autoprefixer())
    .pipe(rename(path.basename(output)))
    .pipe(sourceMaps.write("."))
    .pipe(gulp.dest(path.dirname(output)))
    .pipe(liveReload())

gulp.task "js", -> buildJavascript [
  bowerComponentPath("jquery/dist/jquery.js"),
  bowerComponentPath("jquery-ujs/src/rails.js"),
  bowerComponentPath("d3/d3.js"),
  vendorJavascriptPath("jquery.tipsy.js"),
  vendorJavascriptPath("menu-aim.js"),

  "templates/**/*",
  "js/dashboard/*",
  "js/dashboard/components/**/*",
  "js/dashboard/plugins/**/*",
  ].compact(), "../public/assets/dashboard.js"

gulp.task "sass", -> buildSass "sass/dashboard/application.css.scss", "../public/assets/dashboard.css"

gulp.task "images", ->
  stream = gulp.src("images/**/*")
    .pipe(gulp.dest("../public/assets/images/"))
    .pipe(liveReload())

gulp.task "fonts", ->
  stream = gulp.src("fonts/**/*")
    .pipe(gulp.dest("../public/assets/fonts/"))
    .pipe(liveReload())

gulp.task "watch", ->
  setTimeout liveReload.listen, 10000
  gulp.watch "sass/dashboard/**/*", { interval: 500 }, ["sass-dashboard"]
  gulp.watch "sass/home/**/*", { interval: 500 }, ["sass-home"]
  gulp.watch "sass/admin/**/*", { interval: 500 }, ["sass-admin"]
  gulp.watch "sass/email/**/*", { interval: 500 }, ["sass-email"]

  gulp.watch "templates/**/*", { interval: 500 }, ["js-dashboard"]
  gulp.watch "js/dashboard/**/*", { interval: 500 }, ["js-dashboard"]
  gulp.watch "js/admin/**/*", { interval: 500 }, ["js-admin"]
  gulp.watch "js/home/**/*", { interval: 500 }, ["js-home"]

  gulp.watch "vendor/stylesheets/**/*", { interval: 500 }, ["sass"]
  gulp.watch "vendor/javascripts/**/*", { interval: 500 }, ["js"]

  gulp.watch "bower_components/**/*", { interval: 500 }, ["sass", "js"]

gulp.task "install", ->
  gulp.src(["./bower.json"])
    .pipe(install())

gulp.task "clean", -> rimraf.sync path.resolve("../public/assets")
gulp.task "default", ["install", "watch", "js", "sass", "images", "fonts"]
gulp.task "build", ["install", "js", "sass", "images", "fonts"]

gulp.task "production", ["install", "js", "sass", "images", "fonts"], ->
  jsFilter = filter ["**/*.js"]
  cssFilter = filter ["**/*.css"]

  rimraf.sync path.resolve("../public/assets/production")

  gulp.src("../public/*assets/**")
    .pipe(revAll({ ignore: [ /\.map$/ ]}))
    .pipe(gulp.dest("../public/assets/production"))

    .pipe(jsFilter)
    .pipe(uglify())
    .pipe(gulp.dest("../public/assets/production"))
    .pipe(jsFilter.restore())

    .pipe(cssFilter)
    .pipe(minifyCSS())
    .pipe(gulp.dest("../public/assets/production"))
    .pipe(cssFilter.restore())

    .pipe(revAll.manifest())
    .pipe(gulp.dest("../public/assets/production"))

gulp.task "publish", ->
  publisher = awspublish.create(bucket: 'bugsnag-website-assets')

  gulp.src("../public/assets/production/**")
    .pipe(awspublish.gzip())
    .pipe(parallelize(publisher.publish(), 20))
    .pipe(publisher.sync())
    .pipe(publisher.cache())
    .pipe(awspublish.reporter())

precompile.sh

#!/bin/bash

set -e
set -x

NEW_SHA=$1
OLD_SHA=$2
RAILS_ENV=$3

mkdir -p precompile

cd precompile
git clone .. . || git fetch
git checkout $NEW_SHA || (
    set +x
    echo "********************************************************"
    echo "You don't have a copy of $NEW_SHA. Try 'git pull'"
    echo "********************************************************"
    exit 1
)
git submodule update --init --recursive
ln -sf ../.env
cd frontend
ln -sf ../.env
cp -r ../../frontend/node_modules .
cp -r ../../frontend/bower_components .

export RAILS_ENV=$RAILS_ENV
gulp install
gulp build
gulp production
gulp publish

cd ../..
rm -rf public/assets/production
cp -r precompile/public/assets/production public/assets/

sample-gruntfile.js

// http://slides.com/contra/gulp#/13
// 1. Runs tests
// 2. Lints code
// 3. Concats javascript
// 4. Minifies it
// 5. Runs again if files are changed

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('test', ['jshint', 'qunit']);

  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

};

sample-gulpfile.js

// http://slides.com/contra/gulp#/15
// 1. Runs tests
// 2. Lints code
// 3. Concats javascript
// 4. Minifies it
// 5. Runs again if files are changed

var gulp = require('gulp');
var pkg = require('./package.json');
var concat = require('gulp-concat');
var minify = require('gulp-minify');
var jshint = require('gulp-jshint');
var spawn = require('child_process').spawn;

var scriptFiles = './src/**/*.js';

gulp.task('compile', function(){
  // concat all scripts, minify, and output
  gulp.src(scriptFiles)
    .pipe(concat({fileName: pkg.name+".js"})
    .pipe(minify())
    .pipe(gulp.dest('./dist/'));
});

gulp.task('test', function(){
  // lint our scripts
  gulp.src(scriptFiles).pipe(jshint());

  // run our tests
  spawn('npm', ['test'], {stdio: 'inherit'});
});

gulp.task('default', function(){
  gulp.run('test', 'compile');
  gulp.watch(scriptFiles, function(){
    gulp.run('test', 'compile');
  });
});

url_helpers.rb

# app/helpers/url_helpers.rb

def stylesheet_link_tag(url, options={})
  AssetManifest.stylesheet_link_tag(url)

  super
end

def javascript_include_tag(url, options={})
  AssetManifest.javascript_include_tag(url)

  super
end