Grunt automated deployment of CSS, image, JavaScript, HTML compression gruntfile.js configuration (Learn reprint)

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:

1234567891011121314151617181920212223242526272829303132333435363738

{  "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

  1 module.exports = function (Grunt) {2 3 require (' MATCHDEP '). Filterdev (' grunt-* '). ForEach (Grunt.loadnpmtasks); 4 5 grunt.initconfig ({6 7//Clear Directory 8 clean: {9 all: [' dist/html/** ', ' dist/*.* '], Image: ' Dist/html/images ', one-to-one CSS: ' dist/html/css ', HTML: ' dist/html/**/* ', + copy: {+ SR       C: {files: [Expand:true, CWD: ' src ', src: [' *.html '], dest: ' dist/html '} 19] 20 }, Image: {[]: [Expand:true, CWD: ' src ', src: [' images/*.{ Png,jpg,jpeg,gif} '], dest: ' dist/html '} 24] 25} 26}, 27 28//File merge concat: {opt           Ions: {separator: '; ', stripbanners:true}, + JS: {+-src: [36           "Src/js/*.js" (PNS), dest: "Dist/html/js/app.js", Max css:{-src: [42 "Src/css/*.css", dest: "Dist/html/css/main.css" 45} 46}, 47 48//Compression JS uglify: {prod: {The options: { Mangle: {except: [' require ', ' exports ', ' module ', ' Window '] si, comp             Ress: {global_defs: {prod:true], dead_code:true, 60         Pure_funcs: ["Console.log", "Console.info" 63] 64} 65 }, the following: [{expand:true, CWD: ' dist/html ', + src: [' js /*.js ', '!js/*.min.js '], dest: ' dist/html ' 72}] 73} 74}, 75 76//compression CSS in CSS  Min: {prod: {+ options: {report: ' gzip ' Bayi}, [83] Expand:true, the "dist/html", the "Css/*.css", "dest": "Di St/html ' 88}89] 90} 91}, 92 93//Compressed Image 94 Imagemin: {prod: {97 options: Optimizationlevel:7, 98 pngquant:true},100 files: [101 {expand:true, CWD: ' Dis T/html ', src: [' images/*.{     Png,jpg,jpeg,gif,webp,svg} '], dest: ' dist/html '}102]103}104},105 106//processing HTML in CSS, JS introduces merging issues 107         Usemin: {108 HTML: ' dist/html/*.html ' 109},110 111//Compression HTML112 Htmlmin: {113 options: {114 removecomments:true,115 removecommentsfromcdata:true,116 collapsewhitespace:true,117 Collap         sebooleanattributes:true,118 removeattributequotes:true,119 removeredundantattributes:true,120 useshortdoctype:true,121 removeemptyattributes:true,122 removeoptionaltags:true123},124 HT ML: {126 files: [Expand:true, CWD: ' dist/html ', src: [' *.html '], dest: ' dist/html '}127]}129}130 131}); 133 134 Grunt.registertask (' prod ', [135 ' Copy ',//Copy File 136 ') Concat ',//merge file 137 ' imagemin ',//image compression 138 ' cssmin ',//css compress 139 ' uglify ' ,//js compression usemin ',//html processing 141 ' htmlmin '//html compression 142]); 143 144 g Runt.registertask (' Publish ', [' Clean ', ' prod ']); 145};

Index.html before release:

123456789101112131415161718192021

<!DOCTYPEhtml><html><head>    <title>Grunt 测试</title>    <metacharset="utf-8">    <!-- build:css css/main.css -->    <linkrel="stylesheet" href="css/common.css">    <linkrel="stylesheet" href="css/web.css">    <!-- endbuild -->    <!-- build:js js/main.js -->    <scriptsrc="js/zepto.js"></script>    <scriptsrc="js/common.js"></script>    <scriptsrc="js/service.js"></script>    <!-- endbuild --></head><body><p></p>Hello,Grunt!</body></html>

After executing grunt publish:

<! DOCTYPE html>

Grunt automated deployment of CSS, image, JavaScript, HTML compression gruntfile.js configuration (Learn reprint)