| Image for representative purpose only. |
Automate your repetitive tasks with Grunt JS
Background
Front-end developers are often required to do certain things:
- Work in as small chunks of CSS and JavaScript as makes sense to you, then concatenate them together for the production website.
- Compress your CSS and minify your JavaScript to make their file sizes as small as possible for your production website.
- Optimize your images to reduce their file size without affecting quality.
- Use Sass for CSS authoring because of all the useful abstraction it allows.
That’s not a comprehensive list of course, but those are the kind of things we need to do. You might call them tasks. Perhaps you use a variety of different tools to accomplish them. Grunt can help bring them under one roof, so to speak.
Grunt – An Introduction
Grunt is a Javascript task runner. So, it's all about the automation of (repetitive) tasks. This tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file (known as a Gruntfile). Grunt was created by Ben Almanand is written in Node.js. It is distributed via Node Package Manager (npm). The key points for Node Package Manager are as follows:
- It is an online repository for the publishing of open-source Node.js projects.
- It is a command-line utility for interacting with said repository that aids in package installation, version management, and dependency management.
Why Grunt?
- Before deploying your projects in Production you may want to increase its performance by minifying your JavaScript and CSS code - you may go for some online tools.
- Since you (and your team) want to write good code you're probably using linters like for your CSS, JS and so on. Those linters have to be run after every single change in the corresponding files.
- To increase the performance of your app even further you'd like to concatenate all your JS or CSS files into a single file.
- The Grunt ecosystem is huge and it's growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort.
Companies that uses GRUNT include Adobe Systems, jQuery, Twitter, Mozilla, Bootstrap, Cloudant, Opera, WordPress, Walmart and Microsoft.
Advantages
The following are some of the advantages of using Grunt:
- All task runners have the following properties like consistency, effectiveness, efficiency, repeatability, etc.
- Access to many predefined plugins that can be used to work with JavaScript tasks and on static content.
- Allows users to customize tasks using predefined plugins.
- Prefers the configuration approach to coding.
- Allows users to add their own plugins and publish them to npm.
How to Install?
- Grunt and Grunt plugins are installed and managed via npm, theNode.js package manager. Grunt 0.4.x requires stable Node.js versions >= 0.8.0. Odd version numbers of Node.js are considered unstable development versions.
- Before setting up Grunt ensures that your npm is up-to-date by running npm update –g npm.
- Get node.js from: https://nodejs.org/en/
- Next steps include: a) Installing grunt b) Installing grunt-cli
- Installing grunt - Run this command [npm install -g grunt]
- Installing grunt-cli - Run this command [npm install -g grunt-cli]
