There are probably the following steps
New project Bejs
Create a new file package.json
Create a new file Gruntfile.js
Execute grunt tasks on the command line
1. New project Bejs
The source code is placed under src, and the directory has two js files, selector.js and ajax.js. After compilation, the code is placed in dest, and this grunt will be generated automatically.
2. Create a new package.json
package.json is placed in the root directory and contains some meta information of the project, such as project name, description, version number, dependency package, etc. It should be submitted to svn or git like the source code. The current project structure is as follows
package.json content must comply with JSON syntax specifications, as follows
The code copy 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, while grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat is not installed. Three for three tasks
grunt-contrib-js syntax check
grunt-contrib-uglify compression, using UglifyJS
grunt-contrib-concat merge files
At this time, open the command line tool and enter the project root directory, and type the following command: npm install
Check the root directory again and found that there is an additional node_modules directory, including four subdirectories, see 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, where any js code can be written instead of 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 way of writing Node.js. Use exports to expose the API
The code copy is as follows:
module.exports = function(grunt) {
// Do grunt-related things in here
};
Project and task configuration
Load grunt plugins and tasks
Customize tasks execution
This example completes the following tasks
Merge the files 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
The code copy 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 : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> *//n'
},
build : {
src : 'dest/domop.js',
dest : 'dest/domop.min.js'
}
}
});
// Load concat and uglify plugins, for merge and compression respectively
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// Register a task
grunt.registerTask('default', ['concat', 'uglify']);
};
4. Execute grunt tasks
Open the command line, enter the project root directory, and click grunt
From the printing information, it is seen that the successful merge and compression are generated and the dest directory and the expected files are generated. At this time, there is more dest in the project directory, as follows
OK, here are two common tasks, concat and uglify, jshint, etc., which are not introduced. The code in Gruntfile.js is not interpreted one by one. Interested students can find it in the official document of gruntjs.