grunt之dev-pro环境切换

在项目开发过程中和发布阶段需要在开发环境(dev)和生产环境(pro)之间切换，静态文件引用的切换等等。

使用grunt要如何解决上述问题，这里提供一个案列供参考。

用到的grunt插件：

文件合并：grunt-contrib-concat

javascript压缩：grunt-contrib-uglify

css 压缩：grunt-css

临时文件清理：grunt-contrib-clean

javascript代码检测：grunt-contrib-jshint

文件替换插件：grunt-string-replace

根据内容是否变化生成有哈希值文件名插件：grunt-rev

插件的具体用法可以到npm官网查看：https://www.npmjs.org/

在dev与pro之间切换的时候我们需要把页面上引用的未压缩合并的静态文件（A）和压缩合并后的文件（B）进行对应的切换操作，并且当文件内容改变后需要重新生成新的压缩合并文件用来处理cdn缓存问题。

考虑到随时可以进行环境切换所以项目中静态文件保留两份A和B，

在view页面上引入静态文件的地方加上标记用来方便查找切换，比如：

<!-- grunt-import-css bootstripCss -->
<link href="/Css/dest/603d3616.bootstrip.min.css" rel="stylesheet" />

<!--/grunt-import -->

<!-- grunt-import-js mainJs -->
<script src="/Js/dest/3e083a76.main.min.js"></script>
<!--/grunt-import -->

标记自己配置的，只要方便查找就行。

在切换的时候遍历对应的文件夹里面所有的文件，查找文件里面出现匹配的标记，然后替换。（我这里用的是grunt-string-replace插件 ，也有类似其他的插件）

从dev切换到pro的时候需要检测压缩和的文件内容是否变化，变化了就生成对应的新的文件。

Gruntfile.js文件：

module.exports = function(grunt) {
    var fs = require('fs');

    // 配置
    var isDev = false;   //is develop

    var cssLink = '<link href="importUrl" rel="stylesheet" />',
        jsLink = '<script src="importUrl"></script>';
    //视图文件路径
    var viewPath = 'Views';
    //dev、pro环境对应静态文件关联配置
    var staticConfig = {
        'bootstripCss':{
            dev:[
                'Css/bootstrap.css',
                'Css/font-awesome.min.css'
            ],
            pro:'Css/dest/bootstrip.min.css'
        },
        'IEhtml5Js':{
            dev:[
                'Js/html5shiv.js',
                'Js/respond.min.js'
            ],
            pro:'Js/dest/IEhtml5Js.min.js'
        },
        'mainJs':{
            dev:['Js/Common.js',Js/main.js'],
            pro:'/Js/dest/main.min.js'
        }
    };

    //concatConfig合并配置  uglifyJsConfig js压缩配置  cssminConfig css压缩配置
    var concatConfig = {}, uglifyJsConfig = {}, cssminConfig = {};
    var fileType = 'js';
    var proFiles = [];  //所有生产环境文件
    for(var i in staticConfig){
        if(/css$/i.test(i)){
            fileType = 'css';
        }else if(/js$/i.test(i)){
            fileType = 'js';
        }
        proFiles.push(staticConfig[i]['pro']);
        //配置合并的文件
        concatConfig[i] = {
            'files' : {}  //{a:[b,c]} 目标文件，源文件
        };
        if(staticConfig[i]['options']){
            //合并配置项
            concatConfig[i]['options'] = staticConfig[i]['options'];
        }
        //合并的文件临时存放目录tmp
        concatConfig[i]['files']['tmp/concat/'+i+'.'+fileType] = staticConfig[i]['dev'].concat([]);
        //js 压缩
        if(fileType == 'js'){
            uglifyJsConfig[i] = {
                'files' : {}  //{a:[b,c]} 目标文件，源文件
            };
            uglifyJsConfig[i]['files'][staticConfig[i]['pro']] = ['tmp/concat/'+i+'.'+fileType];
            if(staticConfig[i]['options']){
                //压缩配置项
                uglifyJsConfig[i]['options'] = staticConfig[i]['options'];
            }else{
                uglifyJsConfig[i]['options'] = {
                    banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
                }
            }
        }else if(fileType == 'css'){
            //css 压缩
            cssminConfig[i] = {
                'files' : {}  //{a:[b,c]} 目标文件，源文件
            };
            cssminConfig[i]['files'][staticConfig[i]['pro']] = ['tmp/concat/'+i+'.'+fileType];
            if(staticConfig[i]['options']){
                //压缩配置项
                cssminConfig[i]['options'] = staticConfig[i]['options'];
            }
        }
    }
    //获取对应路径里的文件
    function getFileInfoFn(path){
        var fileInfo = [],
            files = fs.readdirSync(path);
        files.forEach(function(item) {
            var tmpPath = path + '/' + item;
            var stat = fs.lstatSync(tmpPath);
            if (!stat.isDirectory()){
                fileInfo.push({'file':tmpPath,'cTime':fs.statSync(tmpPath).ctime})
            } else {
                fileInfo = fileInfo.concat(getFileInfoFn(tmpPath));
            }
        });
        return fileInfo;
    }

    //视图文件
    var viewFiles = getFileInfoFn(viewPath);
    //replaceConfig 在切换dev、pro环境时需要替换文件路径的视图文件配置
    //gruntImportReg  替换的正则
    var gruntImportReg = /<!--s*grunt-import-w+s+w+s*-->[sS]*?<!--s*/grunt-imports*-->/ig;
    var gruntImportItemReg = /(<!--s*grunt-import-(w+)s+(w+)s*-->)([sS]*?)(<!--s*/grunt-imports*-->)/i;
    var replaceConfig = {
        'dist':{
            options: {
                replacements: [
                    {
                        pattern: gruntImportReg,
                        replacement: function(matchStr){
                            //搜索合并压缩的最新文件
                            var fileInfo = getFileInfoFn('/Js/dest').concat(getFileInfoFn('Css/dest'));
                            fileInfo = fileInfo.sort(function(a, b){
                                return a['cTime'] - b['cTime'];
                            })
                            for(var i in staticConfig){
                                var proFile = staticConfig[i]['pro'].split('/');
                                proFile = proFile[proFile.length -1].replace(/./g,'\.');
                                fileInfo.forEach(function(v, k){
                                    if(new RegExp("\."+proFile).test(v['file'])){
                                        staticConfig[i]['pro'] = v['file'];
                                        return false;
                                    }
                                })
                            }

                            gruntImportItemReg.lastIndex = 0;
                            var matchItem = matchStr.match(gruntImportItemReg);
                            var files = [], importLink = '',
                                ret = matchItem[1]+'
';
                            if(isDev){
                                files = staticConfig[matchItem[3]]['dev'];
                            }else{
                                files = [staticConfig[matchItem[3]]['pro']];
                            }
                            if(matchItem[2] == 'js'){
                                importLink = jsLink;
                            }else if(matchItem[2] == 'css'){
                                importLink = cssLink;
                            }
                            files.forEach(function(v, k){
                                ret += importLink.replace('importUrl', v);
                                ret += '
';
                            });
                            ret += matchItem[5];
                            return ret;
                        }
                    }
                ]
            },
            files:{}
        }
    };
    viewFiles.forEach(function(v, k){
        replaceConfig['dist']['files'][v['file']] = v['file'];
    });
    //grunt 配置
    grunt.initConfig({
        'pkg' : grunt.file.readJSON('package.json'),
        'concat' : concatConfig,   //合并任务
        'uglify' : uglifyJsConfig, //uglify js 压缩,
        'cssmin': cssminConfig, //css 压缩,
        'clean': {
            test: ['tmp']  //创建的临时文件
        },
        'jshint': {
            js: ['Js/*.js', 'Js/**/*.js','Js/**/**/*.js']
        },
        'string-replace':replaceConfig,  //替换路径
        'watch': {
            scripts: {
                files: ['Js/*.js', 'Js/**/*.js','Js/**/**/*.js'],
                tasks: ['jshint']
            }
        },
        'rev': {
            files: {
                src: proFiles
            }
        }
    });

    // loadNpmTasks
    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.loadNpmTasks('grunt-css');
    //clear
    grunt.loadNpmTasks('grunt-contrib-clean');

    grunt.loadNpmTasks('grunt-contrib-jshint');

    //dev、production

    grunt.loadNpmTasks('grunt-string-replace');

    grunt.loadNpmTasks('grunt-contrib-watch')

    grunt.loadNpmTasks('grunt-rev');

    //注册任务：

    // 默认任务
    grunt.registerTask('default', ['concat', 'uglify','cssmin','clean']);

    grunt.registerTask('jsHint', ['jshint']);

    grunt.registerTask('watch', ['watch']);

    //根据文件内容生产文件
    grunt.registerTask('setCacheFile',['rev']);
    //切换dev pro 环境
    grunt.registerTask('transfer',['string-replace']);

    grunt.registerTask('quick', ['default', 'setCacheFile', 'transfer']);

}; 

package.json:

{
  "name": "test2",
  "version": "0.1.0",
  "author": "bossliu",
  "homepage": "###",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-clean":"~0.4.0rc5",
    "grunt-contrib-jshint": "~0.1.1rc5",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-string-replace":"~0.2.7",
    "grunt-contrib-watch":"~0.6.1",
    "grunt-rev":"~0.1.0",
    "grunt-css":   ">0.0.0"
  }
}

index.html:

<!DOCTYPE html>
<html>
<head>
<title>grunt test</title>
<!-- grunt-import-css bootstripCss -->
<link href="Css/dest/603d3616.bootstrip.min.css" rel="stylesheet" />
<!--/grunt-import -->
</head>
<body>
  grunt test

<!-- grunt-import-js IEhtml5Js -->
<script src="Js/dest/56b83730.IEhtml5Js.min.js"></script>
<!--/grunt-import -->

<!-- grunt-import-js mainJs -->
<script src="Js/dest/3e083a76.main.min.js"></script>
<!--/grunt-import -->
</body>
</html>

参考文档：

http://www.infoq.com/cn/news/2014/03/env-spec-build-tool-compare/

http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1