Practical Gruntfile to automate project related tasks

Productivity! Oh, yes! The ever-elusive goal of a software developer. No matter how much one tries, trivial tasks will aGrunt is a popular tool that assists developers to automate code management actions, but practical applications of this tool are still elusive.

In this article, we share our take on using Grunt to process CSS and JS files automatically. We also hope after reading this post you will feel confident enough to develop your own automated tasks based on Grunt.

• Are you editing .js files while monitoring a gazillion other tasks and the last thing you need is to debug the js code?
• Do you wish you could simply know that tasks such minify and uglify are taken care of automatically?

If you answered yes any of these questions, this article is for you! This article is intended for developers who are pressed for time and expected to deliver good quality code — which makes up most of us. However, even seasoned developers might find the article interesting and a source of inspiration.

Grunt is great, but…

You might have learned from your peers about the benefits of using Grunt. So you head over to Gruntjs.com, and start reading the usual topics: Getting Started, Installing Grunt. All looks fine, except you wonder “how am I going to use it… NOW?” Do not fret, fellow developer! We created a starting file set that you can download from …

1. Create your development folder
2. In your development folder, download and unzip the
3. In your development folder, which is where you should see the package.json file, open CLI and execute “npm install”.

That’s it! Additional modules have been installed, and you are ready to ask Grunt to execute tasks specified in Gruntfile.js.

Grunt is a tool executes a set of actions, including setting up the files and folder. When starting a new web project, developers need to set up the work environment with a common set of folders and files.  In this article, we will first cover setting up Grunt on your machine. Second, we will present a set of tasks we find most useful, and will indicate how you can use Grunt to execute those tasks.

Those of you who are not familiar with Grunt, Susy, SASS/SCSS will find this article particularly useful. However, even if you are an expert in this area, glance over the information in this article — even the most astute developer might find something interesting.

Setting up Grunt on your machine

To use Grunt on your development machine, make sure you follow these steps:

1. Install NODE.JS on your local machine — excellent instructions and download link are at <https://nodejs.org/en/download/>. Make sure “npm” you set up “npm” as a global variable.
2. Create the assets and grunt-assets in your project.
3. Using the Teminal (on MAC OS) or CMD (Windows), go to grunt-assets folder, and type “npm install” — “npm” is the global variable you created in step 1. To check “npm” is a global variable, type “npm -v”. If all is set up correctly, you will see the npm’s version.

1. “npm install” looks into package.json for a list of modules, and will install those modules in the node_modules folder.
2. Compile the SCSS using LibSass available at <http://sass-lang.com/libsass>

Using Grunt and Grunt tasks collection

The SCSS package contains several basic modules, which will make your life as a developer much easier. Your team and peers will also benefit from using this package by sharing a common set of tools and ensuring code quality on a consistent basis.

The grunt package.json file contains the following modules:

• Grunt: https://gruntjs.com/
• Grunt-contrib-concat: https://github.com/gruntjs/grunt-contrib-concat
• Grunt-contrib-jshint: https://github.com/gruntjs/grunt-contrib-jshint
• Grunt-contrib-uglify: https://github.com/gruntjs/grunt-contrib-uglify
• Grunt-contrib-watch: https://github.com/gruntjs/grunt-contrib-watch
• Grunt-sass: https://github.com/sindresorhus/grunt-sass
• Grunt-concurrent: https://github.com/sindresorhus/grunt-concurrent
• Susy: http://susydocs.oddbird.net/en/latest/install/
• Normalize-scss: https://github.com/JohnAlbin/normalize-scss
• Compass-mixins: http://compass-style.org/index/mixins/

You should look into these additional resources:

1. jsHint available alternatives and options: <http://jshint.com/docs/options/>
2. Using SASS basics and use of mixins, visit <http://sass-lang.com/guide> to learn about creating mixins, writing scss expressions such as @if, @for, @each, @while, and building functions with… @function.

Grunt is watching you…

Grunt monitors the activity on a file type and will perform the tasks associate with that file type. For example, Say you work on a scss/js file and you make a change. Grunt will notice the change and will compile the file into corresponding .css and .js — no more worries about remembering to compile the files before you run your project.

How this works, you wonder? The Grunt Concurrent module will create two threads to monitor the javascript and scss file respectively. Any change in a scss file activates the grunt watch module for scss. Similarly, any change in a javascript file or creation of  a new javascript file will activate the grunt watch module for javascript. Associated with each grunt watch activation is the task of compiling the modified file. As a result, scss and javascript files are compiled immediately following a modification.

Good practices with Grunt

Before using the basic package indicated above:

1. Open the gruntfile.js and package.json files.
2. Replace the generic nameholders with your name.
3. Replace <Developer Name> with your company name.
4. Optionally, change the compiled filenames, e.g. wpriders-main.js, wpriders-main.min.js

Please keep in mind that javascript files will be compiled and minified in alphabetical order. We also recommend that you prefix your own javascript file with the letter “z” (z_my_awesome_js_code.js) to ensure it will be compiled last and use the resources of other JS libraries currently available in the project.

Give it a… Grunt

At this point, you have everything you need to automate tasks using Grunt.

In the same folder where gruntfile.js resides, type “grunt”. Magic happens!

Interesting screenshots