Valerio Pierbattista
Front end web developer

Grunt Boilerplate For Front End Developers And Webdesigners

September 06, 2014

grunt-logo This is a grunt boilerplate I developed and assembled for my needs. I’ve been looking around for something like this but couldn’t find it, that’s why I decided to share my achievement on my blog. If it’s your first read about grunt, please read this first instead: - this is a quite comprehensive guide on how to get started, what to install before using grunt on your machine, and it’s useful for the overall understanding of the basic concepts. I strongly recommend to start with that article before further reading. Once you’ve read and understood the basics, I’m supposing you have a general idea of what grunt does and how you feel like that article doesn’t cover everything you need. you clearly want more. Here’s my two cents:

My boilerplate

My Grunt Boilerplate does the following things:

1) watches and live reloads html, javascript, css and syncs your project across multiple browsers and devices (live)
2) concatenates javascript files into a single minified production file
3) process .scss  with compass support and autoprefixer
4) minifies images from a source folder to a compressed folder keeping them in sync
This boilerplate works with the following dependencies and modules (saved locally on the project folder):

"grunt": "~0.4.1",
"grunt-autoprefixer": "~1.0.0",
"grunt-browser-sync": "^1.3.6",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-imagemin": "^0.8.1",
"grunt-contrib-sass": "~0.7.4",
"grunt-contrib-uglify": "~0.5.1",
"grunt-contrib-watch": "~0.6.1",
"grunt-delete-sync": "0.0.2",
"grunt-newer": "^0.7.0"

What this boilerplate does

It watches and live reloads html, javascript, css and syncs your project across multiple browsers and devices

This is done with the BrowserSync plugin, which is a really great grunt feature. Aside from live reloading your assets, you will be able to access your project using an IP address on your mobile devices, making your workflow faster by synchronising URLs, interactions (scroll and text inputs for example) and code changes across multiple devices. This is crazy useful when working on responsive websites.

It concatenates javascript files into a single minified production file

I have structured my JS folder like this:

|-- libs
   + plugin.js
|-- custom
   + main.js
|-- build
   + production.js
   + production.min.js
  • the “libs” folder contains the  js  files for plugins or libraries or whatever
  • the “custom” folder contains one or more  js  file with my custom scripts
  • the “production” folder contains both the  production.js  (the file where grunt injects all the javascripts) and the  production.min.js  (same file but minified that we will load up for use in our index.html file). Grunt will watch both “libs” and “custom”, concatenate the content into production.js and then minify it creating or updating production.min.js .

Sass processing with compass and autoprefixer

If you never heard of Sass it’s time to catch up! You can read about it in my other blog post. This grunt boilerplate processes  sass  into  main.css  located in the “css” folder and then applies autoprefixer to the result. Compass is supported. If you want to edit the output format or add sass plugins in the mix, you can do it directly  in the  gruntfile.js  :

sass : {
  dist : {
    options : {
      style : 'compressed', //no need for config.rb
      compass : 'true', //no need to @import compass
      // require : 'sassy-buttons' // plugins if needed!
  files : {
      'css/main.css' : 'sass/main.scss'
    }, //end of sass

Image compression

I’ve created two separate folders for this task: - src: contains the uncompressed images you save from photoshop - dist: contains the compressed images (the ones you will link to in your project) Every time you save an image in the src folder (or in its subfolders), it will be compressed and saved in the dist folder. This will occur only when you add a new image to the src folder and only the newer image will be compressed. What if you don’t need an image anymore? Just delete it from the src folder and the dist folder will be updated accordingly. WARNING: if you start your project with an empty src folder, imagemin may not trigger. Hit  ctrl+c  then type Y to exit grunt. Type grunt imagemin . This will trigger imagemin which will compress the first image you created. Now type  grunt again and go back to your normal workflow, imagemin should trigger as expected from now on.

You can now either build the boilerplate from scratch or you can simply clone it from github!.


Share this:


Guest Posts

Recent Posts