Upgrading to Grails 2.4.3 Part I – Asset Pipeline

I recently upgraded from Grails version 2.3.6 to 2.4.3. In this part I’ll describe some dealings I had with the new Asset Pipeline plugin, in the 2nd part of this post I’ll describe some Grails 2.4/application-specifics.

Basically the upgrade was a mix between:

Asset Pipeline

Moving from the old grails-app/web-app to grails-app/assets was a breeze, but adding the correct require statements, introducing an application.css and application.js as ‘manifest’ files, caused some headaches:

  • we used the Grails kickstart plugin which already included the correct Bootstrap styling, but we tossed it out the window because we couldn’t get it to work with the Asset Pipeline plugin. So we manually had to add the Bootstrap CSS framework resource files plugin.
    grails-app/conf/BuildConfig.groovy
    compile ":twitter-bootstrap:3.2.0.2"
    compile ":asset-pipeline:1.9.6"

    Then we could add the proper requires statements to include Bootstrap.

    grails-app/assets/stylesheets/application.css
    /*
    *= require bootstrap
    */

    Also we had to add JQuery explicitly as JavaScript dependency:

    grails-app/assets/javascripts/application.js
    //= require jquery
    //= require bootstrap
  • The kickstart plugin came with a Bootstrap-styled Date Picker – included from an external Github project. Manually I downloaded the .zip (1.3.0) and added the following resources to our application:
    assets/stylesheets/datepicker3.css
    assets/javascripts/bootstrap-datepicker.js
    assets/javascripts/locales/bootstrap-datepicker.ar.js
    assets/javascripts/locales/bootstrap-datepicker.az.js
    assets/javascripts/locales/bootstrap-datepicker.bg.js
    ...and 51 locales in total

    Consequently I had it to the manifest files:

    grails-app/assets/stylesheets/application.css
    /*
    *= require bootstrap
    *= require datepicker3
    */
    grails-app/assets/javascripts/application.js
    //= require jquery
    //= require bootstrap
    //= require bootstrap-datepicker
  • Somehow our date pickers (inputs with the class .datepicker) didn’t get transformed into actual datepickers anymore. So in our own application.js I had to add the following:
    grails-app/assets/javascripts/application.js
    ...
    //= require_self
    $(document).ready(function() {
      // enable datepicker components
      $(".datepicker").datepicker({
      });
    });
  • Our Bootstrap Combobox was pretty easy to add to the manifest files (smile)
  • The look-‘n-feel afterwards caused minor subtle differences, basically due to some convenience CSS classes the Kickstart plugin had, which we didn’t have anymore, such as the .footer class on <footer class="footer" /> we had in …eh, the footer-template. I manually added some styling in our application.css to have at least some padding back on top.
  • I had all kinds of JQuery errors due to all kinds of JavaScript-snippets using it. Our code was littered with <g:javascript>, <r:script> and even <script>(smile) I had to replace most of them with <asset:script type="text/javascript"> and put
    <!-- Deferred JavaScript code -->
    <asset:deferredScripts/>

    at the bottom – just before </body> – in the outer main template. If your browser console shows all kinds of JQuery errors, such as

    Uncaught ReferenceError: jQuery is not defined
    // or
    Uncaught ReferenceError: $ is not defined

    make sure JQuery is present in the following locations

    grails-app/conf/BuildConfig.groovy
    runtime ":jquery:1.11.1"
    grails-app/assets/javascripts/application.js
    //= require jquery
    //= require bootstrap

    and you’ve located and updated all aforementioned JavaScript snippets.

In a 2nd part I’ll describe some Grails 2.4/application-specifics I encountered.