Use GruntJS to build the build part of the Web application

There are roughly the following steps

      New project Bejs
      New file package.json
      New file gruntfile.js
      The command line performs the grunt task

  I. new project Bejs

Source code under SRC, the directory has two js files, selector. Js and ajax. Js. The compiled code is placed in dest and the grunt is automatically generated.

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/201464100058618.png? 2014541018 ">

New package.json

Json is placed in the root directory and contains some meta information about the project, such as the project name, description, version number, dependency package, and so on. It should be committed to SVN or git as the source. The current project structure is as follows

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/201464100117153.png? 20145410127 ">

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-jshint": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1"
  }
}

The grunt in devDependencies was installed in the previous article, while grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat was not. Three separate for three tasks

      Grunt -contrib-jshint js syntax check
      Grunt -contrib-uglify compression, using UglifyJS
      Grunt -contrib-concat merge files

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

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/201464100140575.png? 20145410150 ">

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/201464100203130.png? 20145410216 ">

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/201464100237258.png? 20145410248 ">

Looking at the root directory, I found that there is a node_modules directory, including four subdirectories, as shown in the figure

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/201464100311717.png? 20145410321 ">

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 border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/201464100330978.png? 20145410338 ">

Gruntfile.js consists of the following

      Wrapper function, which is typically written in node. js, USES exports to expose the API

module.exports = function(grunt) {
  // Do grunt-related things in here
};

    Project and task configurations
    Load the grunt plugin and task
    Customizing execution tasks

The example does the following

      Merge the file under SRC (ajax.js/selector. Js) to domop.js
      Compress domop.js to domop.min.js
      Both files are placed in the dest directory

The final gruntfile.js is as follows

module.exports = function(grunt) {
    //  configuration 
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            domop : {
                src: ['src/ajax.js', 'src/selector.js'],
                dest: 'dest/domop.js'
            }
        },
        uglify : {
            options : {
                banner : 'n'
            },
            build : {
                src : 'dest/domop.js',
                dest : 'dest/domop.min.js'
            }
        }
    });
    //Load the concat and uglify plug-ins for merge and compression, respectively
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    //Registered task
    grunt.registerTask('default', ['concat', 'uglify']);
}; 

Perform grunt tasks

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

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/201464100351837.png? 2014541040 ">

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 border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201406/201464100409887.png? 20145410419 ">