The Asset-Pipeline is a plugin used for resource management i.e., managing and processing static assets in Grails applications. Asset-Pipeline functions include processing and minification of both CSS and JavaScript files during compile time. It is also capable of being extended to compile custom static assets, such as LESS, CoffeeScript, SASS. Agenda: -> Overview -> Advantages over Standard grails asset Resource Plugin -> Usage? -> Assets Bundling -> Assets Minification -> Behaviour With and Without Asset-Pipeline -> Developing with Asset-Pipeline -> Javascript Manifest file: application.js -> Css Manifest file: application.css -> Directives -> Dynamic Directives -> Including Assets in Grails app views -> Linking to Assets in GSP views -> How to add page specific file -> Other References

1. Grails Asset Pipeline Plugin
By: Ali Tanwir

2. Content
➔ Overview
➔ Advantages over Standard grails asset Resource Plugin
➔ Usage?
➔ Assets Bundling
➔ Assets Minification
➔ Behaviour With and Without Asset-Pipeline
➔ Developing with Asset-Pipeline
◆ Javascript Manifest file: application.js
◆ Css Manifest file: application.css
◆ Directives
◆ Dynamic Directives
◆ Including Assets in Grails app views
◆ Linking to Assets in GSP views
◆ How to add page specific file
➔ Other References

3. Overview
● The Asset-Pipeline is a plugin used for resource management i.e.,
managing and processing static assets in Grails applications.
● Asset-Pipeline functions include processing and minification of both CSS
and JavaScript files during compile time.
● It is also capable of being extended to compile custom static assets, such
as LESS, CoffeeScript, SASS.

4. Advantages over Standard
grails asset Resource Plugin

5. ● Processing in development mode is faster
● Much faster startup time of application than resource plugin
● Debugging is much easier that resource plugin
● Assets in a directory or its sub-directories calls with single line of code
● Much better support for minification of assets for both JS and CSS
● Minify assets and compile before WAR is built
● Reduced hanging up application boot time during file process
● Manifest and taglibs are much simpler
● Compression, minification, and cache-digests built in process with plugin,
hence it reduced dependencies

6. Usage?
● Add plugin in BuildConfig.groovy
Note: Grails 2.4 automatically supports Asset pipeline plugin.

7. ● Asset Pipeline automatically creates folders within grails app directory:
We have to put our asset resources within these directory. We can create our
sub folders as per our requirement and include these into layouts.

8. Assets Bundling
In development mode, stylesheets and javascripts will be included as
individual script tags. This is intended to make it easier for debugging.
Bundling is enabled in all other environments and can be forced in
development mode by adding,
to Config.groovy file.
grails.assets.bundle=true

9. Assets Minification
● During war build assets are also minified using UglifierJs. To disable this
feature we can add the following option to a config:
● Closure can be enabled/disabled entirely as well as configured via various
options.
grails.assets.minifyJs = false

10. Behaviour With and
Without Asset-Pipeline

11. Without Asset-Pipeline
● Layout is littered with tags

12. ● Each tag is a request to the server

13. With Asset-Pipeline
● Assets are transpiled, concatenated, minified, gzipped into one file per
type
● One server hit per file type

14. Without Asset-Pipeline
● Browser cache isn't properly used,

15. With Asset-Pipeline
● Initial Request - Good Cache Headers,

16. ● Next Request - Cache Hit

17. Without Asset-Pipeline
● Limited to browser-supported languages
i.e. CSS and JavaScript

18. With Asset-Pipeline
● Can use anything that transpiles to browser-supported languages
ex: SASS, LESS, CoffeeScript, ClojureScript …

19. Developing with Asset-Pipeline

20. ● Asset-Pipeline is going to be installed by default in grails application
starting with a Grails version 2.4.
● Let’s start with creating a sample app,
grails create-app demo

21. ● Directory structure of Asset-Pipeline,

22. Javascript Manifest File: application.js

23. CSS Manifest File: application.css

24. Directives
● require - It includes single file into manifest
● require_tree - It includes all files recursively and their all sub-directories in
the path
● require_self - It inserts the body of current file
● require_full_tree - It includes all files from all plugins that contains a
relative path
● encoding - It sets processor encoding i.e. UTF-8, ANSI or Latin1
In JavaScript files, the directive begins with '//='. These directives tell us which
files should be injected into this JavaScript file and in what order.

25. Dynamic Directives
The asset-pipeline require directives also support the use of the Groovy
Templates via the GStringTemplateEngine.
or,
//= require ${grails.util.Environment.currentEnvironment.toString() ==
'DEVELOPMENT' ? 'ember.debug.js' : 'ember.prod.js'}
//= require ${grails.util.Environment.currentEnvironment == grails.util.
Environment.DEVELOPMENT ? 'ember.debug.js' : 'ember.prod.js'}

26. Including asset in grails app views
Asset pipeline provides several new tag libs for including javascript and css
into your gsp files. Example,
These helpers will automatically adjust to point to the cache-digested versions
of the files when running in a non-development environment.

27. Linking to Assets in GSP views
● In GSP views, we can also reference images included in the asset-pipeline
with the following tag:
● Assets can also be referenced within subdirectories if required and simply
require the use of the relative path.
<asset:image src="logo.png" width="200" height="200"/>
<asset:image src="icons/delete.png"/>

28. ● It is also possible to return an assetPath as a string for injection in your
own tags:
● It is also possible to execute a code section only if an asset exists or to
simply test for existence,
or,
<link href="${assetPath(src: 'manifest.json')}"/>
<asset:assetPathExists src="test.js">
This will only be displayed if the asset exists
</asset:assetPathExists>
asset.assetPathExists(src: 'test.js') //returns true or false

29. How to add Page Specific file
● specific.js file code
var pageSpecific = function () {
console.log("Hello from Specific page!")
};
$(document).ready(function () {
if ($(document.body).data('page') ==
('specific')) {
pageSpecific()
}
});

30. ● Add this line to the layouts/main.gsp page <body> tag:
● specific/index.gsp
<body data-page="${pageProperty(name:'body.data-page')}">
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body data-page="specific">
<p>Hello from Specific!</p>
</body>
</html>

31. Other References
● http://bertramdev.github.io/grails-asset-pipeline/guide/configuration.html
● http://matthewbusche.com/blog2/2015/01/05/using-grails-assets-when-
you-cant-use-the-asset-tag/
● http://tednaleid.github.io/asset-pipeline-presentation/?full#1

32. Thank you!