Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rails asset pipeline
Gulp
@tomaszbak
What asset pipeline provides?
● concatenate and minify JavaScript and CSS
● pre-processors such as CoffeeScript and Sass
What gulp provides?
● concatenate and minify JavaScript and CSS
● pre-processors (like CoffeeScript and SASS)
● automated ...
How to integrate in rails?
● gulp-rev-rails-manifest
● https://bugsnag.com/blog/replacing-the-rails-
asset-pipeline-with-g...
https://github.com/miksturait/merit-
money/compare/gulp-angular
cd frontend
npm install
bower install
gulp serve
https://github.com/miksturait/merit-
money/compare/gulp-angular
bower install ~ 10s
gulp build ~ 14s
rake assets:precompil...
https://github.com/miksturait/merit-
money/compare/gulp-angular
public/
fonts/
scripts/
styles/
index.html
Why gulp frontend tooling?
● frontend is better isolated from rails (rails API can be
stubbed with i.e. dyson)
● assets ar...
Read more
https://speakerdeck.com/addyosmani/front-end-tooling-workflows
http://www.slideshare.net/sbegaudeau/modern-web-a...
Upcoming SlideShare
Loading in …5
×

Replacing Rails asset pipeline with Gulp

1,362 views

Published on

Replacing Rails asset pipeline with Gulp

Published in: Software
  • Be the first to comment

  • Be the first to like this

Replacing Rails asset pipeline with Gulp

  1. 1. Rails asset pipeline Gulp @tomaszbak
  2. 2. What asset pipeline provides? ● concatenate and minify JavaScript and CSS ● pre-processors such as CoffeeScript and Sass
  3. 3. What gulp provides? ● concatenate and minify JavaScript and CSS ● pre-processors (like CoffeeScript and SASS) ● automated tasks, like: ○ remove unused CSS ○ creating image sprites and the corresponding CSS ○ automating checking your PageSpeed score
  4. 4. How to integrate in rails? ● gulp-rev-rails-manifest ● https://bugsnag.com/blog/replacing-the-rails- asset-pipeline-with-gulp
  5. 5. https://github.com/miksturait/merit- money/compare/gulp-angular cd frontend npm install bower install gulp serve
  6. 6. https://github.com/miksturait/merit- money/compare/gulp-angular bower install ~ 10s gulp build ~ 14s rake assets:precompile RAILS_ENV=production ~ 43s
  7. 7. https://github.com/miksturait/merit- money/compare/gulp-angular public/ fonts/ scripts/ styles/ index.html
  8. 8. Why gulp frontend tooling? ● frontend is better isolated from rails (rails API can be stubbed with i.e. dyson) ● assets are not committed to repo, installed with bower ● using libs (like bootstrap) from native frontend package systems, not via gems ● frontend tooling like gulp tasks and Yeoman generators
  9. 9. Read more https://speakerdeck.com/addyosmani/front-end-tooling-workflows http://www.slideshare.net/sbegaudeau/modern-web-application-development-workflow

×