Using GruntJS to build Web programs and compress them together

Perform the following steps:

1. Create a project Bejs
2. Create a file package. json
3. Create a file named Gruntfile. js
4. Execute the grunt task through the command line.
 

1. Create a project Bejs
The source code is placed under src. The directory has two sub-directories, asset and js. In the previous article, the selector. js and ajax. js commands are delegated to js. This document describes how to merge and compress them. This article only focuses on the asset directory. The asset directory has some images and css files. The two CSS resources reset.css and style.css will be merged and compressed to the dest/asset directory. Merge all. cssand archive all-min.css.

2. Create a package. json
Package. json is placed in the root directory. Its meaning has been described in the previous article. The current project structure is as follows:

The package. json content must comply with the JSON syntax specifications as follows:

Copy codeThe Code is as follows:
{
"Name": "BeJS ",
"Version": "0.1.0 ",
"DevDependencies ":{
"Grunt ":"~ 0.4.0 ",
"Grunt-contrib-concat ":"~ 0.1.1 ",
"Grunt-css": "> 0.0.0"
}
}

Grunt-contrib-concat has already been introduced in the previous article. grunt-css is the plug-in to be used in this article.

Open the command line tool to enter the project root directory and run the following command: npm install

Check the root directory and find that there are multiple node_modules directories, which contain four subdirectories. See figure

3. Create a file Gruntfile. js
Gruntfile. js is also stored in the project root directory. Almost all tasks are defined in this file. It is a common js file that can write any js Code, not limited to JSON. Like package. json, it must be submitted to svn or git like the source code.

The source code is as follows:
Copy codeThe Code is as follows:
Module. exports = function (grunt ){
// Configure
Grunt. initConfig ({
Pkg: grunt. file. readJSON ('package. json '),
Concat :{
Css :{
Src: ['src/asset/*. css '],
Dest: 'dest'/asset/all.css'
}
},
Cssmin :{
Css :{
Src: 'dest'/asset/all.css ',
Dest: 'dest/asset/all-min.css'
}
}
});
// Load the concat and css ins for merging and compressing
Grunt. loadNpmTasks ('grunt-contrib-concat ');
Grunt. loadNpmTasks ('grunt-css ');
// Default task
Grunt. registerTask ('default', ['concat', 'cssmin']);
};

4. Execute the grunt task
Open the command line, go to the project root directory, and tap grunt

The printed information shows that the dest directory and the expected file are successfully merged and compressed, and dest is added to the project directory, as shown below:

At this point, css merging and compression are complete.