Using Gruntjs to build a Web program's merged compressed text _node.js

There are the following steps:

1. New Project Bejs
2. New File Package.json
3. New File Gruntfile.js
4. Command line performs grunt task

First, new project Bejs
SOURCE stacking under SRC, the directory has two subdirectories asset and JS. JS decentralized selector.js and Ajax.js, which in the previous article has already talked about how to merge and compress them. This article focuses only on the asset directory, and the asset directory is decentralized with some pictures and CSS files. One will merge two CSS resources reset.css and style.css and compress them into the Dest/asset directory. A merged version all.css, a compressed version of ALL-MIN.CSS.

Second, new Package.json
Package.json is placed in the root directory, the meaning of which has been introduced. The current project structure is as follows

The Package.json content needs to conform to the JSON syntax specification, as follows

Copy Code code 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, GRUNT-CSS is the plugin to be used in this article.

At this point, open the command-line tool into the project root directory and knock the following command: NPM install

Look at the root directory, found a node_modules directory, containing four subdirectories, see figure

Third, new file gruntfile.js
Gruntfile.js is also placed in the project root directory, almost all of the tasks are defined in the file, it is a common JS file, which can write any JS code and not limited to JSON. Like Package.json, it will be submitted to SVN or git as well as the source code.

Source code is as follows

Copy Code code as follows:

Module.exports = function (grunt) {
Configuration
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 concat and CSS Plug-ins, respectively for merging and compressing
Grunt.loadnpmtasks (' Grunt-contrib-concat ');
Grunt.loadnpmtasks (' grunt-css ');
Default Tasks
Grunt.registertask (' Default ', [' concat ', ' cssmin ']);
};

Iv. implementation of Grunt tasks
Open the command line, go to the project root directory, knock Grunt

From the print information to see successful merge and compression and generate the Dest directory and the desired file, the project directory is more dest, as follows

At this point, the CSS merge compression finished.