提起iuapmobile studio，相信大家已經不再陌生了，是進行移動應用開發的強大整合工具與必備神器。藉助強大的iuap mobile studio，可以實現對開發、測試、除錯、打包、釋出全程管理。同時iuap mobile studio又是一個極具開放性的平臺工具，可以與絕大多數優秀的前端框架、技術很好地整合。今天我們就來看看在iuap mobile上如何玩轉這些如火如荼的前端自動化構建技術。
說起目前主流前端自動化構建技術，少不了npm、grunt、gulp、browserify、webpack的身影，它們不但可以省去你開發時程式碼合併、壓縮等工作，還可以讓你使用SASS、LESS、ES6、React、Vue等進行開發新體驗。
我們來簡單認識一下這些技術吧，熟悉這些技術同學可直接略過下面一段。
iuap mobile在進行移動開發時如何引入這些前端自動化構建技術呢？接下來我們通過兩個例子來看一下在iuapmoile之上如何使用這些自動化構建工具。
iuapmobile + gulp
首先我們來看一下gulp如何在iuapmobile中使用。總的來說，分為如下幾步：
（1）環境搭建
（2）建立gulp專案
（3）本地專案依賴配置及開發
（4）編譯打包
第一步、環境搭建
這塊網上介紹性的很多，總的來說就是使用npm進行全域性安裝和本地專案開發依賴安裝使用如下步驟來進行安裝執行，涉及的命令如下：
1. 全域性安裝 gulp：
$ npm install -g gulp
2. 作為專案的開發依賴（devDependencies）安裝：
$ npm install --save-dev gulp
3. 在專案根目錄下建立一個名為 gulpfile.js 的檔案：
var gulp = require('gulp');
gulp.task('default', function(){
// 將你的預設的任務程式碼放在這
})
4. 執行 gulp：
$ gulp
第二步，建立gulp專案
通過iuapmobile studio新建專案的嚮導頁建立gulp專案，studio會自動為你生成一個典型的gulp目錄結構。整個過程如下圖所示：
第三步、使用gulp進行自動化構建開發
我們通過在gulpfile.js中，通過編寫各種task，使用gulp外掛（例如gulp-concat、gulp-sass、gulp-less、gulp-uglify等）將我們專案中的js、css、sass、less等檔案統一壓縮合並並輸出成新的目標檔案，在HTML頁面中引用壓縮合並後的檔案即可。例如下圖就是一個基於iuapmobile studio開發的一個使用gulp的頁面示例。其中
左邊圖展示一個iuapmobile移動專案的目錄結構，其中
根目錄下的js、css、img等資料夾都是原始碼資料夾。
dist資料夾是使用gulp進行自動化構建的目標資料夾。
右邊圖展示了使用gulp來對專案中的JS、CSS、LESS、SASS進行合併壓縮，主要是通過JavaScript藉助gulp的require機制載入各種gulp外掛，來編寫gulp task來實現自動化構建。
下圖（左）html頁面引用的dist/css/all.css、dist/js/all.min.js都是通過gulp合併壓縮後的檔案，加快了頁面資源載入速度。例如all.min.css實際上是sass和less編譯後的合併壓縮檔案，如下圖（中）展示的程式碼是SASS語法編寫的樣式，下圖（右）展示的是用LESS語法編寫的樣式。
gulp不僅提供了針對SASS、LESS的外掛，還提供了針對JSX、ES6、TypeScript的外掛，可以這些外掛可以使用新的語法形式來編寫JavaScript程式碼，這些還靠大家自己去親身實踐，這裡就不過多贅述了。
第四步、編譯打包
所有開發打包完畢後，可以使用iuapmobile的一鍵打包功能進行本地編譯打包功能生成安卓應用了。通過雲打包進行IOS編譯打包可以生成IOS應用。生成後的效果圖如下：
這一步，沒有什麼額外的工作，只需要像往常使用iuapmobile進行編譯打包一樣進行操作即可，執行後在模擬器或真機上檢視後的結果如下圖。
通過以上可以看出在iuapmobile上，是可以使用gulp來完成移動開發中的自動化構建工作的，避免了容易出錯的手工操作環節，在編寫程式碼方式上也有了更多的選擇，將開發環境和生產環境進行分離，最終頁面載入的也都是合併壓縮後的，，載入效率自然會提升不少。
iuapmobile + webpack
我們再來看一下webpack如何在iuapmobile中使用。首先來看一下iuapmobilei前端js框架如何支援模組化。
iuapmobile中前端js框架是支援模組化編寫的程式碼，因此在webpack中可以通過require機制來載入，例如
var summer = require(‘summer.js’);
var um = require(‘iuapmobile.framework.ui.js');
其中，iuapmobile.framework.ui.js是iuapmobile提供的前端UI外掛JS檔案合併而成的外掛集合，其中每一個外掛來自一個獨立模組化的js檔案，因此也支援直接獨單載入某個模組外掛，例如
var modal = require(‘um.modal.js’);
modal.toast(‘這是一個toast’);adfadf
總的來說分為如下幾步：
（1）環境搭建
（2）建立webpack專案
（3）本地專案依賴配置
（4）開發測試打包執行
第一步、環境搭建
1. 全域性安裝webpack：
$ npm install -gwebpack
2. 作為專案的開發依賴（devDependencies）安裝：
$ npm install --save-devwebpack
3. 配置webpack.config.js的檔案
通過該配置檔案指定入口檔案路徑和存放打包後檔案的地方的路徑等
4。通過安裝各種使用到的載入器、外掛、開發伺服器等。
$ npm install --save-devstyle-loader css-loader
$ npm install --save-dev babel-core babel-loader babel-runtime
$ npm install --save-devbabel-preset-es2016 babel-preset-react
$ npm install --save-devwebpack-dev-serve
5. 執行webapck：
$ webpack
第二步、建立wenpack專案
通過iuapmobile studio新建專案的嚮導頁建立webpack專案，studio會自動為你生成一個典型的webpack目錄結構。整個過程如下圖所示：
我們可以看到在專案根目錄下有package.json、webpack.config.js等檔案其中，
package.json是npm管理配置的，
webpack.config.js來webpack進行專案管理配置的。
node_modules是你的引入的外掛模組所在的目錄，熟悉前端自動化構建的同學對此一定很熟悉吧。
public資料夾是該配置檔案中定義的輸出資料夾路徑
以上時iuapmobile預設為你生成的目錄結構，當然你也可以在此基礎上改成你自己習慣的目錄結構。
第三步、使用webpack進行自動化構建開發
我們webpack提供了針對JS、CSS、JSON進行模組化載入的各種loader，通過安裝這些loader後，我們便可以對專案中的各種資源進行打包。如下圖所示，左邊圖為webpack.config.js中定義的各種loader，右邊圖中dist資料夾為打包後目標資料夾，其中indexBundle.js等為各對應HTML頁面打包後的js檔案。
除了打包之外，使用webpack的另一個有意義的事情便是可以使用ES6、React、Vue等來編寫自己的程式碼了。如下所示
左邊圖展示了該頁面僅僅需要引用一個打包後的indexBundle.js即可。
右邊圖展示了indexBunlde.js中對各種資原始檔的統一模組化載入，其中包含了ES6語法寫的js，還包括css、scss等樣式檔案以及引用的第三方外掛js檔案。
下面左圖則是使用ES6語法來編寫的JS程式碼，通過import被模組化載入到indexBundle.js中。右圖則是使用SASS語法編寫的樣式，通過require被打包到indexBundle.js中，頁面無需單獨再引用轉化為css後的檔案。
第四步、編譯打包
所有開發打包完畢後，可以使用iuapmobile的一鍵打包功能進行本地編譯打包功能生成安卓應用了。通過雲打包進行IOS編譯打包可以生成IOS應用。生成後的效果圖如下：
看了這兩個案例有沒有心動？原來你的iuapmobile專案也可以使用自動化構建自己的專案了，有沒有眼前一亮的感覺？實際開發中，也可以根據需要將gulp和webpack組合使用，通過gulp外掛gulp-webpack來完成資源打包和模組化載入工作，在gulpfile中定義task來完成整個專案自動化構建，例如
iuapmobile的開發者使用者們要不要趕緊去實踐一下呢？
關於iuapmobile
iuapmobile開發平臺是一個開放的平臺，好的前端開源框架、技術工具都可以整合使用。開源、開放模式是我們一貫的理念。至於在實際應用開發過程中是否引入前端自動化構建完全取決於聰明的開發者自身，平臺、框架說到底都是工具、方法，軟體開發中的人才是最核心因素。什麼是好的技術、什麼時機引用什麼技術，都取決於人的因素，在某種意義上，軟體、硬體，歸根結蒂都是人件。
iuap mobile普及：
iuap mobile為企業提供了完整的從跨平臺開發到管理運維到安全整合的一體化解決方案。幫助企業迅速達到較高階別的移動資訊化成熟度水平，是企業移動化建設的基礎設施。
iuap mobile成功服務於政府機關以及不同行業的大型企業，比如：中國海關總署、中國核電工程有限公司、國家開發銀行、長城汽車、港華燃氣、貴州茅臺、旭陽集團、廣澤乳業、等。
iuap mobile包含如下產品：
1、 移動開發平臺：跨平臺開發
2、 移動執行支撐平臺：對接第三方業務系統、各種移動服務、移動接入安全、資料快取、應用多版本容器管理等
3、 移動安全管理系統：移動安全、裝置管理、應用管理、裝置應用統計分析等等
4、 移動應用商店：移動應用分發與管理