Importance of Grails asset pipeline plugin

Posted By : Ravi Kumar | 10-Jul-2014
html5 plugin grails

In this blog we will know about importance of Grails Asset Pipeline plugin and how it is much better than standard resource plugin. And how to use this in our Grails Application.


The Grails Asset Pipeline is a plugin used for resource management. All static assets managed easily and enhance the process in grails application. Assets functions include assets processing and minification on compile for both CSS and JS files. Other libraries like coffeeScript.js, Ember.js, Express.js and Node.js can easily being compile their custom static assets.


Grails 2.4 automatically supports Asset pipeline plugin.


Advantages :

It is a replacement for standard grails assets resource plugin. Here are some very useful advantages

  • 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

How to use :

Add plugin in BuildConfig.groovy

plugins {
	// plugins for the build system only
	.
	.
	compile ":asset-pipeline:1.9.0"
	.
	.
}

Asset Pipeline automatically creates folders within grails app directory:

grails-app/assets/javascript,
grails-app/assets/images,
grails-app/assets/stylesheets

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.


Include Assets in Grais app views:

Main layout should only used single css and js files 

	<head>
		<asset:stylesheet href="application.css"/>
		<asset:javascript src="application.js"/>
	</head>

Development mode all CSS and JS will be include as individual tags. For other environment, bundling is enabled and can be forced also in development mode by using

grails.assets.bundle=true //enable bundling on development mode

During WAR build assets minified.By default this feature is enabled and to disable this feature, use

grails.assets.minifyJs = false //disable minification during WAR build

Debugging, reviewing and processing is much simpler and easier. During Grails application execution on localhost (development server) and production server application resources behaves in different way. On localhost all resources present as we calls and separate path generates. While after deployment of application, all CSS and JS file present in compiled and auto generated paths like application.css and application.js


For example : On localhost


On production server



Manifest Settings :

Application.css

/*
 * This is a manifest file that will be compile into admin application.css,
 * which will include all the files from admin-css and its sub-directories.
 * 
 * Any CSS file within this directory can be referenced here using a relative path.
 * 
 * We're free to add CSS to this file and they'll appear at the top
 * of the compile file, but it's generally better to create a new file per CSS scope.
 * 
 * */
 
 /*
 *=require admin/bootstrap
 *=require admin/bootstrap.min
 *=require admin/bootstrap-responsive
 *=require admin/bootstrap-responsive.min
 *=require admin/plugins/jquery-ui/smoothness/jquery-ui
 *=require admin/plugins/jquery-ui/smoothness/jquery.ui.theme
 *=require admin/style
 *
 *=require admin/custom-style
 *
 *=require_self
 */

Application.js

/*
 * This is a manifest file that will be compile into application.js,
 * which will include all the files from mockup and its sub-directories related to 
 * all front-end.
 * 
 * Any js file within this directory can be referenced here using a relative path.
 * 
 * We're free to add js to this file and they'll appear at the top
 * of the compile file, but it's generally better to create a new file per js scope.
 * 
 * */

//=require less-1.7.3.min
//=require spin.min
//=require config
//=require custom
//=require common
//=require_self

Directives

//= require
//= require_self
//= require_tree
//= require_full_tree
//= encoding UTF-8
  • require : It includes single file into manifest
  • require_self : It inserts the body of current file
  • require_tree : It includes all files recursively and their all sub-directories in the path
  • require_full_tree : It include all files from all plugins that contain relative path
  • encoding : It sets preprocessor encoding

Page Specific Assets


Some pages will require more that what is required in the application.* asset files.


We could create page specific asset includes for these extra dependencies, but to simplify maintenance we will store all non homepage dependencies in a single set of additional files.


The following set of files should include all assets that are not needed for the homepage, but are needed for some non homepages.

  • application2.css
  • application2.js
  • application2.head.js

We can conditionally include these in the main layout if we are not rendering a "landing page".


The layout is enhanced below to conditionally include the application2.* assets if the page does not have a meta tag with "isLanding" true.


layout.gsp

<!DOCTYPE html>
<html>
   <g:set var="isLandingPage" value="${pageProperty(name:'meta.isLanding').toBoolean()}" />
   <head>
      <title><g:layoutTitle/></title>
      <g:layoutHead/>
 
      <%-- header assets --%>
      <asset:stylesheet src="application.css"/>
      <asset:javascript src="application.header.js"/>
      <g:if test=${!isLandingPage}>
          <asset:stylesheetsrc="application2.css"/>
          <asset:javascript src="application2.header.js"/> 
      </g:if>
 
   </head>
   <body>
      <div class="bodyContent">
         <g:layoutBody/>
      </div>
 
      <%-- footer assets --%>
      <asset:javascript src="application.js"/>
      <g:if test=${!isLandingPage}>
          <asset:stylesheetsrc="application2.js"/>
      </g:if>
   </body>
</html>

Body Content Pages


None of the view content gsp pages will include any css or js since that will be the responsibility of the Layout.


The Home Page must add the landing page meta tag to prevent including the application2.* assets.


home.gsp 

<html>
   <head>
      <title>home</title>
      <!-- include this tag on the Home page, or any other page considered to be a landing page. -->
      <meta name="isLanding" content="true" />
   </head>
   <body>
      ...
	  ...
	  ...
   </body>
</html>

In our GSP views reference images:

<asset:image src="mockup/catalog/65x98/04.jpg" />

Please share your views and comments if find here some useful things. To know more about this please contact our team [email protected]


Ravi Kumar

Related Tags
PWA
cloud computing
saas
Web Apps
Java
Angular
nodejs
javascript
php
vue.js
Spring boot
mysql
ReactJS
Django
plugin
angularjs
bootstrap
html
Laravel
Angular2
jquery
grails
LMS
Java Virtual Machine
Mean stack
oops
Moodle
Shopify
reverseajax
Knockoutjs
ngrok
Meteor

About Author

Author Image
Ravi Kumar

Ravi is a creative UI designer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Ravi likes Tech Quizes and playing Football.

Request for Proposal

Name is required

Comment is required

Sending message..