Using GruntJS to build web programs_javascript skills

The steps are roughly as follows

New project Bejs
New file package.json
New file Gruntfile.js
Execute grunt task from command line

1. New project Bejs

The source code is placed under src. There are two js files in this directory, selector.js and ajax.js. The compiled code is placed in dest, and grunt will automatically generate it.

2. Create new package.json

package.json is placed in the root directory. It contains some meta-information of the project, such as project name, description, version number, dependent packages, etc. It should be committed to svn or git like the source code. The current project structure is as follows

The content of package.json must comply with JSON syntax specifications, as follows

Copy code The code is as follows:

{
"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"
}
}

Grunt in devDependencies has been installed in the previous article, but grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat is not installed. Three respectively 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 and enter the project root directory, type the following command: npm install

Looking at the root directory again, we found that there is an additional node_modules directory, including four subdirectories, as shown in the picture

3. Create a new file Gruntfile.js

Gruntfile.js is also placed in the project root directory. Almost all tasks are defined in this file. It is an ordinary js file, and any js code can be written in it, not just JSON. Like package.json, it must be submitted to svn or git like the source code.

Gruntfile.js consists of the following content

The wrapper function has the following structure. This is a typical writing method of Node.js. Use exports to expose the API

Copy code The code is as follows:

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

Project and task configuration
Load grunt plug-in and tasks
Customize execution tasks

This example accomplishes the following tasks

Merge the files under src (ajax.js/selector.js) into domop.js
Compress domop.js into domop.min.js
Both files are placed in the dest directory

The final Gruntfile.js is as follows

Copy code The code 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'
}
                                                                                                                                                                                                                                                   ") %> '
}
}
});
// Load the concat and uglify plugins, for merging and compression respectively
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks ('grunt-contrib-uglify');
// Register task
grunt.registerTask('default', ['concat', 'uglify']);
};



4. Execute grunt task

Open the command line, enter the project root directory, and type grunt

It can be seen from the printed information that the dest directory and the expected files were successfully merged and compressed and the dest directory and the expected files were generated. At this time, there is dest in the project directory, as follows

ok, here are two common tasks: concat and uglify, jshint, etc. are not introduced. The code in Gruntfile.js has not been interpreted one by one. Interested students can find it in the official documentation of gruntjs.