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主要功能部署完成。