How to manage projects with Grunt.js

This article describes how to manage projects with Grunt.js.

Grunt.js Introduction:

Grunt.js is a JavaScript task Runner, based on Nodejs, that can be used to automate the project management tools for building, testing, and generating documents.

Grunt.js is not just a build tool, he is actually just a task manager, managing the automation of each subtask, and we can use him to do more.

Why use Grunt.js?

Simply put: for automation.

For front-end projects, for example:

In order to clear the module division of labor, we may be the JavaScript code into a very small number of JS files, but we know that in the final page, we know that too many JS files will produce too much HTTP Request, which is not conducive to page optimization. So we might want to be able to combine the tools for these JS files.

We want our HTML, JavaScript, and other files to be compressed in order to be as small as possible for the client's requested file.

We may need to do some unit testing and regression testing of the source code.

We may want to have tools that automatically generate documents through source code comments, lest you write the document manually.

......

Obviously, there are all kinds of gadgets that can help us do this, but we'd like to be able to type in a command, open a program, or simply change the file every time we save it.

We may have used Nodejs to write a build program, but now Grunt.js can provide everything we need.

Install Grunt.js

Grunt.js 0.4 eliminates the global installation of the entire grunt.js, instead of installing the grunt.js Client globally, and then installing grunt in the current project to avoid dependencies on different versions of the grunt for different projects in the future.

If the previous version is installed, you can use NPM's command to remove the original grunt.js.

NPM Uninstall-g Grunt

Then install Grunt.js Client:

NPM install-g GRUNT-CLI

Package.json

Package.json is a project configuration file, with some information about the dependencies of the project, as well as the author, version, and so on. Let's write a simple Package.json first.

{
  ' name ': ' My-project ', '
  version ': ' 0.1.0 ',
  ' devdependencies ': {
    ' grunt ': ' ~0.4.1 '
  }
}

The Name property, which represents the item.

Version property, this is the item's build number.

The Devdependencies attribute, which contains the dependencies of the project, is currently dependent on only grunt, and the version is 0.4.1.

In the terminal that probably contains the Package.json directory, enter the command: