State-of-the Art Web Front-End Development with jQuery, Bootstrap, Less, Bower and Gulp in Magnolia CMS

Tools like jQuery, Bootstrap, Less, Bower and Gulp for assembling and managing dependencies, compiling, concatenating or minimising code and assets help a great deal to make a front-end developer’s life (or work) easier. In this hands-on tutorial you will learn how to implement this state-of-the-art toolset in Magnolia CMS.

Let’s start right away with a simple Magnolia page. I recommend you follow the steps as outlined below as it has proven a best practice way of doing things, at least for me.

 1. Initial Set Up

Assuming that you have set up a basic Magnolia project with all the Maven and Tomcat stuff, your project’s root folder and your Magnolia author interface would look something like this (after adding some pages).

The root folder of our project is the first entry point to implement the software. Please note that Bower requires Node and npmand Git. If you haven’t installed these already, do so now by following the instructions provided by Node and npm and Git. When you are ready, use the terminal to install Bower with the following command:

By now you can install frameworks, libraries, assets, and utilities with Bower. To do so, go to the Bower website, grab your desired package and install it with $ bower install {packagename}

For jQuery and Bootstrap I suggest you use the following commands:

2. Set Up the Assets Builder

The next step is to install an assets builder like Gulp and install it globally in the project folder:

When Gulp is successfully implemented, create a file named gulpfile.js manually right in the project’s root folder. This way Gulp will know precisely which files with which filters to process. To make Gulp a serious asset builder, you will have to install some more tools. If you want to use Less for example, you will have to install it first so that Gulp will know how to process Less-files into proper CSS-files. For a fully uglified, CSS-preprocessed, concatenated JavaScript and stylesheet, the following tools have to be installed additionally by using the following commands:

3. Configure Gulp for Magnolia CMS

Single tasks and paths can now be configured in the gulpfile.js file we created earlier.

The destination folder for ready-built assets should ideally be where Magnolia will later access the files. In my case this folder is ‘module/src/main/resources/mgnl-resources/js’ which is separated from the source-js-files that are all taken by the gulp.src task ‘module/src/main/resources/mgnl-resources/src/js/**/*’.

The css-task will just use one Less file where all other Less files you create can be imported. This way you’re able to determine the order in which stylesheets are loaded, which is an advantage for overwriting- or mixin-definition issues.

I called my Less file ‘_my_bootstrap.less’ (without quotation marks) and saved it into the project sources ‘module/src/main/resources/mgnl-resources/src/less/_my_bootstrap.less’

After running the command ‘gulp’ in the terminal, all your assets are built, ready to deploy into the Magnolia structure.

When your assets are built with Gulp using your terminal, Eclipse does not usually refresh its asset folders automatically.

To avoid having to keep hitting F5 in the CSS folder after every manual Gulp build, you might configure Eclipse to detect file changes automatically in the background by ticking the options in the preferences -> general -> workspace pane:
+ Refresh using native hooks or polling
+ Refresh on access

By now your state-of-the-art web front-end in Magnolia is ready to be used with all those fancy front-end tools like jQueryBootstrapLessBower and Gulp. After adding the created styles into a Magnolia template, your bootstrapped web page looks perfectly organised.

Enjoy, and feel free to comment or ask questions. I am happy to help!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.