How to make multiple JS files into one? GruntJS-JavaScript multi-file compilation, style check, linking and compression artifacts. The usage process is as follows. If you need it, refer to it, I hope to help you write a simple HTML5 Canvas chart library. It supports pie chart, line chart, scatter chart, and box chart column chart. It also supports mouse prompts, animation effects during painting. In the end, I wanted to turn these multiple JS files into one JS file and publish it. So my question is, how can I turn these JS files into one? A group of friends told me, gruntJS-JavaScript multi-file compilation, style check, links and compression artifacts. Google finally helped me complete this task. This is an entry. Let's share the process.
1. What is GruntJS?
I don't want to translate english, look at its own website it-> http://gruntjs.com/
Ii. Installation and Operation
Its official tutorial is not very clear, and it is a bit confusing for the first time. To sum up, GruntJS
It is based on and depends on the server node. js. So the first step is to download and install node. js ,:
Http://nodejs.org/download/
Step 2: Run and install the grunt command line tool to use the grunt command
Run npm install-g grunt-cli in the command line window of windows. For more specific explanations, see here: http://gruntjs.com/getting-started
Step 3: create two files, project. json and Gruntfile. js, in the project root directory.
Because grunt tasks depend on these two files.
The method for creating the project. json file can be implemented through the command line: nmp init I created the project. json
The content is as follows:
The Code is 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"
}
}
If you do not know what to write during command creation, press enter to skip.
Iii. install and use Grunt Plug-in to link and compress javascript files
1. Install javascript file link plug-in support
Npm install grunt-contrib-concat -- save-dev
2. Install javascript file compression plug-in support
Npm install grunt-contrib-uglify -- save-dev
3. Configure options in the Gruntfile. js file to load and define tasks
The Code is 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']);
}
Iv. Running results
Finally, I would like to give a thumbs up. This is so easy to use!
