Front-end Automation with Grunt – Part Two

This is the follow up post to ‘Front-end Automation with Grunt – Part One‘, where we set up Grunt and got it to handle our CSS pre-processing.  Here, we’re looking at converting SVG images to PNG and adding in live reload to our ‘watch’ task.

Converting SVG to PNG

To do this, you’ll need to install the SVG2PNG grunt plugin.  The steps are the same as for the previous plugins we’ve installed.  My configuration for SVG2PNG looks like this in my ‘Gruntfile.js‘:

1
2
3
4
5
6
7
8
9
10
svg2png: {
    all: {
        files: [
            {
            src: ['site/assets/images/svg/**/*.svg'],
            dest: 'site/assets/images/png/'
            },
        ]
    }
}

Set the paths to ones which work with your project so the src is pointing to the SVGs and the dest is where the outputted PNGs will go. Add the svg2png task to your default task and test to make sure its working.

1
2
3
// Default task(s).
grunt.registerTask('default', ['svg2png','compass']);
grunt.registerTask('dev', ['watch']);

We’ll also want to perform this task when any new svg images are added or existing ones change – so edit your watch task like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    watch: {
        styles: {
            files: ['site/assets/stylesheets/src/**/*.scss',],
            tasks: ['compass'],
            options: {
                spawn: false,
            },
        },
        svg: {
            files: ['site/assets/images/svg/**/*svg'],
            tasks: ['svg2png'],
            options: {
                spawn: false,
            },
        }
    }
});

A great plugin that goes well with this is the ‘grunt-spritesmith‘ which will take the set of PNG files you’ve just created and generate a single sprite.

Adding in Live Reload

The good thing about the watch task is that it can also add LiveReload functionality to your browser meaning it’ll automatically update the screen when either the CSS or HTML change.  First, you’ll need the live reload browser plugin for your browser – for Firefox its https://addons.mozilla.org/en-US/firefox/addon/livereload/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    watch: {
        styles: {
            files: ['site/assets/stylesheets/src/**/*.scss',],
            tasks: ['compass'],
            options: {
                spawn: false,
                livereload: true
            },
        },
        svg: {
            files: ['site/assets/images/svg/**/*svg'],
            tasks: ['svg2png'],
            options: {
                spawn: false,
            },
        },
       html: {
            files: ['site/*.html'],
            tasks:[],
            options: {
                livereload: true
            }
       }
    }
});

Here, we’ve added the livereload option to the styles group we had. We’ve also added a ‘html’ group and set that to auto reload when ever we save the HTML file.  The benefit of having multiple groups like this is flexibility.  You can do things like below to watch just the HTML files and not the Sass files e.g:

1
grunt watch:html

Combining tasks

You can combine multiple tasks into any registered tasks. The more tasks you have Grunt doing, the more useful this feature becomes.  For example:

1
2
3
4
5
6
7
8
/* Default task – do all tasks */
grunt.registerTask('default', ['svg2png', 'sprite', 'compass', 'concat', 'uglify',]);
/* Watch mode 'grunt dev' – create server and then watch files */
grunt.registerTask('dev', ['connect', 'watch']);
/* Image tasks only ‘grunt images’ */
grunt.registerTask('images', ['svg2png', 'sprite']);

Plugins you’ll want to check out

Here are some plugins you’ll want to check out for automating the usual front-end tasks.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Concatenate files */
grunt.loadNpmTasks('grunt-contrib-concat');
/* Minify files */
grunt.loadNpmTasks('grunt-contrib-uglify');
/* Watch files */
grunt.loadNpmTasks('grunt-contrib-watch');
/* Convert SVG to PNG */
grunt.loadNpmTasks('grunt-svg2png');
/* Compass */
grunt.loadNpmTasks('grunt-contrib-compass');
/* Check JS with JS hint */
grunt.loadNpmTasks('grunt-contrib-jshint');
/* Convert set of PNG to sprite */
grunt.loadNpmTasks('grunt-spritesmith');
/* Set up simple server */
grunt.loadNpmTasks('grunt-contrib-connect');