Grunt-contrib-uglify

Grunt-contrib-uglify

Uglify is a file compression plug-in, project address: https://github.com/gruntjs/grunt-contrib-uglify

This article will show you how to use the Uglify plugin with a demo.

Demo Environment

Package.json:

{  "name": "Grunt-demo",  "version": "0.1.0",  "Devdependencies": {    "grunt": "~0.4.2",    " Grunt-contrib-jshint ":" ~0.6.0 ",    " Grunt-contrib-nodeunit ":" ~0.2.0 ",    " grunt-contrib-uglify ":" ~0.2.2 "  }}

Demo File Structure:

Where the JS folder is used to test, gruntfile.js later introduced, wherein the a.js content is as follows:

(function () {    //output Hello grunt    var hellogrunt = "Hello grunt!" ( from A.js) ";    Console.log (Hellogrunt);}) ();

B.js content is as follows:

(function () {    //output Hello world    var helloWorld = "Hello world! ( from B.js) ";    Console.log (HelloWorld);}) ();

Let's configure four tasks:

• Compress a.js, do not confuse variable names, keep annotations, add banner and Footer
• Compression b.js, output compression information
• Compress all JS files in JS folder according to the original file structure
• Merging compressed a.js and B.js

Gruntfile.js

Now take a look at the configuration of these four tasks directly through Gruntfile.js:

Module.exports = function (grunt) {//project configuration Grunt.initconfig ({pkg:grunt.file.readJSON (' Package.json '), Uglify: {options: {banner: '/*! <%= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd ")%> */\n '//Add banner}, Builda: {//Task one: Compress a.js, do not confuse variable names, keep annotations, add banner and footer options : {mangle:false,//Do not confuse variable name preservecomments: ' All ',//Do not delete comments, can also be false (remove all comments), some (keep notes such as @preserve @license @cc_on) footer: ' \n/*!                <%= pkg.name%> Last modified: <%= grunt.template.today ("YYYY-MM-DD")%> */'//Add footer}, Files: {' output/js/a.min.js ': [' Js/a.js '}}, buildb:{//task two: compression                B.js, output compression information options: {report: "min"//output compression rate, optional value has false (not output information), gzip}, Files: {' output/js/b.min.js ': [' js/main/b.js ']               }}, Buildall: {//Task three: Compress all JS files in JS folder according to the original file structure files: [{ Expand:true, CWD: ' JS ',//js directory src: ' **/*.js ',//All JS file dest: ' Out                    Put/js '//output to this directory}]}, Release: {//Task IV: Merge compressed a.js and B.js files: {    ' Output/js/index.min.js ': [' js/a.js ', ' Js/main/b.js '}}}});    Load the plugin grunt.loadnpmtasks (' grunt-contrib-uglify ') that provides the "uglify" task;    Default task Grunt.registertask (' Default ', [' uglify:release ']);    Grunt.registertask (' Mina ', [' Uglify:builda ']);    Grunt.registertask (' minb ', [' uglify:buildb ']); Grunt.registertask (' Minall ', [' Uglify:buildall ']);}

With the code above, it is easy to see how the above four tasks are configured.

Run results

Task one: Compress a.js, do not confuse variable names, keep annotations, add banner and Footer

Run the grunt Mina command, and the resulting a.min.js is as follows:

/*! Grunt-demo 2013-11-29 */!function () {//output Hello gruntvar hellogrunt= "Hello grunt! ( from A.js) "; Console.log (Hellogrunt)} ();/*! Grunt-demo Last modified: 2013-11-29 */

is consistent with our goals.

Task two: Compress b.js, output compression information

Run the Grunt minb command, and the resulting b.min.js is as follows:

/*! Grunt-demo 2013-11-29 */!function () {var a= "Hello world! ( from B.js) "; Console.log (A)} ();

Command execution Status:

We can see the output of the compressed information

Task three: Compress all JS files in JS folder according to the original file structure

Run the Grunt Minall command, and the resulting directory structure is as follows:

Where A.min.js and B.min.js are task one and task two generated, the compressed output/js/a.js content is as follows:

/*! Grunt-demo 2013-11-29 */!function () {var a= "Hello grunt! ( from A.js) "; Console.log (A)} ();

Output/js/main/b.js content is as follows:

/*! Grunt-demo 2013-11-29 */!function () {var a= "Hello world! ( from B.js) "; Console.log (A)} ();

Task four: Merging compressed a.js and B.js

Run the grunt command, and the resulting output/index.min.js content is as follows:

/*! Grunt-demo 2013-11-29 */!function () {var a= "Hello grunt! ( from A.js) "; Console.log (A)} (), function () {var a=" Hello world! ( from B.js) "; Console.log (A)} ();

Artwl

Source: http://artwl.cnblogs.com

This article starts the blog garden, the copyright belongs to the author and the blog Garden altogether. Reprint must retain this paragraph of the statement, and prominently in the page to give a link to this article, otherwise reserves the right to pursue legal responsibility.

Grunt-contrib-uglify