共计 4230 个字符，预计需要花费 11 分钟才能阅读完成。
提起 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 进行全局安装和本地项目开发依赖安装使用如下步骤来进行安装运行，涉及的命令如下：
全局安装 gulp：
$ npm install -g gulp
作为项目的开发依赖（devDependencies）安装：
$ npm install –save-dev gulp
在项目根目录下创建一个名为 gulpfile.js 的文件：
var gulp = require(‘gulp’);gulp.task(‘default’, function(){// 将你的默认的任务代码放在这})
运行 gulp：
$ gulp 第二步，创建 gulp 项目通过 iuapmobile studio 新建项目的向导页创建 gulp 项目，studio 会自动为你生成一个典型的 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）开发测试打包运行第一步、环境搭建
全局安装 webpack：
$ npm install -gwebpack
作为项目的开发依赖（devDependencies）安装：
$ npm install –save-devwebpack
配置 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
运行 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 的开发者使用者们要不要赶紧去实践一下呢？关于 iuapmobileiuapmobile 开发平台是一个开放的平台，好的前端开源框架、技术工具都可以集成使用。开源、开放模式是我们一贯的理念。至于在实际应用开发过程中是否引入前端自动化构建完全取决于聪明的开发者自身，平台、框架说到底都是工具、方法，软件开发中的人才是最核心因素。什么是好的技术、什么时机引用什么技术，都取决于人的因素，在某种意义上，软件、硬件，归根结蒂都是人件。iuap mobile 普及：iuap mobile 为企业提供了完整的从跨平台开发到管理运维到安全整合的一体化解决方案。帮助企业迅速达到较高级别的移动信息化成熟度水平，是企业移动化建设的基础设施。iuap mobile 成功服务于政府机关以及不同行业的大型企业，比如：中国海关总署、中国核电工程有限公司、国家开发银行、长城汽车、港华燃气、贵州茅台、旭阳集团、广泽乳业、等。iuap mobile 包含如下产品：1、移动开发平台：跨平台开发 2、移动运行支撑平台：对接第三方业务系统、各种移动服务、移动接入安全、数据缓存、应用多版本容器管理等 3、移动安全管理系统：移动安全、设备管理、应用管理、设备应用统计分析等等 4、移动应用商店：移动应用分发与管理
