This is a very useful plugin which can help your website load faster and manage your static files easily.
How it works:
- To use this plugin you need to make an entry in the BuildConfig.groovy file.
- compile "org.grails.plugins:asset-pipeline:2.7.4". Use updated from here
- 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.
- This folder has 3 sub folders: images, javascripts, stylesheets ( you can also add your own custom folder here )
- Place your files in the respective folders.
- You can then use the following tags to include the respective files:
- <asset:javascript src="application.js"/> <asset:stylesheet href="application.css"/>
- By default the bundling of JS and CSS files is disabled in development mode to ease the debuggin.
- In order to enable it in development mode add this to your Config.groovy file: grails.assets.bundle=true
- Asset also adds a feature other than just minifying the JS and CSS files.
- 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.
- Same is the case for your CSS files.
- In order to budle the files, you need to create a JS file say app.js
- This file will contain the files which you want to combine in the following manner:
- //This is a javascript file with its top level require directives
//= require jquery
//= require_self
//= require bootstrap/bootstrap.min - 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 )
- In order to bundle CSS files, again create a new CSS file app.css.
- Add the following lines:
- /*
*= require_self
*= require bootstrap/bootstrap.min
*= require bootstrap/font-awesome*/ - This will then combine 3 files into one. i. e app.css, bootstrap.min.css and font-awesome.css
- 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.
- 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.
- 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:
- 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
No comments:
Post a Comment