前端H5开发切换编译环境

目前前端开发的时候可以自由切换不同的开发环境,有些同学可能不是太清楚具体怎么做,这里简要说明一下, 以德升h5为例。

第一步:本地server启动时需要切换到相应的环境

1. 我们开发的时候用的server是http-dev-server,一个nodejs写的静态server。我们首先需要全局安装这个工具。

> npm install -g http-dev-server

如果是mac osx 执行下面的命令安装

>sudo npm install -g http-dev-server

2. 使用特定环境的配置启动http-dev-server

//测试环境

> http-dev-server -f dev-server-config.js

//线上环境

> http-dev-server -f online-server-config.js

如果是mac osx 执行下面的命令

>sudo http-dev-server -f dev-server-config.js

> sudo http-dev-server -f online-server-config.js

备注:npm run server 相当于是 http-dev-server -f dev-server-config.js

第二步:编译代码时需要切换到相应的环境

编译相应环境的code

//测试环境

> gulp clean build -e env\trunk.properties

//线上环境

> gulp clean build -e env\online.properties

//如果是启动gulp watch,可以使用下面命令:

> gulp -e env\trunk.properties

> gulp -e env\online.properties

mac osx例子

> gulp clean build -e env/trunk.properties

综合例子:本地如何使用德升线上环境开发,测试。

1. 启动线上环境配置的server

> http-dev-server -f online-server-config.js

2. 编译线上环境使用的code

> gulp -e env\online.properties

3. 将线上域名映射到本地,配置host:

127.0.0.1 m.4567cn.com

现在访问m.4567cn.com是本地的代码,线上的环境

注意:德升的online.properties的staticPath配置的是独立的静态域名,为了使用本地最新的静态资源。可以使用下面两个方法:

1. 将online.properties的staticPath改为本地的,也就是不要指定静态域名。更改env配置文件需要重新编译。

2. 将静态域名映射到本地,比如:

127.0.0.1 m.static.4567cn.com

你可能感兴趣的:(前端H5开发切换编译环境)