Grunt 自動化部署之css、image、javascript、html壓縮Gruntfile.js配置

grunt.initConfig方法

用於模塊配置，它接受一個對象作爲參數。該對象的成員與使用的同名模塊一一對應。

每個目標的具體設置，需要參考該模板的文檔。就cssmin來講，minify目標的參數具體含義如下：

expand：如果設爲true，就表示下面文件名的佔位符（即*號）都要擴展成具體的文件名。
cwd：需要處理的文件（input）所在的目錄。
src：表示需要處理的文件。如果採用數組形式，數組的每一項就是一個文件名，可以使用通配符。
dest：表示處理後的文件名或所在目錄。
ext：表示處理後的文件後綴名。

grunt常用函數說明：

grunt.initConfig：定義各種模塊的參數，每一個成員項對應一個同名模塊。
grunt.loadNpmTasks：加載完成任務所需的模塊。
grunt.registerTask：定義具體的任務。第一個參數爲任務名，第二個參數是一個數組，表示該任務需要依次使用的模塊。

grunt常用模塊：

grunt-contrib-clean：刪除文件。
grunt-contrib-compass：使用compass編譯sass文件。
grunt-contrib-concat：合併文件。
grunt-contrib-copy：複製文件。
grunt-contrib-cssmin：壓縮以及合併CSS文件。
grunt-contrib-imagemin：圖像壓縮模塊。
grunt-contrib-jshint：檢查JavaScript語法。
grunt-contrib-uglify：壓縮以及合併JavaScript文件。
grunt-contrib-watch：監視文件變動，做出相應動作。

package.json 包依賴關係：

{

  "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配置css、image、javascript、html壓縮

  1 module.exports = function (grunt) {
  2 
  3   require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
  4 
  5   grunt.initConfig({
  6 
  7     //清除目錄
  8     clean: {
  9       all: ['dist/html/**', 'dist/*.*'],
 10       image: 'dist/html/images',
 11       css: 'dist/html/css',
 12       html: 'dist/html/**/*'
 13     },
 14 
 15     copy: {
 16       src: {
 17         files: [
 18           {expand: true, cwd: 'src', src: ['*.html'], dest: 'dist/html'}
 19         ]
 20       },
 21       image: {
 22         files: [
 23           {expand: true, cwd: 'src', src: ['images/*.{png,jpg,jpeg,gif}'], dest: 'dist/html'}
 24         ]
 25       }
 26     },
 27 
 28     // 文件合併
 29     concat: {
 30       options: {
 31         separator: ';',
 32         stripBanners: true
 33       },
 34       js: {
 35         src: [
 36           "src/js/*.js"
 37         ],
 38         dest: "dist/html/js/app.js"
 39       },
 40       css:{
 41         src: [
 42           "src/css/*.css"
 43         ],
 44         dest: "dist/html/css/main.css"
 45       }
 46     },
 47 
 48     //壓縮JS
 49     uglify: {
 50       prod: {
 51         options: {
 52           mangle: {
 53             except: ['require', 'exports', 'module', 'window']
 54           },
 55           compress: {
 56             global_defs: {
 57               PROD: true
 58             },
 59             dead_code: true,
 60             pure_funcs: [
 61               "console.log",
 62               "console.info"
 63             ]
 64           }
 65         },
 66 
 67         files: [{
 68             expand: true,
 69             cwd: 'dist/html',
 70             src: ['js/*.js', '!js/*.min.js'],
 71             dest: 'dist/html'
 72         }]
 73       }
 74     },
 75 
 76     //壓縮CSS
 77     cssmin: {
 78       prod: {
 79         options: {
 80           report: 'gzip'
 81         },
 82         files: [
 83           {
 84             expand: true,
 85             cwd: 'dist/html',
 86             src: ['css/*.css'],
 87             dest: 'dist/html'
 88           }
 89         ]
 90       }
 91     },
 92 
 93     //壓縮圖片
 94     imagemin: {
 95       prod: {
 96         options: {
 97           optimizationLevel: 7,
 98           pngquant: true
 99         },
100         files: [
101           {expand: true, cwd: 'dist/html', src: ['images/*.{png,jpg,jpeg,gif,webp,svg}'], dest: 'dist/html'}
102         ]
103       }
104     },
105 
106     // 處理html中css、js 引入合併問題
107     usemin: {
108       html: 'dist/html/*.html'
109     },
110 
111     //壓縮HTML
112     htmlmin: {
113       options: {
114         removeComments: true,
115         removeCommentsFromCDATA: true,
116         collapseWhitespace: true,
117         collapseBooleanAttributes: true,
118         removeAttributeQuotes: true,
119         removeRedundantAttributes: true,
120         useShortDoctype: true,
121         removeEmptyAttributes: true,
122         removeOptionalTags: true
123       },
124       html: {
125         files: [
126           {expand: true, cwd: 'dist/html', src: ['*.html'], dest: 'dist/html'}
127         ]
128       }
129     }
130 
131   });
132 
133 
134   grunt.registerTask('prod', [
135     'copy',                 //複製文件
136     'concat',               //合併文件
137     'imagemin',             //圖片壓縮
138     'cssmin',               //CSS壓縮
139     'uglify',               //JS壓縮
140     'usemin',               //HTML處理
141     'htmlmin'               //HTML壓縮
142   ]);
143 
144   grunt.registerTask('publish', ['clean', 'prod']);
145 };

index.html發佈之前內容：

<!DOCTYPE html>

<html>

<head>

    <title>Grunt
測試</title>

    <meta charset="utf-8">

    <!--
build:css css/main.css -->

    <link rel="stylesheet"
href="css/common.css">

    <link rel="stylesheet"
href="css/web.css">

    <!--
endbuild -->

    <!--
build:js js/main.js -->

    <script src="js/zepto.js"></script>

    <script src="js/common.js"></script>

    <script src="js/service.js"></script>

    <!--
endbuild -->

</head>

<body>

<p></p>

Hello,Grunt!

</body>

</html>

執行grunt publish之後：

<!DOCTYPE html><html><head><title>Grunt 測試</title><meta charset=utf-8><link rel=stylesheet href=css/main.css><script src=js/main.js></script><body><p></p>Hello,Grunt<body><html>

主頁：http://appshow.sinaapp.com/