Run Grunt & Bower tasks during Maven build

Tue, 17 Feb 2015 21:50:23 +0100

Recently I have joined a new company as Java developer. One of my first tasks was to rewrite UI for one of the web applications.

Technology stack

Project was built with AngularJS, jQuery, Bootstrap, with manual dependency management and no resource optimizations. In other words, there were a lot of work to do.

In this article, I will show how to setup Maven project for frontend development. So let’s get started.

Installation

To start with, we need to install Node.js, Bower, and Grunt. We’ll use frontend maven plugin created by Eirik Sletteberg.

A Maven plugin that downloads/installs Node and NPM locally, runs NPM install, Grunt, Gulp and/or Karma. It’s supposed to work on Windows, OS X, and Linux.

Include the Maven plugin to your project dependencies:

pom.xml

<plugins>
    <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>0.0.21</version>
        ...
    </plugin>
</plugins>

Inside <executions>...</executions> tag we define goals to install Node.js, npm with dependencies, Bower packages and run Grunt. Resulting pom.xml:

pom.xml

<plugins>
    <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>0.0.21</version>
 
        <executions>
 
            <execution>
                <id>install node and npm</id>
                <goals>
                    <goal>install-node-and-npm</goal>
                </goals>
                <configuration>
                    <nodeVersion>v0.10.36</nodeVersion>
                    <npmVersion>2.4.1</npmVersion>
                </configuration>
            </execution>
 
            <execution>
                <id>npm install</id>
                <goals>
                    <goal>npm</goal>
                </goals>
                <configuration>
                    <arguments>install</arguments>
                </configuration>
            </execution>
 
            <execution>
                <id>bower install</id>
                <goals>
                    <goal>bower</goal>
                </goals>
                <configuration>
                    <arguments>install</arguments>
                </configuration>
            </execution>
 
            <execution>
                <id>grunt build</id>
                <goals>
                    <goal>grunt</goal>
                </goals>
                <configuration>
                    <arguments>build</arguments>
                </configuration>
            </execution>
 
        </executions>
    </plugin>
</plugins>

Don’t forget to update .gitignore, unless you actually want to commit node and dependencies, e.g.:

.gitignore

target
node
node_modules
bower_components

Next we’ll set up project regeneration on file changes. One way to achieve this is to use grunt-contrib-watch, but if you’re using Eclipse, it’s not going to work out of the box. We’ll also need to setup M2E life-cycle mappings to support Eclipse incremental builds.

For this purpose, there are configuration options:

srcdir (optional, for M2Eclipse integration) - a directory to check for changed files before executing in an incremental build
triggerfiles (optional, for M2Eclipse integration) - a list of files to check for changes before executing in an incremental build
outputdir (optional, for M2Eclipse integration) - a directory to refresh when the build completes, so Eclipse sees changed files

Example:

pom.xml

<configuration>
    <srcdir>${basedir}/src/main/sourceapp</srcdir>
    <outputdir>${basedir}/src/main/webapp</outputdir>
    <triggerfiles>
        <triggerfile>Gruntfile.js</triggerfile>
        <triggerfile>package.json</triggerfile>
    </triggerfiles>
    <arguments>${target.environment}</arguments>
</configuration>

${target.environment} variable depends on your Maven profile. For instance, we are using <target.environment>serve</target.environment> for development and <target.environment>build</target.environment> for production.

Grunt and Bower configuration

We have the next project structure:

|   pom.xml
|   package.json
|   bower.json
|   Gruntfile.js
|
+---src
|   \---main
|       +---sourceapp
|       |   +---js
|       |   |   |   controllers.js
|       |   |   |   app.js
|       |   |
|       |   \---scss
|       |       |   _base.scss
|       |       |   main.scss
|       |       |
|       |       +---modules
|       |       |       _utility.scss
|       |       |
|       |       +---partials
|       |       |       _helper.scss
|       |       |       _global.scss
|       |       |
|       |       \---vendor
|       |               _bootstrap-custom.scss
|       |
|       \---webapp
|           |   index.html
|           |
|           +---WEB-INF
|           |
|           +---html
|           |
|           +---fonts
|           |
|           +---img
|
+---bower_components
+---node_modules
\---node

With Bower, there is no need to update frontend libraries manually. All this boring work Bower is doing for you. Here is sample Bower configuration file:

bower.json

{
    "name": "frontend-project",
    "version": "0.0.1",
    "appPath": "src/main/webapp",
    "dependencies": {
        "modernizr": "2.7.1",
        "jquery": "2.1.1",
        "angular": "1.3.10",
        "angular-resource": "1.3.10",
        "angular-route": "1.3.10",
        "angular-material": "0.7.0",
        "angular-translate": "2.5.2"
    },
    "resolutions": {
        "angular": "1.3.10"
    }
}

To perform all tasks define npm dependencies in package.json:

package.json

{
    "name": "frontend-project",
    "version": "0.0.1",
    "description": "Description for frontend-project",
    "dependencies": {
        "bower": "~1.3.12",
        "grunt": "~0.4.5",
        "grunt-autoprefixer": "~2.2.0",
        "grunt-cli": "~0.1.13",
        "grunt-contrib-copy": "~0.7.0",
        "grunt-contrib-clean": "~0.6.0",
        "grunt-contrib-uglify": "~0.7.0",
        "grunt-sass": "~0.17.0",
        "jit-grunt": "~0.9.0",
        "time-grunt": "~1.0.0"
    },
    "engines": {
        "node": ">=0.10.0"
    }
}

Declare Grunt tasks in Gruntfile.js. For instance:

Gruntfile.js

'use strict';
 
module.exports = function(grunt) {
    require('time-grunt')(grunt);
    require('jit-grunt')(grunt);
    grunt
        .initConfig({
            app: {
                source: 'src/main/sourceapp',
                dist: 'src/main/webapp'
            },
            clean: {
                dist: ['.tmp', '<%= app.dist %>/css', '<%= app.dist %>/js']
            },
            copy: {
                css: {
                    files: [{
                        expand: true,
                        cwd: 'bower_components/angular-material/',
                        src: 'angular-material.css',
                        dest: '.tmp/scss/',
                        rename: function(dest, src) {
                            return dest + "_" + src.substring(0, src.indexOf('.')) + '.scss';
                        }
                    }]
                }
            },
            sass: {
                options: {
                    includePaths: [
                        'bower_components/bootstrap-sass/assets/stylesheets',
                        '.tmp/scss'
                    ]
                },
                server: {
                    options: {
                        sourceMap: true
                    },
                    files: [{
                        expand: true,
                        cwd: '<%= app.source %>/scss',
                        src: '**/*.{scss,sass}',
                        dest: '.tmp/css',
                        ext: '.css'
                    }]
                },
                dist: {
                    options: {
                        outputStyle: 'compressed'
                    },
                    files: [{
                        expand: true,
                        cwd: '<%= app.source %>/scss',
                        src: '**/*.{scss,sass}',
                        dest: '.tmp/css',
                        ext: '.css'
                    }]
                }
            },
            autoprefixer: {
                options: {
                    browsers: ['last 3 versions']
                },
                dist: {
                    files: [{
                        expand: true,
                        cwd: '.tmp/css',
                        src: '**/*.css',
                        dest: '<%= app.dist %>/css'
                    }]
                }
            },
            uglify: {
                server: {
                    options: {
                        mangle: false,
                        beautify: true
                    },
                    files: {
                        '<%= app.dist %>/js/scripts.js': [
                            'bower_components/jquery/dist/jquery.js',
                            'bower_components/angular/angular.js',
                            'bower_components/angular-resource/angular-resource.js',
                            'bower_components/angular-route/angular-route.js',
                            'bower_components/angular-animate/angular-animate.js',
                            'bower_components/angular-material/angular-material.js',
                            'bower_components/angular-translate/angular-translate.js'
                        ],
 
                        '<%= app.dist %>/js/app.js': [
                            '<%= app.source %>/js/app.js',
                            '<%= app.source %>/js/controllers.js'
                        ]
                    }
                },
                dist: {
                    options: {
                        compress: true,
                        preserveComments: false,
                        report: 'min'
                    },
                    files: {
                        '<%= app.dist %>/js/scripts.js': [
                            'bower_components/jquery/dist/jquery.js',
                            'bower_components/angular/angular.js',
                            'bower_components/angular-resource/angular-resource.js',
                            'bower_components/angular-route/angular-route.js',
                            'bower_components/angular-animate/angular-animate.js',
                            'bower_components/angular-material/angular-material.js',
                            'bower_components/angular-translate/angular-translate.js'
                        ],
 
                        '<%= app.dist %>/js/app.js': [
                            '<%= app.source %>/js/app.js',
                            '<%= app.source %>/js/controllers.js'
                        ]
                    }
                }
            }
        });
 
    grunt.registerTask('serve', ['clean', 'copy:css', 'sass:server',
        'autoprefixer', 'uglify:server'
    ]);
    grunt.registerTask('build', ['clean', 'copy:css', 'sass:dist',
        'autoprefixer', 'uglify:dist'
    ]);
 
    grunt.registerTask('default', ['build']);
};

With this hack, you can include a regular .css file in your .scss.

copy: {
    css: {
        files: [{
            expand: true,
            cwd: 'bower_components/angular-material/',
            src: 'angular-material.css',
            dest: '.tmp/scss/',
            rename: function(dest, src) {
                return dest + "_" + src.substring(0, src.indexOf('.')) + '.scss';
            }
        }]
    }
}

Hooray! We are ready to start developing UI without headache. Maybe, it is not the best example, but it shows you how to use frontend maven plugin, install dependencies and define tasks for frontend development.

Feel free to comment this article and express your opinion about this.

Optimized Jekyll site with Grunt

Sat, 31 Jan 2015 15:12:17 +0100

I have started developing static sites with Jekyll in May. For those who don’t know what it is:

Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and Liquid renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server.

I like the idea of modular website project that eventually will be generated into a static website. Furthermore GitHub Pages can generate and host it for you, so you get free, reliable hosting with push to deploy feature.

That’s why it was the perfect choice for Project Zeppelin - free conference site template (mostly for GDG DevFest, but for sure you can use it as you want). Unfortunately, GitHub Pages has limited number of available plug-ins, for instance, there are no plugins to compile Compass files, minify css, js and html files or highlight your code.

Fortunately, Grunt helps us with it and gives even more. So let’s get started.

Installation

First of all you need to install Bundler for easy gem dependency management.

gem install bundler

Requirements: Install Ruby & RubyGems

Add these gems to your Gemfile:

Gemfile

source "http://rubygems.org"
 
gem 'jekyll'

Run this command to install them:

bundle install

And don’t forget to install Grunt:

npm install -g grunt-cli

Requirements: Install Node.js

We are almost ready to use Grunt, but before that you need to create package.json, which is used by npm and contains project dependencies.

package.json

{
	"name": "your-next-website",
	"version": "0.0.1",
	"description": "Dependencies of your next website",
	"author": "Name Surname",
	"devDependencies": {
        "grunt": "~0.4.5",
        "grunt-autoprefixer": "~2.2.0",
        "grunt-build-control": "~0.3.0",
        "grunt-contrib-clean": "~0.6.0",
        "grunt-contrib-connect": "~0.9.0",
        "grunt-contrib-copy": "~0.7.0",
        "grunt-contrib-cssmin": "~0.11.0",
        "grunt-contrib-htmlmin": "~0.3.0",
        "grunt-contrib-imagemin": "~0.9.2",
        "grunt-contrib-uglify": "~0.7.0",
        "grunt-contrib-watch": "~0.6.1",
        "grunt-critical": "~0.1.1",
        "grunt-jekyll": "~0.4.2",
        "grunt-sass": "~0.17.0",
        "grunt-svgmin": "~2.0.0",
        "grunt-uncss": "~0.4.0",
    	"jit-grunt": "~0.9.0",
        "time-grunt": "~1.0.0"
    },
    "engines": {
        "node": ">=0.10.0"
    }
}

You can update dependencies with amazing tool. Simply install npm install -g npm-check-updates and run it with npm-check-updates -u. This command will update all dependencies to the latest versions.

To install them just run:

npm install

Grunt task configuration

Grunt allows us to define a couple of tasks and run them from the shell. They are defined in a Gruntfile.js. I’ve generated initial Gruntfile with Yeoman Generator and edited it to get better results. Here is what I’ve got.

Gruntfile.js

'use strict';
 
module.exports = function(grunt) {
    // Show elapsed time after tasks run
    require('time-grunt')(grunt);
    // Load all Grunt tasks
    require('jit-grunt')(grunt);
 
    grunt.initConfig({
        app: {
            app: 'app',
            dist: 'dist',
            baseurl: ''
        },
        watch: {
            sass: {
                files: ['<%= app.app %>/_assets/scss/**/*.{scss,sass}'],
                tasks: ['sass:server', 'autoprefixer']
            },
            scripts: {
                files: ['<%= app.app %>/_assets/js/**/*.{js}'],
                tasks: ['uglify']
            },
            jekyll: {
                files: [
                    '<%= app.app %>/**/*.{html,yml,md,mkd,markdown}'
                ],
                tasks: ['jekyll:server']
            },
            livereload: {
                options: {
                    livereload: '<%= connect.options.livereload %>'
                },
                files: [
                    '.jekyll/**/*.{html,yml,md,mkd,markdown}',
                    '.tmp/<%= app.baseurl %>/css/*.css',
                    '.tmp/<%= app.baseurl %>/js/*.js',
                    '<%= app.app %>/img/**/*.{gif,jpg,jpeg,png,svg,webp}'
                ]
            }
        },
        connect: {
            options: {
                port: 9000,
                livereload: 35729,
                // change this to '0.0.0.0' to access the server from outside
                hostname: 'localhost'
            },
            livereload: {
                options: {
                    open: {
                        target: 'http://localhost:9000/<%= app.baseurl %>'
                    },
                    base: [
                        '.jekyll',
                        '.tmp',
                        '<%= app.app %>'
                    ]
                }
            },
            dist: {
                options: {
                    open: {
                        target: 'http://localhost:9000/<%= app.baseurl %>'
                    },
                    base: [
                        '<%= app.dist %>',
                        '.tmp'
                    ]
                }
            }
        },
        clean: {
            server: [
                '.jekyll',
                '.tmp'
            ],
            dist: {
                files: [{
                    dot: true,
                    src: [
                        '.tmp',
                        '<%= app.dist %>/*',
                        '!<%= app.dist %>/.git*'
                    ]
                }]
            }
        },
        jekyll: {
            options: {
                config: '_config.yml,_config.build.yml',
                src: '<%= app.app %>'
            },
            dist: {
                options: {
                    dest: '<%= app.dist %>/<%= app.baseurl %>',
                }
            },
            server: {
                options: {
                    config: '_config.yml',
                    dest: '.jekyll/<%= app.baseurl %>'
                }
            }
        },
        htmlmin: {
            dist: {
                options: {
                    removeComments: true,
                    collapseWhitespace: true,
                    collapseBooleanAttributes: true,
                    removeAttributeQuotes: true,
                    removeRedundantAttributes: true,
                    removeEmptyAttributes: true,
                    minifyJS: true,
                    minifyCSS: true
                },
                files: [{
                    expand: true,
                    cwd: '<%= app.dist %>/<%= app.baseurl %>',
                    src: '**/*.html',
                    dest: '<%= app.dist %>/<%= app.baseurl %>'
                }]
            }
        },
        uglify: {
            options: {
                preserveComments: false
            },
            dist: {
                files: {
                    '.tmp/<%= app.baseurl %>/js/scripts.js': ['<%= app.app %>/_assets/js/**/*.js']
                }
            }
        },
        sass: {
            server: {
                options: {
                    sourceMap: true
                },
                files: [{
                    expand: true,
                    cwd: '<%= app.app %>/_assets/scss',
                    src: '**/*.{scss,sass}',
                    dest: '.tmp/<%= app.baseurl %>/css',
                    ext: '.css'
                }]
            },
            dist: {
                options: {
                    outputStyle: 'compressed'
                },
                files: [{
                    expand: true,
                    cwd: '<%= app.app %>/_assets/scss',
                    src: '**/*.{scss,sass}',
                    dest: '<%= app.dist %>/<%= app.baseurl %>/css',
                    ext: '.css'
                }]
            }
        },
        uncss: {
            options: {
                htmlroot: '<%= app.dist %>/<%= app.baseurl %>',
                report: 'gzip'
            },
            dist: {
                src: '<%= app.dist %>/<%= app.baseurl %>/**/*.html',
                dest: '.tmp/<%= app.baseurl %>/css/blog.css'
            }
        },
        autoprefixer: {
            options: {
                browsers: ['last 3 versions']
            },
            dist: {
                files: [{
                    expand: true,
                    cwd: '.tmp/<%= app.baseurl %>/css',
                    src: '**/*.css',
                    dest: '.tmp/<%= app.baseurl %>/css'
                }]
            }
        },
        critical: {
            dist: {
                options: {
                    base: './',
                    css: [
                        '.tmp/<%= app.baseurl %>/css/blog.css'
                    ],
                    minify: true,
                    width: 320,
                    height: 480
                },
                files: [{
                    expand: true,
                    cwd: '<%= app.dist %>/<%= app.baseurl %>',
                    src: ['**/*.html'],
                    dest: '<%= app.dist %>/<%= app.baseurl %>'
                }]
            }
        },
        cssmin: {
            dist: {
                options: {
                    keepSpecialComments: 0,
                    check: 'gzip'
                },
                files: [{
                    expand: true,
                    cwd: '.tmp/<%= app.baseurl %>/css',
                    src: ['*.css'],
                    dest: '.tmp/<%= app.baseurl %>/css'
                }]
            }
        },
        imagemin: {
            options: {
                progressive: true
            },
            dist: {
                files: [{
                    expand: true,
                    cwd: '<%= app.dist %>/<%= app.baseurl %>/img',
                    src: '**/*.{jpg,jpeg,png,gif}',
                    dest: '<%= app.dist %>/<%= app.baseurl %>/img'
                }]
            }
        },
        svgmin: {
            dist: {
                files: [{
                    expand: true,
                    cwd: '<%= app.dist %>/<%= app.baseurl %>/img',
                    src: '**/*.svg',
                    dest: '<%= app.dist %>/<%= app.baseurl %>/img'
                }]
            }
        },
        copy: {
            dist: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: '.tmp/<%= app.baseurl %>',
                    src: [
                        'css/**/*',
                        'js/**/*'
                    ],
                    dest: '<%= app.dist %>/<%= app.baseurl %>'
                }]
            }
        },
        buildcontrol: {
            dist: {
                options: {
                    dir: '<%= app.dist %>/<%= app.baseurl %>',
                    remote: 'git@github.com:user/repo.git',
                    branch: 'gh-pages',
                    commit: true,
                    push: true,
                    connectCommits: false
                }
            }
        }
    });
 
    // Define Tasks
    grunt.registerTask('serve', function(target) {
        if (target === 'dist') {
            return grunt.task.run(['build', 'connect:dist:keepalive']);
        }
 
        grunt.task.run([
            'clean:server',
            'jekyll:server',
            'sass:server',
            'autoprefixer',
            'uglify',
            'connect:livereload',
            'watch'
        ]);
    });
 
    grunt.registerTask('server', function() {
        grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
        grunt.task.run(['serve']);
    });
 
    grunt.registerTask('build', [
        'clean:dist',
        'jekyll:dist',
        'imagemin',
        'svgmin',
        'sass:dist',
        'uncss',
        'autoprefixer',
        'cssmin',
        'uglify',
        'critical',
        'htmlmin'
    ]);
 
    grunt.registerTask('deploy', [
        'build',
        'copy',
        'buildcontrol'
    ]);
 
    grunt.registerTask('default', [
        'serve'
    ]);
};

I have used require(‘jit-grunt’)(grunt); to run tasks instead of require(‘load-grunt-tasks’)(grunt); because it much faster (6 ms compared to 4,7 s).

In the project, I compile .scss files with grunt-sass, which uses libsass which is a Sass compiler written in C++, in purpose of performance. But there are missing features. So if you need more stable compiler or Compass support use grunt-contrib-sass.

Running grunt serve (you can run it as default task grunt) on the command line will perform the following tasks:

make Jekyll magic and compile your site to .jekyll folder;
compile .scss files and autoprefix them;
compile .js files;
start a web server for you;
watch your files and run Grunt tasks when they are needed.

When you are ready to deploy it on a server (in my case GitHub) run grunt deploy, which will do the following tasks:

make Jekyll magic and compile your site to .jekyll folder;
compress all images in img folder;
compile .sass files, delete unnecessary css styles, autoprefix and compress them;
compile and compress .js files;
generate and insert critical css into pages;
compress .html pages;
push changes into gh-pages branch of git@github.com:user/repo.git remote.

Final project structure looks like:

│   Gruntfile.js
│   package.json
│   _config.build.yml
│   _config.yml
│
└───app
	│   404.html
	│   CNAME
	│   feed.xml
	│   index.html
	│
	├───img
	│
	├───_assets
	│   ├───js
	│   └───scss
	│
	├───_data
	│
	├───_includes
	│
	├───_layouts
	│
	└───_posts

Feel free to use my template to start developing much faster.

That’s all. Now you can easily develop your site/blog with Jekyll and get highly optimized production version of it. If you have any questions or suggestions feel free to comment here or send me a message directly.