The use of GruntJS to build Web applications of the combined compressed parts

There are the following steps:

1. New project Bejs
2. New file package.json
3. New file gruntfile.js
4. The command line performs grunt tasks
 

I. new project Bejs
The source code is placed under SRC, which has two subdirectories, asset and js. Js devolves selector.js and ajax.js, which I showed you in the last article to combine and compress them. This article focuses on the asset directory, which contains some images and CSS files. Two CSS resources, reset.css and style.css, are merged into the dest/asset directory. A merged version of all.css and a compressed version of all-min.css.

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060610383763.png ">

New package.json
The package.json is placed in the root directory, in the sense that the article has already covered. The current project structure is as follows

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060610383764.png ">

The contents of package.json should conform to the json syntax specification, as shown below

{
  "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 was covered in the previous article, and grunt- CSS is the plug-in for this article.

At this point, open the command line tool to go to the project root directory and type the following command: NPM install

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060610383765.png "width = 450 >
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060610383766.png "width = 450 >

Looking at the root directory, I found a node_modules directory containing four subdirectories, as shown in the figure

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060610383767.png ">

Third, the new file gruntfile.js
Gruntfile.js is also placed in the project root directory, almost all tasks are defined in this file, it is a common js file, where you can write arbitrary js code rather than limited to JSON. Just like package.json it will be committed to SVN or git as the source code.

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060610383768.png ">

The source code is 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 for merge and compression, respectively
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-css');
    //The default task
    grunt.registerTask('default', ['concat', 'cssmin']);
}; 

Perform grunt tasks
Open the command line, go to the project root, and type grunt

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060610383769.png ">

From the print message, you can see that the dest directory and the expected files were successfully merged and compressed and generated, when the project directory has more dest, as shown below

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201406/2014060610383770.png ">