Hosting

Saturday, April 16, 2016

Asset Pipeline Plugin for Grails

This is a very useful plugin which can help your website load faster and manage your static files easily.

How it works:


  1. To use this plugin you need to make an entry in the BuildConfig.groovy file.
  2. compile "org.grails.plugins:asset-pipeline:2.7.4". Use updated from here
  3. Once you add the above line and clean run your project, there will be a new folder created in your grails-app folder named assets.
  4. This folder has 3 sub folders: images, javascripts, stylesheets ( you can also add your own custom folder here )
  5. Place your files in the respective folders.
  6. You can then use the following tags to include the respective files:
  7. <asset:javascript src="application.js"/> <asset:stylesheet href="application.css"/>
  8. By default the bundling of JS and CSS files is disabled in development mode to ease the debuggin. 
  9. In order to enable it in development mode add this to your Config.groovy file: grails.assets.bundle=true
  10.  Asset also adds a feature other than just minifying the JS and CSS files. 
  11. It can combine multiple JS files into a single JS file. Adv: This will reduce the number of http request which are send out for each JS file. Thus reducing the page load time. This JS will then be cached.
  12. Same is the case for your CSS files.
  13. In order to budle the files, you need to create a JS file say app.js
  14. This file will contain the files which you want to combine in the following manner:
  15. //This is a javascript file with its top level require directives
    //= require  jquery
    //= require_self
    //= require bootstrap/bootstrap.min
  16. Require self will also include the JS code within app.js. Now in the above example, we will have 3 files merged into one single js file. i. e Jquery, app.js, bootstrap.min.js ( app.js and bootstrap.min.js are present in assets folder )
  17. In order to bundle CSS files, again create a new CSS file app.css.
  18. Add the following lines:
  19. /*
    *= require_self
    *= require bootstrap/bootstrap.min
    *= require bootstrap/font-awesome*/
  20. This will then combine 3 files into one. i. e app.css, bootstrap.min.css and font-awesome.css
  21.  When ever we create a war, these JS and CSS files are compiled and the minified version is created. Now asset by default appends an MD5 of the content within the file to its name.
  22. For applications which need to provide customer support and have to deliver hotfixes later have a difficulty in managing these files. As the name of file at the client will not match with one which has a hotfix.
  23. In order to overcome this issue, you can disable the digest which will disable the renaming of the files. You can add the following lines to your Config.groovy file:
  24. grails.assets.enableDigests = false // this will disable appending digest to minified static files
    grails.assets.skipNonDigests = false // this will not skip the non digest files