Use gruntjs to build web programs (3)

ArticleDirectory

• 1. Create a project bejs
• 2. Create a package. JSON
• 3. Create a file gruntfile. js
• 4. Execute the grunt task

The previous article describes how to use the Concat and uglify commands to merge and compress JavaScript resources. This article describes how to merge and compress CSS resources.

Perform the following steps:

1. Create a project bejs
2. Create a file package. JSON
3. Create File gruntfile. js
4. Execute the grunt task on 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:

{"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 go to 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, which can write arbitrary JS files.CodeIt is 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:

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 plug-ins for merge and compression grunt, respectively. loadnpmtasks ('grunt-contrib-concat'); grunt. loadnpmtasks ('grunt-CSS '); // default task grunt. registertask ('default', ['concat', 'cssmin']);};
 

 

4. Execute the grunt task

Open the command line and enter the project root directory.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.

 

Bejs

Another good job is cssmin.