Building Web programs using Gruntjs _javascript tips

There are probably the following steps

New Project Bejs
New File Package.json
New File Gruntfile.js
Command line perform grunt task

First, new project Bejs

SOURCE stacking in SRC, the directory has two JS files, Selector.js and Ajax.js. compiling descendants in Dest, this grunt is automatically generated.

Second, new Package.json

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

The Package.json content needs to conform to the JSON syntax specification, as follows

Copy Code code 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"
}
}

The grunt in Devdependencies is already installed in the previous article and Grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat is not installed. Three separate for three tasks (Task)

Grunt-contrib-jshint JS Grammar Check
Grunt-contrib-uglify compression, using UGLIFYJS
Grunt-contrib-concat merged files

At this point, open the command-line tool into the project root directory and knock the following command: NPM install

Then look at the root directory, found more than a node_modules directory, containing four subdirectories, see figure

Third, new file gruntfile.js

Gruntfile.js is also placed in the project root directory, almost all of the tasks are defined in the file, it is a common JS file, which can write any JS code and not limited to JSON. Like Package.json, it will be submitted to SVN or git as well as the source code.

Gruntfile.js consists of the following content

wrapper function, the structure is as follows, this is the typical writing of node.js, use exports public API

Copy Code code as follows:

Module.exports = function (grunt) {
Do grunt-related things in
};

Project and Task configuration
Load Grunt Plug-ins and tasks
Custom Perform Tasks

The example completes the following tasks

The files under the merged src (ajax.js/selector.js) are domop.js
Compressed domop.js for Domop.min.js
These two files are placed in the Dest directory

The final gruntfile.js is as follows

Copy Code code 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: '/*! <%= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n '
},
Build: {
SRC: ' dest/domop.js ',
Dest: ' Dest/domop.min.js '
}
}
});
Load concat and Uglify plug-ins, respectively for merging and compressing
Grunt.loadnpmtasks (' Grunt-contrib-concat ');
Grunt.loadnpmtasks (' grunt-contrib-uglify ');
Registering tasks
Grunt.registertask (' Default ', [' concat ', ' uglify ']);
};

Iv. implementation of Grunt tasks

Open the command line, go to the project root directory, knock Grunt

From the print information to see successful merge and compression and generate the Dest directory and the desired file, the project directory is more dest, as follows

OK, here are 2 common tasks concat and uglify,jshint are not introduced. The code in Gruntfile.js has no one by one readings, and interested students can find it in Gruntjs's official document.