Grunt compressing multiple JS files and CSS files

The project catalog before compression:

1, install JS,CSS required plug-in

Installing with NPM: NPM install grunt-contrib-uglify--save-dev--------> Install JS compression plugin

NPM install grunt-contrib-cssmin--save-dev--------> Installing CSS Compression plug-ins

After manual installation, in the Package.json file, the "Grunt-contrib-uglify" is automatically added, and is the latest version of the current grunt-contrib-uglify, as in the Package.json file below the red part,

"Grunt-contrib-cssmin" is in the same vein.

Or add a configuration to the Package.json:

{  "Name": "Dailybook",  "Version": "0.0.0",  "Private":true,  "Scripts": {    "Start": "Node./bin/www"  },  "Dependencies": {    "Body-parser": "~1.13.1",    "Cookie-parser": "~1.3.5",    "Debug": "~2.2.0",    "Ejs": "~2.3.2",    "Express": "~4.13.0",    "Morgan": "~1.6.1",    "Serve-favicon": "~2.3.0"  },  "Devdependencies": {    "Grunt": "^0.4.5",    "Grunt-contrib-cssmin": "^0.12.3", "grunt-contrib-uglify": "^0.9.1"  },  "Main": "App.js",  "Author": "",  "License": "ISC"}

Then NPM install.

2. Create Gruntfile.js file, configure grunt:

1Module.exports =function(grunt) {2     //project Configuration3 Grunt.initconfig ({4         //read the Package.json file to form JSON data;5Pkg:grunt.file.readJSON (' Package.json '),6         //compression js;7 uglify: {8             //The output information of the header in the compressed file, the options are optional;9 options: {TenBanner'/*! <%= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n ' One             }, A             //When only one file needs to be compressed, you can write the code as follows - //Build: { - //src: ' src/<%=pkg.file%>.js ', the //dest: ' dest/<%= pkg.file%>.min.js ' - //            } - my_target:{ - files:[ +                     { -Expandtrue,//indicates the use of relative paths +Cwd"src/",//root directory of relative paths ASrc:"*.js",//A file that needs to be compressed relative to the path, * represents all files of that suffix type, and writes that a specific file will be compressed atDest"Dest/js"//The compressed file needs to be placed in the directory, and if it does not exist, it will automatically create -                     } -                 ] -             } - /************ If a few specific files need to be compressed, the wording is as follows *********/ - /* in my_target:{ - files:[ to                     { + expand:true,//Relative Path - CWD: "src/", the src: ' test.js ', * dest: "Dest/js" $                     },Panax Notoginseng                     { - expand:true,//Relative Path the CWD: "src/", + src: ' zepto.js ', A dest: "Dest/js" the                     } +                 ] -             } $  $ */ -         }, -         //Compress CSS the cssmin:{ - options:{Wuyi                 //post-Compressed CSS file header information, options optional theBanner'/*! <%= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n ', -Ascii_only:true//Chinese ASCII landscaping to prevent Chinese garbled characters Wu             }, - my_target:{ About files:[ $                     { -Expandtrue,//indicates the use of relative paths -Cwd"src/",//root directory of relative paths -Src:"*.css",//A file that needs to be compressed relative to the path, * represents all files of that suffix type, and writes that a specific file will be compressed ADest"Dest/css"//The compressed file needs to be placed in the directory, and if it does not exist, it will automatically create +                     } the                 ] -             } $  the         } the     }); the     //load the specified plug- in theGrunt.loadnpmtasks (' grunt-contrib-uglify ');//compress js file; -Grunt.loadnpmtasks (' Grunt-contrib-cssmin ');//compress CSS files; in  the  the     //the default task to perform AboutGrunt.registertask (' Default ', [' uglify ',' Cssmin ']); the}

3, enter the command grunt run. The result is that the file is automatically compressed and the appropriate file directory is generated:

Post-compressed Project catalog:

Grunt compressing multiple JS files and CSS files