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

bergwhite 發布于2019-08-20 18:21 / 2277人閱讀

摘要：簡單的工作流基于利用進行多環境域名開發打包轉壓縮前言最近苦于搬磚，我們有三個開發環境，不同的環境的的域名不一樣，像我這么懶的人只能一鍵打包，不太適用，沒辦法，只能寫一個基于的，適合自己用的工作流了，哎一聲長嘆傳送門在中使用

gulp-simple-workflow-multi-host

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

命令做了什么

清空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

GPU云服務器云服務器基于js的語音處理簡單的小程序開發基于java的java開發基于javascript的webgis開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84383.html

移動端H5多頁開發拍門磚經驗

摘要：以下會以其中一個以公積金頁面開發項目作為例子，介紹移動端的一些常見問題和使用作為進行多頁開發的經驗。所以要想在微信開發調試工具中獲取，我們需要使用一種叫做內網穿透的工具。 showImg(https://segmentfault.com/img/remote/1460000015405042?w=800&h=600);兩年前剛接觸移動端開發，剛開始比較疑惑，每次遇到問題都是到社區里提問...

hightopo 2019-08-22 18:20 評論0 收藏0
聊聊webpack

摘要：但是由于缺乏規范化管理，出現了很多種模塊化規范，從針對的規范，到針對瀏覽器端的，終于在里規范了前端模塊化。可以通過兩種方式之一終端或。導出多個配置對象運行時，所有的配置對象都會構建。在階段又會發生很多小事件。隨著前端的迅速發展，web項目復雜度也是越來越高。為了便捷開發和利于優化，將一個復雜項目拆分成一個個小的模塊，于是模塊化開發出現了。但是由于缺乏規范化管理，出現了很多種模塊化規范...

Ashin 2019-08-26 10:21 評論0 收藏0
實時編輯

摘要：靜態服務器代理你的域名或注入通過流的方式創建任務流程這樣您就可以在您的任務完成后調用，所有的瀏覽器將被告知的變化并實時更新因為只在乎您的在編譯完成后注意后調用重載。方法一使用Google Chrome DevTools 方法二工作區Browsersync 安裝 Node.js BrowserSync是基于Node.js的, 是一個Node模塊，如果您想要快速使用它，也許您需要先...

wenshi11019 2019-08-23 15:34 評論0 收藏0
Webpack 愛與恨

摘要：關于標題，為什么是愛與恨因為在剛出來的時候，我并不是堅定的支持者，有很多地方用起來不方便，設計不合理。用戶只有首次訪問需要下載全部靜態資源，以后的訪問都直接使用緩存資源。首先，在中添加字段，當為時，則開啟服務。例如請求的是則返回中的數據。關于標題，為什么是愛與恨？因為在 webpack 剛出來的時候，我并不是堅定的支持者，有很多地方用起來不方便，api 設計不合理。隨著 webpa...

HmyBmny 2019-08-20 16:47 評論0 收藏0