A quick disclaimer: I no longer use grunt. I have changed to gulp because I prefer its code over configuration approach. However I think grunt still has great value for someone who wants the advantages of automation without all the details of JavaScript.
This is not an introduction to grunt, that is very well explained on the official site. Grunt is a task runner for JavaScript. That sounds very simple, you can use grunt to do tasks for you, however isn’t all programming running prescribed tasks or programs. I would say yes and so what is the use of grunt?
Grunt is nothing but a neat way to package tasks which are added as plugins. Essentially grunt has no value without the plugins that its community has generated. With these grunt is wonderful.
So with that here is a whirlwind intro to some of the grunt tasks I have made use of.
Concatenation contrib-concat
With this plugin you can automatically gather JavaScript/CSS saved in several locations and combine them to one file. This is best practise for performance by reducing HTTP request and speeding page load time.
Minification contrib-uglify, css-min
There are plugins to minify JS, CSS and HTML. This decreases the sizes of assets by removing comments, white space and several other things that human readers find very useful. This reduced size of files to be served is also helpful in speeding up a page load time.
Watch contrib-watch
Automate the automated tasks, this task watches for changes to files, upon which it will run other grunt tasks. Save any changes in your js files and a new minified version will be ready almost instantaneously
Linting jslint
Existing for JavaScript and CSS these task will check the quality of code you are writing, The value of jslint at catching mistakes is really huge.
Some More interesting task
The above are a powerful toolkit on there own, this next selection are more for the curious
Efficiency or Laziness, whichever it is, it becomes contagious once grunt is running. This task saves you from having to individually add every grunt plugin to your grunt file. And will instead load every node package that is prefixed with ‘grunt-’
This will record the time that each task takes to run. If a task is build of several tasks it will tell you the percentage time on each. So far this is more interesting than useful. It might provide early warning if you are minifying lots of images that you have too many as the time creeps up.
This task provides can prefix any other task and will only run that task again if the files it is acting upon have changed since the last time the task was run. A useful way of speeding things up.
Not a grunt task but a great addition to the development workflow. Previously I was pushing a version of my project to heroku to show it to other people. This meant that my project was littered with commits such as 'test this new thing on phone’. Now this is all replaced with localtunnel. Grunt has several plugins that allow you to spin up a server with your project. with local tunnel you can take a locally running server and with no knowledge of how make it available the world over with one command
$ lt –port 8000
your local server port 800 will be made available at 'random.localtunnel.me’ A really great service