Grunt plugins are core to Grunt functionality and, thus, are an important aspect of Grunt because plugins are what we use in order to design an automated build process. A plugin is a task. I may refer to plugins as tasks as you continue through the book, so consider plugins and tasks to be synonymous. Generally speaking, I may use the term Task when referring to plugins in terms of the specific work that they perform. A task is a unit of work that must be performed in order to accomplish a desired outcome, usually, as a portion of work that must be done in order to complete a larger process; although, a task may be in and of itself a standalone process. We may not know, offhand, exactly what tasks are needed to perform on a project. Grunt is scalable in this way, and it is easy to add tasks as we are working through our project. If you have done a few projects, then you will have a good idea for some tasks that you might like to automate. Perhaps, you run lint from a keyboard shortcut after each time you save changes to your code. Maybe you use some plugins in your editor that minify your CSS for you. Often, we will want to build our source code in our compiled source deployment files, and it is necessary to manually build our source each time we save our project to test. In web projects, we have to continually refresh our browser as we make changes so that we can see the latest updates that we have made. These, and many more tasks, are the candidates that we may choose to automate with Grunt. The aim of this chapter is to introduce you to some of these common tasks so that you will become aware of what types of tasks are already available, where to find them, and details of what these tasks will do for you:
- Obtaining Grunt plugins
- Discussing common Grunt plugins and their purposes
The first step in getting started with Grunt plugins is to establish some fundamental understanding of which plugins are available, how they are installed, and how you actually use them in your workflow. It is important to begin considering what your project's needs are and what you wish to be able to turn over to automation, rather than manually completing yourself. Perhaps, you don't know the answers to these questions at this time, and that is fine. We will hopefully prompt you to begin asking yourself these questions and researching for answers. Obviously, that is why you are reading this book; you understand that task automation can benefit you and your development process. Let's get an idea of what is out there and how you can learn more.
The available Grunt plugins are listed on the Grunt plugins page, located at: http://gruntjs.com/plugins. From this page, you can find a list of available plugins that is updated automatically. As this list is fetched dynamically from the NPM module database, you will always be able to view the most updated list of Grunt plugins from this page. As of the time of writing this, officially maintained plugins are prefixed with contrib- and have the image of a star next to them:
Other plugins found here are maintained by community contributors and not the Grunt team. They will not include the contrib- prefix, nor will they be marked with a star:
Now would be a good time to navigate through the plugins' pages and get an idea of the types of tasks that are already available for you to use in your projects. Becoming even a little familiar with what is already there will help when you want to find a solution for a specific task.
Be sure to drill into any tasks you are interested in finding more information on. Each plugin has its own page and provides documentation about the plugin. In the next section, some of these common tasks will be chosen and described in more detail.
It is important to note that we do not actually obtain plugins from the Grunt plugins page; this is merely where we can find available plugins and their associated documentation. Grunt plugins are installed using NPM. For example, in order to install a plugin in our project, we would navigate to our project's directory and use the npm install command for the plugin:
npm install [package name] –save-dev
Let's break this line down. We are running the npm install command to invoke NPM to install a package, [package name]. Then, we are issuing an optional -save-dev flag that instructs npm to save the package locally to your devDependencies located in the package.json file.
More discussion is needed on the usage of the optional flags for the install command. At this time we have not yet discussed the package.json file in detail, other than it was created for us in the Angular-Seed project setup. There are a couple ways to create a package.json file. When we use a command called grunt init to install most templates, a package.json file will be created for us. When we use the npm init command, a package.json file will be created. You can also create one manually and add it to your project. You can find documentation on creating your own package.json file at http://gruntjs.com/getting-started#package.json.
We will be using the package.json file that was automatically generated for us. Navigate to the Angular Seed project that we created in the last project. In this, you will find a file named package.json at the root of the project. Open this file with any text editor so that we can inspect the file. Find the section of the file that looks like the following:
"devDependencies": {
"bower": "^1.3.1",
"http-server": "^0.6.1",
"jasmine-core": "^2.3.4",
"karma": "~0.12",
"karma-chrome-launcher": "^0.1.12",
"karma-firefox-launcher": "^0.1.6",
"karma-jasmine": "^0.3.5",
"karma-junit-reporter": "^0.2.2",
"protractor": "^2.1.0",
"shelljs": "^0.2.6"
},Notice the devDependencies key. In this json object are all of the key-value pairs that define the installed packages in our sample_project application. There are other objects that define dependency types, such as dependencies and optionalDependencies. These additional options will be discussed shortly. Recall that Angular-Seed required Bower and needed to create an HTTP server. Those dependencies were installed for us in the project setup process. When you use the --save-dev flag in the install command, you are instructing NPM to register the package in the devDependencies object of your package.json file. If devDependencies does not exist, then it will be created. Some other notable flags are as follows:
npm install [package name] --save
The --save flag creates, if it does not exist, or adds a section named dependencies:
npm install [package name] --save-optional
The --save-optional flag will create or add a section named optionalDependencies.
As we will be working with the sample_project development dependencies, and not the sample_project itself, we will be using --save-dev.
When plugins are installed, an entry will be made in package.json. Depending upon which save option is used, in which section the entry will be created will be determined. Additionally, when each plugin is installed, the related plugin files will be added to a directory named node-modules. This directory will be located at the root of the project folder. All plugins that will be used in sample_project will be configured in a file named Gruntfile.js. This is the main configuration file used by Grunt.js for workflow automation.
It should be noted that plugins can be run manually by issuing the 'grunt [plugin-name]' command. The manual command for each plugin will be listed in each task described later in the chapter where relevant.
For now, this is enough discussion of package.json. We will be looking at package.json in more detail as we progress through the book. Let's move on and take a look at some specific plugins in an effort to become more familiar with what types of tasks are available and get a better feel for what is needed in our project. As you become more experienced in using Grunt for task automation, you will probably find that you have a core set of plugins that are used in mostly all of your projects. Learning what these tasks are is your first step in creating your own customized automated task development environment.