Grails has enormous power in making bigger reflections with smaller changes. For performance improvement for any web application, it is always a recommendation to bundle all the static resources into one. Grails eases this functionality with an Asset-pipeline plugin which automates the resource management and the bundling process with minifying the resources.
Overview
The asset pipeline has three goals: precompile, concatenate and minify assets into one central path. Or in other words, it takes all of your stylesheets, javascript files, images and any other files you want, joins them together when possible.
Managing and processing static assets in a Grails application is called static resource management. It is capable of being extended to compile custom static assets, such as LESS, SASS. This plugin will minify assets and compile before WAR is built in an environment.
Asset Pipeline is intended to replace the Grails equivalent (‘resources-plugin’) with a more efficient, developer friendly architecture (similar to rails asset-pipeline). The asset-pipeline leverages the latest in minification (UglifyJS) to reduce your asset sizes as much as possible. A few differences between the resources plugin and asset-pipeline include:
- On the fly processing – No more waiting for your assets to reload after making a change
- Compiled assets on war create – No more hanging up application boot times while processing files. ‘grails war’
- Reduced Dependence – The plugin has compression, minification, and cache-digests built in.
- Easy Debugging – Makes for easy debugging by keeping files seperate in development mode.
- Simpler manifests and taglibs – Read on for more information.
Usage
Foremost thing to do is to add the plugin to your BuildConfig.groovy file as below.
compile "org.grails.plugins:asset-pipeline:2.10.1"
To get the latest version of the plugin, click below
Installing this plugin will automatically create a series of folders within your grails-app directory:
grails-app/assets/javascript , grails-app/assets/images, grails-app/assets/stylesheets
Now comes your role of placing the respective files in the above folders and include them in the manifest as below,
The keystone of the asset pipeline is the manifest file. By default, plugin creates one for stylesheets (app/assets/stylesheets/application.css) and JavaScript files (app/assets/javascripts/application.js). This file uses directives to declare dependencies in asset source files.
Commonly used directives are:
- require [path] inserts the contents of the asset source file specified by path. If the file is required multiple times, it will appear in the bundle only once.
- include [path] works like require, but inserts the contents of the specified source file even if it has already been included or required. require_directory [path] requires all source files of the same format in the directory specified by path. Files are required in alphabetical order.
- require_tree [path] works like require_directory, but operates recursively to require all files in all subdirectories of the directory specified by path.
- require_self tells Sprockets to insert the body of the current source file before any subsequent require or include directives.
- depend_on [path] declares a dependency on the given path without including it in the bundle. This is useful when you need to expire an asset’s cache in response to a change in another file.
Sample applicaion.js file:
//This is a javascript file with its top level require directives
//= require jquery.min.js
//= require jquery.validate.js
//= require app/models.js
//= require_tree views
//= require_self
console.log("This is my javascript manifest");
console.log(“This is my javascript manifest”);
Sample application.css file:
//This is a CSS file with its top level require directives
*= require bootstrap.min.css
*= require bootstrap-dialog.min.css
*= require font-awesome.min.css
*= require morris/morris.css
Even subfolders can be created inside the respective folders and can be mentioned as above.
Note: Add only the generic .js and .css files into the manifest, since this will be loaded whenever a page is refreshed.
Assets can be excluded from processing if included by your require tree. This will reduce the compile time of your assets drastically.
grails.assets.plugin."".excludes =["**/*.js"]
(or)
grails.assets.excludes = ["tiny_mce/src/*.js"]
Link the assets to your views
Asset pipeline provides several new tag libs for including javascript and css into your gsp files.
Example:
<head>
<asset:javascript src="application.js"/>
<asset:stylesheet href="application.css"/>
</head>
These helpers will automatically adjust to point to the cache-digested versions of the files when running in a non-development environment.
Assets bundling in DEV
This plugin automatically bundles the assets in all other environments, except the development. In development mode, every javascript and css files will be loaded separately inspite of using the asset-pipeline plugin.
Yet this bundling and minfiying can be forced in development environment by adding,
grails.assets.bundle=true
grails.assets.minifyJs = true
grails.assets.minifyCss = true
in your Config.groovy
Configuring external assets
This plugin enables to configure a custom CDN asset url for serving this assets:
grails.assets.bundle=true
grails.assets.minifyJs = true
grails.assets.minifyCss = true
Disable minification
During war build your assets are also minified using UglifierJs. To disable this feature, you can add the following option to your config file:
grails.assets.minifyJs = false
Once this is done , we can run the application which will show application.js instead of every js file .In our case the files are – jquery.min.js, bootstrap.min.js, validation-form.js
To sum it up, minifying all .js and .css files helps decreasing the request/response time and file sizes, which in turn helps in a major level in performance optimization.