CODEWITHSUNDEEP
javascriptcssgrailsasset-pipeline
smeeb
smeeb

Reputation: 29567

How to add custom CSS/JS to Grails 2.4.x layouts/templates?

Grails 2.4.5 here, where I believe (correct me if I'm wrong) the asset-pipeline plugin is the default/desired method for managing CSS/JS resources.

I have some custom CSS/JS files that I would like to be included on a large subset of my GSP pages, and was wondering how to add them:

  1. Using the asset-pipeline plugin; but...
  2. In such a way that I can (somehow) reference them from grails-app/views/layouts/special.gsp, and then reference that special.gsp layout inside each desired GSP page.

So again, the desired functionality is:

grails-app/views/layouts/special.gsp:
-------------------------------------
<!DOCTYPE html>
<html>
    <head>
        <title><g:layoutTitle default="My app!"/></title>
        <asset:stylesheet src="my-custom.css"/>
        <g:layoutHead/>
    </head>
    <body>
        <g:layoutBody/>
        <asset:javascript src="my-custom.js"/>
    </body>
</html>

And then, in any GSP page that I want to use this layout, I just add a <meta name="layout" content="special"> in the <header> tag like normal.

How can I use asset-pipeline and layouts in concert with each other? Where do I place my-custom.css and my-custom.js? Any special instructions here?

Upvotes: 2

Views: 1359

Answers (1)

tylerwal
tylerwal

Reputation: 1880

If you were to leave your special.gsp AS-IS:

  • You would place the my-custom.css within the grails-app\assets\stylesheets folder
  • You would place the my-custom.js within the grails-app\assets\javascripts folder

Depending on your IDE, the assets folder may be at the top-level and the fact that it is located within grails-app may be abstracted. For instance, using the 'Project Explorer' view within GGTS, there is an assets folder directly under my project.

With the asset-pipeline, you could also include these files within a 'parent' file with this syntax:

//= my-custom.js

or

/*
*= require my-custom.css
*/

This 'parent' file though would need to be included within the layout just like you have done.

Additional info:
I mentioned require_self and require_tree in a comment below, I'll go into further detail about their use.

require_self

myLayout.gsp

<asset:javascript src="myParent.js"/>

myParent.js

//= myCustom.js
//= require_self
console.log("This code runs because of the require_self and after myCustom.js");

myCustom.js

console.log("My require_self is optional because I'm not using the asset-pipeline.");

The require_self is used to include js/css that exists within the particular file; it is required for files that are using the asset-pipeline to import other js/css files. It is optional when the file is strictly js/css that has already been imported. This is the reason that you can use the asset-pipeline to import files that you haven't modified (jquery.js for example), otherwise you would need to place require_self within all files.

require_tree

Directory Structure

grails-app/assets/
   |
   +--javascripts/
   |   |
   |   +--js-parent.js
   |   |
   |   +--myCustomJs
   |      |
   |      +--script1.js
   |      |
   |      +--script1.js
   |
   +--stylesheets/
       |
       +--css-parent.css
       |
       +--myCustomCss
          |
          +--sheet1.css
          |
          +--sheet2.css
          |
          +--sheet3.css

myLayout.gsp

<asset:javascript src="js-parent.js"/>
<asset:stylesheet src="css-parent.css"/>

js-parent.js

//= require_tree myCustomJs

csss-parent.css

/*
*= require_tree myCustomCss
*/

There you go, now you have all 3 css files and 2 js files pulled in just using their parents and the require_tree syntax.

Upvotes: 1

Related Questions