I wrote a simple HTML5 Canvas chart Library, you can support pie, line, scatter, box diagram histogram, while supporting mouse prompts, drawing process animation effects. Finally, I want to put these multiple JS file into a JS file released, so my question came, how to make these JS files into a Ah, the group has a friend told me, gruntjs–javascript multiple file compilation, style check, link and compression artifacts. Google has finally helped me complete this task, as a primer, to share the process.
One what is Gruntjs
Do not want to translate English, you see its website bar->http://gruntjs.com/
Second: Installation and operation
It's official tutorials are not very clear, a bit of the first time to see the people in the fog. Let me summarize, Gruntjs.
is based on node.js with the dependent server. So first step is to download and install Node.js, download the address:
http://nodejs.org/download/
Step Two: Run the Install Grunt Command line tool-The purpose is to use the grunt command
Run only in Windows command line windows: NPM install-g grunt-cli. More specific explanations see here: http://gruntjs.com/getting-started
Step three: Create Project.json and gruntfile.js two files in the root directory of the project
Because grunt task runs depend on these two files.
Where the Project.json file method can be created from the command line: NMP init I created Project.json
The contents are as follows:
Copy Code code as follows:
{
"Name": "Fishchart",
"Version": "0.0.1",
"description": "HTML5 Canvas Chart Library",
"Author": "Zhigang",
"License": "BSD",
"Devdependencies": {
"Grunt": "~0.4.1",
"Grunt-contrib-uglify": "~0.2.2",
"Grunt-contrib-jshint": "~0.6.2",
"Grunt-contrib-concat": "~0.3.0"
}
}
Use the command to create the time if you do not know what to write direct return skip can be.
Third: Install and use grunt plug-in to complete JavaScript file linking and compression
1. Install JavaScript file link plugin support
NPM Install Grunt-contrib-concat--save-dev
2. Install JavaScript file Compression plugin support
NPM Install grunt-contrib-uglify--save-dev
3. Configure options in the Gruntfile.js file to load and define tasks
Copy Code code as follows:
Module.exports = function (grunt) {
Grunt.initconfig ({
Our Jshint options
Jshint: {
All: [' main.js ']//files to lint
},
Our concat options
Concat: {
Options: {
Separator: '; '//separates scripts
},
Dist: {
SRC: [' js/*.js ', ' js/**/*.js '],//grunt mini match for your scripts to concatenate
Dest: ' js/fishchart_v0.0.1.js '//where to output the script
}
},
Our uglify options
Uglify: {
JS: {
Files: {
' Js/fishchart_v0.0.1.js ': [' js/fishchart_v0.0.1.js ']//save over the newly created script
}
}
}
});
Load our Tasks
Grunt.loadnpmtasks (' Grunt-contrib-jshint ');
Grunt.loadnpmtasks (' Grunt-contrib-concat ');
Grunt.loadnpmtasks (' grunt-contrib-uglify ');
Default Tasks to run
Grunt.registertask (' Default ', [' jshint ', ' concat ', ' uglify ']);
Grunt.registertask (' development ', [' jshint ']);
Grunt.registertask (' Production ', [' jshint ', ' concat ', ' uglify ']);
}
Four: The results of the operation
Finally want to praise, this thing is too easy to use!
