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

vincent_lau發表於2019-02-16
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

相關文章