So you’ve decided to integrate GruntJS into your workflow. Well you’ve made a good choice, as you’ll soon be saving more time than you previously thought possible.
GruntJS automates a whole bunch of different processes. Once you understand the basic configuration, Grunt can quickly become your most powerful tool for workflow automation. I am going to cover a few essential plug-ins that every GruntJS user should definitely know about.
First in our list is the Grunt plug-in for Compass. With the help of this plug-in, Grunt can be configured to watch your Sass files for any sort of changes. Once a change is made Grunt will compile your Sass files to CSS format, and you can even configure the plug-in to generate Source Maps.
Grunt-wirdep injects libraries downloaded from bower into your index.html file. This plug-in was built on top of wiredep, which is a node module that wires bower dependencies into your project. I should also note that wiredep will inject these libraries in the most appropriate order to help avoid any problems.
When working on different projects you want to maintain a system of modular code to make it easier to maintain. This plug-in was created to consolidate, or concatenate all of your code into a single file.
This allows you to break up your code so that you can move throughout it much easier.
The grunt-contrib-uglify plug-in goes hand-in-hand with the concat plug-in above.
This plug-in was developed to minify, or uglify, your code. If you are unfamiliar with this process it’s simply the removal of whitespace from a file. Nonetheless, minification is a huge part of development as whitespace can negatively impact a page’s performance.
The grunt-contrib-watch plug-in is an essential tool for development. When configured appropriately, this plug-in watches over specific files for any changes inside your projects directory. Once it sees a specific file change, it then runs specific tasks depending on the filename which you personally configure inside your gruntfile.
The grunt-express-server automates the process of starting a server for you. It can be configured to run depending on what type of environment you are operating in, and works great with the grunt-contrib-watch plug-in.