Rails Assets Revisited• Jørgen Orehøj Erichsen

• CTO, Holdsport.dk, Rails freelancer

• joerichsen @ twitter, github, et. al.

The Asset Pipeline• preprocessing

• concatenation

• minification/compression

• fingerprinting

• gzip compression

The Asset PipelinePros

• Great Idea

• Just Works (tm)

Cons

• only happens when performing a request

• slow, Slow, SLOW

A Faster and More Flexible Approach

Gulp• Automate and enhance your workflow

• The streaming build system

Gulp Filosofy• stream files through "pipes"

• very "unixy" :-)

Gulp Examplevar gulp = require('gulp');var concat = require('gulp-concat');

gulp.task('default', function() { gulp.src(["app/assets/stylesheets/**/*"]) .pipe(concat('application.css')) .pipe( gulp.dest("public/assets/stylesheets/") )});

Gulp PluginsReplacing the asset pipeline

• gulp-concat

• gulp-minify-css/gulp-uglify

• gulp-sass/gulp-coffee

• gulp-rev-all

• gulp-gzip

Gulp PluginsExtra stuff

• gulp-sourcemaps

• gulp-watch

• gulp-imagemin

• gulp-csslint/gulp-jslint

• gulp-bless

• gulp-filter

Example for Rails - part Igulp.task("js", function() { var coffeeFilter = gulpFilter(['**/*.coffee']); gulp.src(["app/assets/javascripts/**/*.coffee", "app/assets/javascripts/**/*.js"]) .pipe(coffeeFilter) .pipe(coffee()) .pipe(coffeeFilter.restore()) .pipe(concat("application.js")); .pipe(gulp.dest("public/javascripts/"))});

Example - Updating stuff automaticallygulp.task('watch', function() { gulp.watch("app/assets/javascripts/**/*", ['js']);});

Example - Productionif (["production"].indexOf(railsEnv) !== -1) { stream = stream .pipe(uglify()) .pipe(gulp.dest("public/javascripts/")) .pipe(gzip({ gzipOptions: { level: 9 } }))}

DEMO

Fix Railsclass AssetManifest def self.manifest if File.exists?("rev-manifest.json") @manifest ||= JSON.parse(File.read("rev-manifest.json")) end end

def self.stylesheet_path(url) if AssetManifest.manifest url += ".css" unless url.end_with?(".css") AssetManifest.manifest[url] || url else url end end ...

References• http://gulpjs.com/

• https://bugsnag.com/blog/replacing-the-rails-asset-pipeline-with-gulp

• http://viget.com/extend/gulp-rails-asset-pipeline

• http://bower.io/