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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.