Grunt automated deployment of CSS, image, JavaScript, HTML compression gruntfile.js configuration

Grunt.initconfig method

For a module configuration, it accepts an object as a parameter. The members of this object correspond to module one by one, which uses the same name.

The specific settings for each target need to refer to the documentation for that template. In terms of cssmin, the parameters of the minify target are as follows:

• Expand: If set to True, the placeholder (that is, *) of the following file name is extended to a specific file name.
• CWD: The directory where the file (input) needs to be processed.
• src: Represents a file that needs to be processed. If an array is used, each item of the array is a file name, and wildcard characters can be used.
• dest: Indicates the file name or directory in which it was processed.
• ext: Indicates the file suffix name after processing.

Grunt Common Function Description:

Grunt.initconfig: Defines parameters for various modules, each of which corresponds to a module of the same name.
Grunt.loadnpmtasks: Loads the modules required to complete the task.
Grunt.registertask: Defines a specific task. The first parameter is the task name, and the second argument is an array that represents the module that the task needs to use in sequence.

Grunt Common modules:

• grunt-contrib-clean: Delete files.
• grunt-contrib-compass: Compile the Sass file with Compass.
• grunt-contrib-concat: Merge files.
• grunt-contrib-copy: Copy the file.
• grunt-contrib-cssmin: Compress and merge CSS files.
• grunt-contrib-imagemin: Image compression module.
• grunt-contrib-jshint: check JavaScript syntax.
• grunt-contrib-uglify: Compresses and merges JavaScript files.
• grunt-contrib-watch: Monitor file changes and make corresponding actions.

Package.json Package Dependency Relationship:

{  "name": "Grunt-study",  "version": "1.0.0",  "description": "Study",  "main": "Index.js",  " Scripts ": {    " test ":" Test "  },  " repository ": {    " type ":" Git ",    " url ":" Https://github.com/hubcarl "  },  " Devdependencies ": {    " MATCHDEP ":" Latest ","    Shelljs ":" Latest ",    " Ngmshell ":" Latest " ,    "Grunt": "Latest",    "Grunt-contrib-clean": "Latest",    "Grunt-contrib-concat": "Latest",    " Grunt-contrib-copy ":" Latest ",    " Grunt-contrib-connect ":" Latest ",    " Grunt-contrib-htmlmin ":" Latest ",    "Grunt-contrib-cssmin": "Latest",    "Grunt-contrib-imagemin": "Latest",    "grunt-contrib-uglify": " Latest ",    " Grunt-contrib-watch ":" Latest ",    " Grunt-usemin ":" Latest ",    " Connect-livereload ":" Latest "  },  "keywords": [    "Grunt"  ],  "author": "BlueSky",  "license": "Bsd-2-clause",  " Bugs ": {    " url ":" Https://github.com/hubcarl "  }}

　　

Gruntfile.js Configuring CSS, image, JavaScript, HTML compression

1Module.exports =function(grunt) {2 3Require (' MATCHDEP '). Filterdev (' grunt-* ')). ForEach (grunt.loadnpmtasks);4 5 Grunt.initconfig ({6 7     //Clear Directory8 Clean : {9All: [' dist/html/** ', ' dist/*.* '],TenImage: ' Dist/html/images ', OneCSS: ' Dist/html/css ', AHTML: ' dist/html/**/* ' -     }, -  the copy: { - src: { - files: [ -{Expand:true, CWD: ' src ', src: [' *.html '], dest: ' dist/html '} +         ] -       }, + Image: { A files: [ at{Expand:true, CWD: ' src ', src: [' images/*.{ Png,jpg,jpeg,gif} '], dest: ' dist/html '} -         ] -       } -     }, -  -     //file Merge in concat: { - options: { toSeparator: '; ', +Stripbanners:true -       }, the JS: { * src: [ $"Src/js/*.js"Panax Notoginseng         ], -Dest: "Dist/html/js/app.js" the       }, + css:{ A src: [ the"Src/css/*.css" +         ], -Dest: "Dist/html/css/main.css" $       } $     }, -  -     //Compression JS the uglify: { - prod: {Wuyi options: { the mangle: { -Except: [' require ', ' exports ', ' module ', ' Window '] Wu           }, - Compress: { About global_defs: { $PROD:true -             }, -Dead_code:true, - Pure_funcs: [ A"Console.log", +"Console.info" the             ] -           } $         }, the  the files: [{ theExpandtrue, theCWD: ' dist/html ', -SRC: [' js/*.js ', '!js/*.min.js '], inDest: ' dist/html ' the         }] the       } About     }, the  the     //Compress CSS the cssmin: { + prod: { - options: { theReport: ' gzip 'Bayi         }, the files: [ the           { -Expandtrue, -CWD: ' dist/html ', theSRC: [' css/*.css '], theDest: ' dist/html ' the           } the         ] -       } the     }, the  the     //Compress Pictures94 imagemin: { the prod: { the options: { theOptimizationlevel:7,98Pngquant:true About         }, - files: [101{Expand:true, CWD: ' dist/html ', src: [' images/*.{ Png,jpg,jpeg,gif,webp,svg} '], dest: ' dist/html '}102         ]103       }104     }, the 106     //dealing with CSS, JS introduces merging problems in HTML107 usemin: {108HTML: ' dist/html/*.html '109     }, the 111     //Compress HTML the htmlmin: {113 options: { theRemovecomments:true, theRemovecommentsfromcdata:true, theCollapsewhitespace:true,117Collapsebooleanattributes:true,118Removeattributequotes:true,119Removeredundantattributes:true, -Useshortdoctype:true,121Removeemptyattributes:true,122Removeoptionaltags:true123       },124 HTML: { the files: [126{Expand:true, CWD: ' dist/html ', src: [' *.html '], dest: ' dist/html '}127         ] -       }129     } the 131   }); the 133 134Grunt.registertask (' prod ', [135' Copy ',//Copying Files136' Concat ',//Merging Files137' Imagemin ',//image Compression138' Cssmin ',//CSS Compression139' Uglify ',//JS Compression $' Usemin ',//HTML processing141' Htmlmin '//HTML Compression142   ]);143 144Grunt.registertask (' Publish ', [' Clean ', ' prod ']);145};

Index.html before release:

<! DOCTYPE html>
After executing grunt publish:
<! DOCTYPE html>
Home: http://appshow.sinaapp.com/
Grunt automated deployment of CSS, image, JavaScript, HTML compression gruntfile.js configuration