- Programs, known as ‘packages’, are installed for Node using the Node Package Manager (npm) command-line tool. - Grunt is one such package, as are its tasks.
- Before we start using Grunt itself, we need to install the Grunt Command Line Interface (CLI), which provides access to the Grunt command-line tool globally across your system. - On the command prompt, install the Grunt CLI by executing this command.
To enable Grunt to run against the project, we need to add two files in the project root folder: a Node package file (package.json) and a Grunt configuration file (GruntFile.js). A Node package file is a text file containing JSON-formatted project properties together with a list of node package dependencies required by the project, one of which will be Grunt in our case. -Naming this file package.json and using properties defined in the npm package file specification ( https://npmjs.org/doc/ json.html) means that the associated project can be installed together with its dependencies in a similar way to other node packages.
Here we assign a human-friendly title for this Node package, a machine- friendly internal name and a version number according to the Semantic Versioning format - The latter two properties are essential for any Node package so make sure you don’t leave these out here.
What’s missing now are the Node package dependencies required for our project. The most important of these to us is Grunt. - The simplest way to define a dependency and download it at the same time is to execute the following on the command line in your project directory. - Here we do that for Grunt. - The --save-dev option indicates that the package file should be updated as well as the dependency being installed locally.
You’ll see all the files downloading within a new node_modules folder created within your project folder.
If you open the package file again, you’ll notice the following section has been added automatically to its JSON structure. - This specifies a version number for Grunt in the project package file, so you can use different versions of Grunt for different projects.
Now we’ve created our package file, if you have a new developer to introduce to your project, ask them to download Node, Grunt CLI as well as the project folder onto their machine. Next, tell the new team member to navigate to the project folder on the command line and type this command.
Node will then download all the dependencies automatically according to the specific version numbers listed in the package file, and placing them within a node_modules folder for the new developer. Simple as that! - A word of advice: avoid committing this folder to source code control; let each developer download the files locally to their machine using npm and the package file.
This is a task perfect for Grunt, and a task called grunt-contrib-jshint exists as a Node package for us to use that does just this. - As a tip, I found a simple web search for ‘Grunt JSHint’ will locate this task for you with better certainty than the package search within the npm registry itself.
Installing the grunt-contrib-jshint task and adding it as a dependency to your package file is as simple as executing the following command. - The package files will download and that’s our dependencies done. - We’re ready to move on to configure the other file - GruntFile.js.
- Moving onto the Grunt configuration file, GruntFile.js - Follows the same basic structure for every project. - Use this ‘wrapper’ function, which will contain all the Grunt task settings and configuration. - module.exports property denotes that this file is in the CommonJS module format adopted by Node. Don’t worry too much about that. - However, do observe the Grunt parameter passed to the function, which is an object representing the Grunt API, containing methods and properties for working with Grunt throughout the three distinct sections of code in the rest of the file: the configuration, plug-ins and the tasks.
Let’s skip the configuration section for the moment and jump ahead to the plug-ins section. - This is where we register the tasks we added as dependencies in our package file earlier to make them available to run in Grunt. - Add this line to the plug-ins section, which calls the API to register the JSHint npm task by name for use with Grunt.
- According to the documentation for the JSHint plug-in, it registers a task within Grunt using the internal name jshint. This is the name we will use to refer to it from within our file. - Moving ahead once again, the tasks section of the file allows several tasks to be grouped together into a single ‘custom’ task, allowing them to be run together with a single execution of Grunt. - We register a custom task named default, which calls the JSHint task using another API call. - Extra tasks can be combined with this at a later stage by adding their internal names to the array.
Edit the configuration file and add the following line at the top of the wrapper function, enforcing ECMAScript 5 strict mode.
At AKQA, we have a Base Project Setup which includes a GruntFile and a NPM package file for allowing us to start all projects with a common foundation.
We’re using some of the industry’s foremost tasks to increase our code quality and improve our development experience.
Improve Your Front-End Project Workflow With Grunt
IMPROVE YOUR FRONT-END
PROJECT WORKFLOW WITH GRUNT
Head of Web Development, AKQA
JS & CSS File Concatenation