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.

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

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

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

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.

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

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