Gulp Asset Pipeline

gulp-asset-pipeline.md

Gulp Asset Pipleine

What it does

• Compile SASS
• Compile CofeeScript
• Bundle CommonJS modules (browserify)
• Compress Images
• Revision File names
• Multi-device live reloading (no refresh for CSS)
• Output source maps
• Generate icon fonts from svgs (not implemented)

File Structure

• gulp

• app

  • assets
    • fonts
    • images
    • javascripts
    • stylesheets

• public

  • assets (.gitignore)

Development (default task)

• Uses watchify
• Uses browserSync
• Does not compress css
• Generates source maps

Production (run as part of the deploy process)

• clean: empty out public/assets
• process assets, output to public/assets
  • compress images
  • run browserify
  • compile sass
• Minifify assets
  • minify-css
  • uglify js
• Rev Assets
  • Rev images, fonts, and javascripts
  • Replace asset paths in css files
  • Rev CSS files
  • Merge all manifests (for asset_path helper)

Tasks

• browserify
• browserSync
• clean
• compress-css
• compress-js
• default
• fonts
• images
• production
• reload
• rev
• sass
• watch

Rails integration

deploy.rb

after :updated, "gulp:npm_install"
after :updated, "gulp:precompile"
after :updated, "gulp:precompile_admin_assets"

gulp.rake

namespace :gulp do
  task :npm_install do
    on roles(:app) do |h|
      within release_path do
        execute :npm, "install"
      end
    end
  end

  task :precompile do
    on roles(:app) do |h|
      within release_path do
        execute "cd #{release_path} && node_modules/.bin/gulp production"
      end
    end
  end

  task :precompile_admin_assets do
    on roles(:app) do |h|
      within release_path do
        execute "cd #{release_path} && RAILS_ENV=#{fetch(:stage)} bundle exec rake assets:precompile"
      end
    end
  end
end

application.rb

config.assets.enabled = false

config.assets.precompile = %w( active_admin.js active_admin.css )

config.generators do |g|
  g.assets false
  g.helper false
end

asset_manifest.rb

rev_manifest_path = 'public/assets/rev-manifest.json'

if File.exist?(rev_manifest_path)
  ASSET_MANIFEST = JSON.parse(File.read(rev_manifest_path))
end

application_helper.rb

def asset_path(path)
  path = ASSET_MANIFEST[path] if defined?(ASSET_MANIFEST)
  "/assets/#{path}"
end