Speed Up Your Plone 5 Theming with Grunt

In a recent Plone 5 deployment project, I discovered that Grunt can dramatically speed up theming activities, and much more!

Automating Tasks with Grunt

Grunt is a Javascript task automation tool that helps perform repetitive tasks like minification, compilation and linting. It can be set up to go through a sequence of steps that will get applied to your files. Grunt runs on Node.js on Mac, Windows and Linux.

Once installed, a Grunt project can be created within your Plone theme product. There are many types of plugins that can be used with Grunt so it can be customized to your specific needs.

Faster and Easier Theming

As part of a Plone 5 project, I needed to use a theme purchased from a third-party that was not made for Plone. This theme came with many CSS and JS files that required a lot of XML boilerplate to set up in the Plone 5 Resource Registry. Instead of going down that path, I used Grunt to prepare the files externally and use them via Diazo. In the end, using Diazo’s manifest.cfg settings for precompiled development/production-css and js was much faster and easier.

[theme]
…
production-css = /++theme++my.theme/static/mytheme-compiled.css
production-js = /++theme++my.theme/static/mytheme-compiled.js

Then I used conditional statements in Diazo's rules.xml file to switch between different templates provided by the pre-built theme depending on things like the presence of Plone's left and right columns.

<rules css:if-content="#portal-column-two">
 <theme href="page-right-sidebar.html" />
 …
 {other rules}
 …
</rules> 

CSS Streamlining

A popular use of Grunt is for CSS minification so as to increase site performance. Multiple CSS are first combined into one file in a process called concatenation. Once they are combined, Grunt can minimize the file size by removing the extra white space to get the CSS down to its smallest possible form. Having the CSS files combined into one http request, along with the small size, helps the page load faster.

Grunt can also be set up to watch a folder — or multiple folders — and any time a CSS file is changed, it automatically processes everything into a new version of the output CSS. This drastically simplifies the management of CSS files.

Here is an example that sets up Grunt to watch all the CSS files in the diazo_resources/css directory. Any change to one of those files will trigger the concatenation task which is defined elsewhere in the same file. By chaining together the inputs and outputs of different tasks, you can build sophisticated workflows.

…
 watch: {
   scripts: {
 files: ['diazo_resources/css/*.css'],
   tasks: ['concat']
 }
 },
…

Sass versus Less

There are two popular preprocessors for CSS: Less and Sass. Less and Sass are optimized ways to write CSS that essentially save developers from repeating things in the code. Then, when processed, the special CSS is compiled into regular CSS. Plone 5 has Less support built-in to the new resource registry, but if you want to use Sass or compile your Less externally, an external tool like Grunt will come extremely handy.

JS Optimization

Another benefit of using Grunt is for Javascript linting: a process for catching errors in your scripts. Grunt makes it possible to automate linting, making it an easy addition to your workflow to increase quality. And, like CSS, your site can also benefit from JS concatenation and minification.

The Sky is the Limit

There are many more areas where you can use Grunt to automate repetitive processes that enhance your project, such as image optimization, generating cache-busting urls and more. All of them are processes you would probably avoid if you had to do them manually. When you start using a task automation tool like Grunt, I highly recommend you start small, with a few simple tasks like those mentioned above, and then add to it as you become more comfortable with the tool. Have fun with Grunt!