gulp-rails-pipeline

DEPRECATED: Use Blendid!

The work done in this repo has been rolled into a single dependency solution: Blendid!. You can set up your Rails project with the yarn run blendid -- init-rails command.

The Gulp Asset Pipeline on Rails

• Leaves Sprockets and manifest files intact for use with gem installed assets
• Transform and bundle CommonJS modules (js or coffee) with Browserify
• Compile .sass/.scss with Libsass (node-sass through gulp-sass)
• Autoprefix css
• Optimize images (could be expanded to further process or resize images)
• Compile an icon font + sass from a folder of SVGs
• Full BrowserSync integration (the original Rails Asset Pipeline didn't work with live stylesheet injection)
• Revision filenames in production for caching
• Build assets on deploy with Heroku

Production Environment Demo (notice the revisioned asset filenames for caching)

This repo is only meant to be an example. You should fork and customize it with your own Rails setup and relevant Gulp tasks, or copy the relevant files into an existing project. To understand more about individual modules, read the documentation on their respective websites and repositories. Based on gulp-starter.

Running the Demo

Clone the repository

git clone https://github.com/vigetlabs/gulp-rails-pipeline.git

Enter into the directory and run bundle install

cd gulp-rails-pipeline
bundle install

Install javascript dependencies. Once npm install runs, the postinstall setting in package.json will run gulp build and do an initial build of your assets.

npm install

Start the rails server.

rails s

Run gulp and rejoice! This will start watching and recompiling files on the fly, as well as open a browser with BrowserSync running.

gulp

Try editing global.sass and watch how fast it reloads the css! Once you taste the speed of Libsass + BrowserSync, you'll never go back. Test out changing view code and javascript as well.

Asset File Structure

gulp/assets

This is where all your source files will live. Your source icons for icon fonts, sass files, js modules, and images. Anything that needs to get processed by Gulp. All assets are set up to compile to public/assets.

public/assets

The destination of your compiled and processed assets. The application.css and application.js manifest files in app/assets pull compiled code from this folder.

app/assets

The old default asset directory should only include manifest files, which are necessary if you need to require gem installed assets (e.g., jquery_ujs, turbolinks) with Sprockets. The manifest files pull in gem assets, as well as our compiled js and css files from /public/assets.

Rails setup notes:

config/application.rb

# Make public assets requireable in manifest files
config.assets.paths `. Instead, use `">`.

### config/initializers/rev_manifest.rb
```rb
rev_manifest_path = 'public/assets/rev-manifest.json'

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

…

bash
heroku buildpacks                     # view current buildpacks
heroku buildpacks:clear               # clear current buildpacks, if necessary
heroku buildpacks:add heroku/nodejs   # add the buildpacks we want ...
heroku buildpacks:add heroku/ruby     # ... in the order we want them

Now, when we deploy to Heroku, first npm install will run, then our postinstall script specified in package.json, and then bundle install will run.

Take note of the following:

  #production.rb line 25
  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?

Heroku requires config.serve_static_files to be enabled, so be sure to either add RAILS_SERVE_STATIC_FILES as a config var in your Heroku settings, or manually set this to true in your production.rb file.

Capistrano

All we need to do is add a task to run npm install before we compile the assets.

The example below shows an example of using nvm (node version manager) to use the specified node version for your application.

# ./config/deploy.rb

before "deploy:assets:precompile", "deploy:npm_install"

namespace :deploy do
  desc "Run npm install"
  task :npm_install do
    invoke_command "bash -c '. /home/deploy/.nvm/nvm.sh && cd #{release_path} && npm install'"
  end
end

Original Blog Post: viget.com/extend/gulp-rails-asset-pipeline

Visit code.viget.com to see more projects from Viget.