====== Asset Pileline - Rails ====== ==== Basics ==== 1. The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages and pre-processors such as CoffeeScript, Sass and ERB 2. Rails > 4 default uses the sprockets gem(assets pipeline gem) so assets pipeline enabled by default 3. Assets pipeline uses the manifest file i.e application.js,application.css we can also create our own manifest file Generally this manifest file used to require other files. a. Require Javascript file: application.js //= require common //= require base This will require the common.js and base.js in the application.js files b. Require Css files application.css *= require home *= require layout This will require the home.css and layout.css in the application.css files 4. We can use the manifest files or other files in our layouts or templates to include the javascript or css. usually application.js file common for all the controller and it's template 5. Assets pipeline default will precompile the manifest file i.e application.js or application.css if we need to precompile other files then we need to specify it in assets.rb file Rails.application.config.assets.precompile += %w( prototype.js) 6. Assets Pipeline precompile the javascript,css,images and places in public directory inside the assets folder RAILS_ENV=production rake assets:precompile 7. Clean the Precompiled Assets using RAILS_ENV=production rake assets:clean (or) we can remove the folder assets from public directory 8. At the time of precompile Rails inserts an MD5 fingerprint into each filename so that the file is cached by the web browser. 9. Pipeline assets can be placed inside an application in one of three locations: app/assets - assets that are owned by the application, such as custom images, JavaScript files or stylesheets. lib/assets - your own libraries' code that doesn't really fit into the scope of the application or those libraries which are shared across applications. vendor/assets - assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks. 10. If the images are in the assets directory in view file we should use image_tag and css we should use image-url(sass tag) instead of url to display the image View - image_tag('logo.png') sass file - image-url('logo.png') 11. Production.rb Assets pipeline setup and compression setup #serve the static assets from public folder config.serve_static_assets = true #if assets not precompile for the first request it will automatically precompile the assets config.assets.compile = true #javascript compressor config.assets.js_compressor = :uglifier ==== Coding guidelines ===== Please note that if you are trying to reference any image or static asset in the code, the code should be written in a way that it works with and without static asset compilation. Neither URL should be hard coded in the haml code or in the inline CSS if that goes to public/assets directory. For example, if the images are in the assets directory - In view file we should use image_tag and css we should use image-url(sass tag) instead of url to display the image Rails Views - image_tag('logo.png') Sass File - image-url('logo.png') ===== Deployment guidelines ==== 1. in .rb - #serve the static assets from public folder config.serve_static_assets = true #if assets not precompile for the first request it will automatically precompile the assets config.assets.compile = true #javascript compressor config.assets.js_compressor = :uglifier 2. add a new capistrano task in a rake file, for example - static_assets.rake and this needs to be called in deploy.rb at - "after:updated" namespace :static_assets do desc 'Create asset packages for production' task :packager do on roles(:all) do |host| execute <<-EOF cd #{release_path} && bundle exec rake assets:clean rake assets:precompile EOF end end end