gulp-simple-workflow-multi-host
简朴的事情流 基于Gulp 应用 gulp-preprocess 举行多环境(api域名)开辟、打包
sass转css css&js&html紧缩
媒介
近来苦于搬砖,我们有三个开辟环境,差别的环境的api的域名不一样,像我这么懒的人只能一键打包,webpack不太实用,没办法,只能写一个基于gulp的,合适本身用的事情流了,哎~~~(一声长叹)
gulp-preprocess
- 在html中运用
<!-- @if HOST_ENV='test' -->
<script charset="UTF-8">
window._hostname = 'http://testhost'
</script>
<!-- @endif-->
<!-- @if HOST_ENV='qa' -->
<script charset="UTF-8">
window._hostname = 'https://qahost'
</script>
<!-- @endif-->
test环境下转换结果
<script charset="UTF-8">
window._hostname = 'http://testhost'
</script>
- 在中运用
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
敕令做了什么
- 清空dist
- 把dev文件处置惩罚完传到dist中
- 视察dev中的文件,有变化的举行步骤2
- 开启一个服务器
- 视察dist中的文件,有变化即革新浏览器
打包 build
- 紧缩
## 打包悉数
npm run build-all
## 打单个环境的包, 可选host test qa pe (gulpfile.js内里设置)
npm run build test
敕令做了啥
- 清空对应途径
- 把文件处置惩罚传送到指定的途径中
调试打包结果
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