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

本文介绍了一种使用grunt-string-replace插件根据不同环境自动切换Angular应用中环境变量的方法,避免了手动更改配置所带来的错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简要说明一下:

我的项目是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压缩出来的是线上的地址








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值