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壓縮

module.exports = function (grunt) {

  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  grunt.initConfig({

    //清除目錄
    clean: {
      all: ['dist/html/**', 'dist/*.*'],
      image: 'dist/html/images',
      css: 'dist/html/css',
      html: 'dist/html/**/*'
    },

    copy: {
      src: {
        files: [
          {expand: true, cwd: 'src', src: ['*.html'], dest: 'dist/html'}
        ]
      },
      image: {
        files: [
          {expand: true, cwd: 'src', src: ['images/*.{png,jpg,jpeg,gif}'], dest: 'dist/html'}
        ]
      }
    },

    // 文件合併
    concat: {
      options: {
        separator: ';',
        stripBanners: true
      },
      js: {
        src: [
          "src/js/*.js"
        ],
        dest: "dist/html/js/app.js"
      },
      css:{
        src: [
          "src/css/*.css"
        ],
        dest: "dist/html/css/main.css"
      }
    },

    //壓縮JS
    uglify: {
      prod: {
        options: {
          mangle: {
            except: ['require', 'exports', 'module', 'window']
          },
          compress: {
            global_defs: {
              PROD: true
            },
            dead_code: true,
            pure_funcs: [
              "console.log",
              "console.info"
            ]
          }
        },

        files: [{
            expand: true,
            cwd: 'dist/html',
            src: ['js/*.js', '!js/*.min.js'],
            dest: 'dist/html'
        }]
      }
    },

    //壓縮CSS
    cssmin: {
      prod: {
        options: {
          report: 'gzip'
        },
        files: [
          {
            expand: true,
            cwd: 'dist/html',
            src: ['css/*.css'],
            dest: 'dist/html'
          }
        ]
      }
    },

    //壓縮圖片
    imagemin: {
      prod: {
        options: {
          optimizationLevel: 7,
          pngquant: true
        },
        files: [
          {expand: true, cwd: 'dist/html', src: ['images/*.{png,jpg,jpeg,gif,webp,svg}'], dest: 'dist/html'}
        ]
      }
    },

    // 處理html中css、js 引入合併問題
    usemin: {
      html: 'dist/html/*.html'
    },

    //壓縮HTML
    htmlmin: {
      options: {
        removeComments: true,
        removeCommentsFromCDATA: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: true,
        removeAttributeQuotes: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeOptionalTags: true
      },
      html: {
        files: [
          {expand: true, cwd: 'dist/html', src: ['*.html'], dest: 'dist/html'}
        ]
      }
    }

  });


  grunt.registerTask('prod', [
    'copy',                 //複製文件
    'concat',               //合併文件
    'imagemin',             //圖片壓縮
    'cssmin',               //CSS壓縮
    'uglify',               //JS壓縮
    'usemin',               //HTML處理
    'htmlmin'               //HTML壓縮
  ]);

  grunt.registerTask('publish', ['clean', 'prod']);
};

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>