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

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:

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)

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.