Application instructions for managing your projects with Grunt.js

Application instructions for managing your projects with Grunt.js_Basics

WBOY

Release： 2016-05-16 17:35:35

Original

1144 people have browsed it

What is Grunt.js?
Grunt.js is a Javascript Task Runner (Javascript task runner), which is based on NodeJS and can be used to automate building, testing, and document generation project management tools.

Grunt.js is not just a build tool. In fact, it is just a task runner that manages the automated running of each sub-task. We can also use it to do more things.

Why use Grunt.js?
Simply put: for automation.
For front-end projects, for example:

•In order to clarify the division of labor between modules, we may split the Javascript code into very small js files, but we know that on the final page, too many js files will generate too many Http Requests , which is not conducive to page optimization. So we might want a tool that can merge these js files.
•In order to keep the files requested by the client as small as possible, we hope that our HTML, Javascript and other files can be compressed.
•We may need to do some unit testing and regression testing on the source code.
•We may hope to have a tool that can automatically generate documentation through source code comments to avoid having to write documentation manually.
•......
Obviously, there are various gadgets that can help us do all this, but we hope it is best to enter a command, open a program, or simply save the file every time it is modified. Then do all this automatically.

In the past we might have used NodeJS to write a build program ourselves, but now Grunt.js can provide everything we need.

Install Grunt.js
After Grunt.js 0.4, it no longer installs the entire Grunt.js globally, but installs Grunt.js Client globally and then installs it in the current project Grunt, to avoid future dependencies between different projects on different versions of Grunt.

If the previous version is installed, you can use the npm command to delete the original Grunt.js.

npm uninstall -g grunt
Then install Grunt.js Client:

npm install -g grunt-cli

package.json
package.json is the project configuration file, which contains some project dependency information, author, version and other information. Let's first write a simple package.json.

Copy code The code is as follows:

{
 "name": "my-project ",
 "version": "0.1.0",
 "devDependencies": {
 "grunt": "~0.4.1"
 }
}

name attribute, indicating the name of the item.

The version attribute is the version number of the project.

The

devDependencies attribute contains the dependencies of the project. Currently, our dependencies are only grunt, and the version is 0.4.1.
In the terminal directory that probably contains the package.json, enter the command:

npm install
We will find that there is an additional node_modules folder in the directory, and there is a grunt folder in it. This is the Grunt.js we installed in the project.

Use Grunt.js to compress js code
grunt-contrib-uglify is a task module of Grunt.js, which is based on the famous js compression tool uglify to perform js compression tasks.

First we add grunt-contrib-uglify to the project dependencies. The package.json is as follows:

Copy the code The code is as follows:

{
 "name": "my-project",
 "version": "0.1.0",
 "devDependencies": {
 "grunt" : "~0.4.1",
 "grunt-contrib-uglify": "~0.2.0"
 }
}

Reuse:

npm install
We have installed grunt-contrib-uglify.

Write Gruntfile.js

Copy the code The code is as follows:

module.exports = function(grunt) {

// Add some settings to grunt
grunt.initConfig({
uglify: {
options: {
) 🎜>}, Build: {
src: 'src/core.js', // The source file to be compressed, we can also use*to represent the pass, such as 'src/*. Js'
// Load "uglify" plug-in tasks
grunt.loadNpmTasks('grunt-contrib-uglify');

// Define the tasks that need to be executed by default
grunt.registerTask('default', ['uglify']);

};

The Gruntfile.js file is used to define tasks, the execution order of task groups, etc. In the above file, we define that the src/core.js file will be compressed and output into dst/core.js. Then we enter the command:

grunt

will automatically complete this task.