基于gulp的一个简朴的处置惩罚多个api域名环境的开辟工作流

github

简朴的事情流 基于Gulp 应用 gulp-preprocess 举行多环境（api域名）开辟、打包

sass转css css&js&html紧缩

媒介

近来苦于搬砖，我们有三个开辟环境，差别的环境的api的域名不一样，像我这么懒的人只能一键打包，webpack不太实用，没办法，只能写一个基于gulp的，合适本身用的事情流了，哎~~~（一声长叹）

gulp-preprocess

传送门

• 在html中运用

test环境下转换结果

• 在中运用

var host
// @if HOST_ENV='test'
host = 'testhost'
// @endif
// @if HOST_ENV='qa'
host = 'qahost'
// @endif

test环境下转换结果

var host
host = 'testhost'

调试 dev

• 自动革新
• 不紧缩

## 开辟启动 默许test环境，（gulpfile.js内里设置）
npm run dev
## 调试指定的域名,可选host test qa pe （gulpfile.js内里设置）
npm run dev-host test


敕令做了什么

1. 清空dist
2. 把dev文件处置惩罚完传到dist中
3. 视察dev中的文件，有变化的举行步骤2
4. 开启一个服务器
5. 视察dist中的文件，有变化即革新浏览器

打包 build

• 紧缩

## 打包悉数
npm run build-all
## 打单个环境的包, 可选host test qa pe （gulpfile.js内里设置）
npm run build test


敕令做了啥

1. 清空对应途径
2. 把文件处置惩罚传送到指定的途径中

调试打包结果

dev 源代码途径，dist 开辟调试的途径 ， output 打包途径

├── README.md
├── dev
│   ├── example.js
│   └── index.html
├── dist
│   ├── example.js
│   └── index.html
├── gulpfile.js
├── output
│   ├── pe
│   │   ├── example.js
│   │   └── index.html
│   ├── qa
│   │   ├── example.js
│   │   └── index.html
│   └── test
│   ├── example.js
│   └── index.html
├── package.json
└── tree.txt