Detailed explanation of the process of linking and compressing multiple JavaScript files using GruntJS

Detailed explanation of the process of linking and compressing multiple JavaScript files using GruntJS_javascript skills

WBOY

Release： 2016-05-16 17:26:57

Original

1227 people have browsed it

I wrote a simple HTML5 Canvas chart library, which can support pie charts, line charts, scatter charts, box charts, and histograms. It also supports mouse prompts, drawing process animation effects, etc. Finally, I want to turn these multiple JS files into one JS file and publish it, so my question is, how to turn these JS files into one. A friend in the group told me, GruntJS – JavaScript multi-file compilation, style Check, link and compress artifacts. After a lot of searching on Google, it finally helped me complete this task. I’m getting started and I’d like to share the process.

One: What is GruntJS
If you don’t want to translate it into English, just read its website yourself ->http://gruntjs.com/
Two: Installation and operation
Its official tutorial says It's not very clear, and it's a bit confusing for people watching it for the first time. Let me summarize, GruntJS
is based on and depends on the server node.js. So the first step is to download and install node.js, download address:
http://nodejs.org/download/

The second step: run and install the grunt command line tool – the purpose is to use The grunt command
can only be run in the Windows command line window: npm install -g grunt-cli. For a more specific explanation, see here: http://gruntjs.com/getting-started

Step 3: Create two files, project.json and Gruntfile.js, in the root directory of the project
Because of grunt Task running depends on these two files.
The method of creating the project.json file can be achieved through the command line: nmp init I created project.json
The content is as follows:

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

When using the command to create, if you don’t know what to write, just press Enter to skip.

Three: Install and use Grunt Plug-in to complete javascript file linking and compression
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, load and define tasks

Copy code 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 ']); 
} 