grunt 根据部署环境配置环境参数

简要说明一下：

我的项目是angular写的，然后使用了grunt进行压缩，然后里面有一些环境变量，每次上线前都要手动的把配置变量修改一下。有时候忘记了，提交上去，然后一起部署到线上，经常发生这种致命的错误，然后上头领导叫我写一下配置文件，能正确清晰的辨别哪个文件是线上哪个是线下。

之前也试过几种方法，在这里也跟大家分享一下，比较简陋，别太介意

第一种：就是把线上线下的环境变量都写出来，然后用一个变量来控制，这样一起压缩，每次提交和在本地测试的时候，只要修改变量就好

例如：

var debug = 1;

if(debug){

线上的变量(例子)

$rootScope.href = "www.baidu.com"

} else{

本地测试的变量(例子)

$rootScope.href = "local.baidu.com"

}

本来我觉得第一种还算挺方便的，但是上司看了，觉得还是麻烦，叫我再找一个，类似就是grunt配置的，不同的命令压缩不同变量。好吧继续找然后写出来

以下就是这次的主题，grunt的环境配置  根据不同的压缩命令来指定（我的例子是grunt（默认）压缩出来的是本地的地址，grunt online压缩出来的是线上的地址）

首先需要下载一个grunt的插件

npm install grunt-string-replace --save-dev

然后把下面的代码往gruntfile.js文件里面添加 写在grunt.initConfig里面

'string-replace': {

dist: {

files: {

'dist/': "dist/js/app.js",

},

options: {

replacements: [{

pattern: /http:\/\/local.baidu.com/ig,

replacement: "http://www.baidu.com",

},{

pattern: /http:\/\/123test.baidu.com/ig,

replacement: "http://123.baidu.com",

},{

pattern: /http:\/\/apilocal.com/ig,

replacement: "http://api.com"

}]

}

}

}

files（本人理解）：所要替换的指定文件位置，就是我所要替换的地址在这个文件里面

options：选择替换的东西

pattern:正则匹配本地的地址

replacement：替换成线上的地址

然后添加插件进去，和使用的命令进去

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

grunt.registerTask('default', ['uglify','cssmin']);（这是压缩默认的）

grunt.registerTask('online', ['uglify', 'cssmin', 'string-replace']);（这是压缩替换的）

说明一下，就是文件里面写的环境直接写本地的，配置的时候是线上的，这时候执行 grunt，压缩出来的还是本地的地址

执行grunt online压缩出来的是线上的地址