基於gulp的一個簡單的處理多個api域名環境的開發工做流

gulp-simple-workflow-multi-host

github

簡單的工做流 基於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

命令作了什麼

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