Grunt-based version number building System Novice Tutorial

  Zhanhailiang Date: 2014-10-12

1. Install the NODEJS,NPM,GRUNT-CLI. See Installing the NODEJS+NPM+GRUNT-CLI tool in the Windows environment.

2. Create a new test project folder such as the following:

Among the file templates are as follows:

Src/index.js

varA= 1;varB= 2;functionTest() {Alert(1);}varTest2= function() {    return 3;};Test();Test2();

Package.json (the template can be used first for introductory learning)

{  "name": "Test",  "version": "1.0.0", "  description": "Test",  "author": "",  "dependencies": {},  "Devdependencies": {  }}

Gruntfile.js (Implementation of JS compression build Task)

Module.exports = function(Grunt) {    //ConfigurationGrunt.initconfig({Pkg:Grunt.file.Readjson(' Package.json '),Uglify: {Build: {Src: ' Src/index.js ',Dest: ' Dest/index.min.js '            }        }    });Grunt.Loadnpmtasks(' grunt-contrib-uglify ');    //Register default TasksGrunt.Registertask(' Default ', [' uglify ']);}; 

3. Run the npm install Grunt-contrib-uglify–save-dev installation of the corresponding dependency module under the current test Project root folder (Note: – Save-dev will rely on the module to proactively update to the Package.json file):

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvymlsbgzlbgxlcg==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/southeast ">

4. Run the grunt build task under the current Test folder to achieve version number build task:

5. This version number task build is complete. Be able to notice that the corresponding compressed file is generated under the Dest folder:

This simple tutorial can be used to implement CSS compression, HTML compression, image compression and other related version number construction tasks.

In short, Grunt's function is quite powerful, perhaps I will continue to share about grunt more specific tutorials.

Documentation for references

1. Getting started
2. Building a Web program using GRUNTJS (2)

Appendix

It is recommended to use the Grunt-init tool to create your own projects, now officially maintain the following list of templates:

2. Grunt-init-commonjs-create a commonjs module, including Nodeunit unit tests.
4. Grunt-init-gruntfile-create a basic gruntfile.
6. Grunt-init-gruntplugin-create a grunt plugin, including Nodeunit unit tests.
8. Grunt-init-jquery-create a jquery plugin, including Qunit unit tests.
10. Grunt-init-node-create a node. js module, including Nodeunit unit tests.

Grunt-based version number building System Novice Tutorial