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.
Grunt-Contrib-Compass
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-Wiredep
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.
Grunt-Contrib-Concat
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.
Grunt-Contrib-Uglify
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.
Grunt-Contrib-Watch
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.
Grunt-Express-Server
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.
Grunt-Contrib-Cssmin
The cssmin plug-in compresses any css code inside your application in the same way that uglify minifies JavaScript code. Although it’s a simple concept, this is yet another plug-in that helps to optimize page performance.
Now that you’re aware of a few different plug-ins, go create and use them in correlation in your next project! The time you spend wiring up your gruntfile will surely pay off the in the end, so be sure not to overlook the almighty JavaScript task runner.
Leave a Reply