Grunt: an introduction
Grunt is a Javascript task runner software. It’s a tool you can use to automatically run tasks, such as building and linting your code. Grunt was originally released in 2016, and was designed to simplify the build process. Grunt is used by a multitude of large companies, such as X, Walmart and Microsoft. It comes with thousands of different plugins you can use to run a variety of tasks. In Grunt, a task is a module that does a specific job.
The first thing you need to do to use Grunt in your project is install it with NPM. Grunt files are executed using commands in the terminal. So you will also need to install the Grunt CLI in order to have the command line interface for Grunt. The next thing you need to do to implement Grunt in your project is to create a Gruntfile and a package.json. The package.json will list details and dependencies for the project. The Gruntfile is a normal js file and this is where each task is specified and defined. The Gruntfile has four main parts. The first part of the file is the wrapper function. The next part is configuring the tasks within the function. After that you have to load the plugins and tasks needed for the file. The last part is defining any custom tasks you will use in the file.
module.exports = function(grunt) {
//configuration
grunt.initConfig({
//pass in options to plugins and references to files etc...
})
//load plugins
grunt.loadNpmTasks('')
//register tasks
grunt.registerTasks('run', function() {
console.log('running')
})
grunt.registerTasks('sleep', function() {
console.log('sleeping')
})
//combine two tasks into one
grunt.registerTasks('all', ['sleep', 'run'])
}When configuring tasks in your Gruntfile, each one is given a taskname. Then using the taskname you can run each one in the command line by executing grunt taskname. If you configure a task with a taskname default, then that task will be run with just grunt in the command line. You can also combine multiple tasks into one, so that when you run grunt taskname, it will include multiple tasks in that one taskname.
Most common tasks in Grunt are available as plugins. Plugins are pre-made code that are designed to perform a task or set of tasks. Plugins are used for many different tasks, such as minification, linting and concatenation. Each plugin has to be installed individually to the package.json, and then it can be loaded into the Gruntfile using .loadNpmTasks. If there is not already a plugin that suits your needs, then you can create a custom task. It is also possible to design your own custom plugins and publish them to NPM. The official Grunt plugins always start with grunt-contrib. Three of the more common plugins out there are grunt-contrib-watch, grunt-contrib-clean, grunt-contrib-uglify. Grunt-contrib-watch will watch for changes in files and run set tasks whenever they happen. Grunt-contrib-clean cleans out specified files between builds. Grunt-contrib-uglify minifies your code so that it will be smaller and will run faster.
//configuration
grunt.initConfig({
//pass in options to plugins and references to files etc...
concat: {
js: {
src: ['src/file1.js', 'src/file2.js', 'src/file3.js'],
dest: 'build/scripts.js'
}
}
})
//load plugins
grunt.loadNpmTasks('grunt-contrib-concat')
//register tasks
grunt.registerTasks('concat', ['concat: js'])There are many advantages of using Grunt in your project. One advantage is that it makes your build process more effective, reusable and consistent. Another advantage is that Grunt comes with many plugins that are ready to use. You can also create customized tasks in your Gruntfile. One other advantage is that users can make their own plugins and publish the to npm. All in all, Grunt is a very helpful tool for making your build process easier and more efficient.
Sources:
https://en.wikipedia.org/wiki/Grunt_(software)