Managing Your project's applications using Grunt. js _ basic knowledge

Previously, we may use NodeJS to write a build program, But Now Grunt. js can provide everything we need. What is Grunt. js?
Grunt. js is a Javascript Task Runner (Javascript Task Runner). It is based on NodeJS and can be used to automatically build, test, and generate documents.

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

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

• To clarify the module division, we may split Javascript code into small and small js files, but we know that on the final page, we know that too many js files will generate too many Http requests, which is not conducive to page optimization. So we may want to merge these js files.
• To minimize the size of the files requested by the user end, we hope that HTML, Javascript, and other files can be compressed.
• We may need to perform some unit tests and regression tests on the source code.
• We may want tools to automatically generate documents through the source code remarks, so that you do not need to write documents manually.
•......
Obviously, there are all kinds of gadgets that can help us, but we hope we 'd better enter a command to open a program, or, you can perform all these operations automatically after each modification file is saved.

Previously, we may use NodeJS to write a build program, But Now Grunt. js can provide everything we need.

Install Grunt. js
Grunt. after js 0.4, it no longer uses the Global Method to install the entire Grunt. install Grunt globally. js Client, and then install Grunt in the current project to avoid dependency between different projects on different Grunt versions in the future.

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 configuration file of the project. It contains the dependency information of some projects, as well as the author, version, and other information. First, write a simple package. json.

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 dependency is grunt and the version is 0.4.1.
Enter the following command to include the package. json directory in the terminal:

Npm install
We will find that this directory has an additional node_modules folder, which contains a grunt folder. 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. It compresses js tasks based on the famous js compression tool uglify.

First, add grunt-contrib-uglify to the project dependency, and package. json is as follows:

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

The Code is as follows:

Module. exports = function (grunt ){

// Add some settings for grunt
Grunt. initConfig ({
Uglify :{
Options :{
Banner :'/*! All rights reserved. Enter */\ n' here'
},
Build :{
Src: 'src/core. js', // source file to be compressed, we can also use * to indicate wildcard, such as 'src/*. js'
Dest: 'dst/core. js' // output position after compression
}
}
});

// Load the "uglify" plug-in task
Grunt. loadNpmTasks ('grunt-contrib-uglify ');

// Define the default task to be executed
Grunt. registerTask ('default', ['uglify ']);

};

The Gruntfile. js file is used to define tasks and the execution sequence of task groups. In the above file, we define to compress the src/core. js file and output it to dst/core. js. Run the following command:

Grunt
The task is automatically completed.