Grunt is a JavaScript task runner. It automates common tasks such as minification, compilation, linting, unit-testing, and so on. We need to create a task file to instruct the test runner to automatically take care of such mundane tasks.
Gulp is described as a streaming build system. It is used as an alternative to Grunt, whereas Grunt relies on configuration over code (meaning the tasks are specified as JSON configuration), Gulp takes the other approach, that is, code over configuration which means various tasks are configured in code.
It's best to install Grunt CLI (command-line interface) using the following code:
npm install –g grunt-cli
Now you can run Grunt from any folder and run the following code:
grunt --help
Note
There's a well-known Unix convention for using command-line arguments by which you can either use the full name of the argument preceded by two dashes -- or by using a single letter abbreviated name of the argument preceded by a single dash -. So the preceding command may also be run as follows:
grunt -h
But not all the command-line applications follow this convention.
Now you'll see that there are many grunt tasks available such as clean (for cleaning files and folders), cssmin (for minifying CSS), and htmlmin (for minifying HTML).
Let's take a look at a part of the gruntfile.js, as shown in the following table:
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'autoprefixer:server',
'connect:livereload',
'watch'
]);
});
(gruntfile.js)
The preceding file shows a task called serve, which is used to run the application. This task compiles the application, starts a web server, and then launches the default browser with the application running. So let's check it out by doing the following action:
grunt serve
Now you'll see an application similar to the one shown in the following screenshot:
Running application generated by yo angular.
In the preceding screenshot, the name of the application is highlighted; we specified the name of the application as bookExamples when we ran yo angular (as the first argument to this command).
Similarly, the grunt build command minifies the CSS and JS files and updates the references to external libraries from the bower_components folder to their CDN versions, and the grunt test task runs the unit and E2E tests using Karma.