Grunt環境部署_3

（本文是基於HKUST的NodeJS課程Grunt部分的學習筆記）

目前，我們已經在grunt中添加了JSHint這一Task，下面我們將繼續添加一些。

第一步，對HTML中的頁面引用信息做適當標註，下面爲一個示例：

<!-- build:css styles/main.css -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- endbuild -->

<!-- build:js scripts/main.js -->
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="scripts/main.js"></script>
<!-- endbuild -->

第二步，導入我們需要的7個module，在一級目錄下運行：

npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-filerev --save-dev
npm install grunt-usemin --save-dev

grunt-contrib-copy用於將我們需要的文件拷貝至dist文件夾（發佈文件夾）下；
grunt-contrib-clean用於在重新生成發佈文件前清理dist文件夾；
grunt-contrib-concat用於將所有css文件和js文件分別合併爲一個css與js文件；
grunt-contrib-cssmin用於刪除發佈文件中的空白符，壓縮css文件；
grunt-contrib-uglify用於進一步壓縮文件，將變量由短變量代替等等工作；
grunt-filerev用於不斷更新生成最終的文件名，防止用戶瀏覽器使用緩存的過期js文件或css文件；
grunt-usemin用於實現html文件中的鏈接更新等等工作；

成功運行後，package.json文件如下所示：

{
    "name": "gruntTest",
    "private": true,
    "devDependencies": {
        "grunt": "^1.0.1",
        "grunt-contrib-clean": "^1.0.0",
        "grunt-contrib-concat": "^1.0.0",
        "grunt-contrib-copy": "^1.0.0",
        "grunt-contrib-cssmin": "^1.0.1",
        "grunt-contrib-jshint": "^1.0.0",
        "grunt-contrib-uglify": "^1.0.1",
        "grunt-filerev": "^2.3.1",
        "grunt-usemin": "^3.1.1",
        "jit-grunt": "^0.10.0",
        "jshint-stylish": "^2.1.0",
        "time-grunt": "^1.3.0"
    },
    "engines": {
        "node": ">=0.10.0"
    }
}

第三步，修改Gruntfile.js配置文件，如下所示：

'use strict';

module.exports = function(grunt) {

    require('time-grunt')(grunt);
    require('jit-grunt')(grunt, {
        useminPrepare: 'grunt-usemin'
    });

    // Define the configuration for all the tasks
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        jshint: {
            options: {
                jshintrc: '.jshintrc',
                reporter: require('jshint-stylish')
            },
            all: {
                src: ['Gruntfile.js', 'app/scripts/{,*/}*.js']
            }
        },

        copy: {
            dist: {
                cwd: 'app',
                src: ['**', '!styles/**/*.css', '!scripts/**/*.js'],
                dest: 'dist',
                expand: true
            },
            fonts: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: 'bower_components/bootstrap/dist',
                    src: ['fonts/*.*'],
                    dest: 'dist'
                },
                {
                    expand: true,
                    dot: true,
                    cwd: 'bower_components/font-awesome',
                    src: ['fonts/*.*'],
                    dest: 'dist'
                }]
            }
        },

        clean: {
            build: {
                src: ['dist/']
            }
        },

        useminPrepare: {
            html: 'app/index.html',
            options: {
                dest: 'dist'
            }
        },

        concat: {
            options: {
                separator: ';'
            },
            dist: {}
        },

        uglify: {
            dist: {}
        },

        cssmin: {
            dist: {}
        },

        filerev: {
            options: {
                encoding: 'utf8',
                algorithm: 'md5',
                length: 20
            },
            release: {
                files: [{
                    src: ['dist/scripts/*.js', 'dist/styles/*.css', ]
                }]
            }
        },

        usemin: {
            html: ['dist/*.html'],
            css: ['dist/styles/*.css'],
            options: {
                assetsDirs: ['dist', 'dist/styles']
            }
        },
    });

    grunt.registerTask('build', ['clean', 'jshint', 'useminPrepare', 'concat', 'cssmin', 'uglify', 'copy', 'filerev', 'usemin']);

    grunt.registerTask('default', ['build']);

};

可以發現，我們已經將新添加的7個Module寫入配置文件（usemin佔用2個Task），並且按照需要的執行順序，對總共9個Task進行了排序。
同時，因爲useminPrepare並非標準命令，我們在最前處對其進行了聲明。

最後，我們在一級目錄下運行grunt命令，可以看到上述Task依序執行，並最終生成dist發佈文件夾與一個.tmp文件夾。

至此，grunt主要功能部署完成。