企业官网建设流程全解析

• 示例工程

本文以 52-technologies-in-2016 仓库中 28-ionic/dailyreads/mobileapp 的 Ionic App Base 起始工程为对象，讲解如何用 Ionic CLI 一键生成 hybrid 移动应用脚手架、读懂生成工程的目录与配置文件，并把默认的 ES5 + CSS 工程升级为基于 Gulp 的 ES6（Babel 转译）与 SCSS 构建流水线。读完本文，你将掌握 Ionic 起始工程的创建、运行、配置与工程化改造的完整套路，并能对照仓库源码逐一验证每一步的落点。

什么是 Ionic App Base

Ionic App Base 是 Ionic 官方提供的一个"起始工程"（starting project）——所有用ionic start生成的项目本质上都源于它。它的定位是"一个可选支持自定义 SCSS 的 Ionic 起始项目"（A starting project for Ionic that optionally supports using custom SCSS），把 Web 技术（HTML、JavaScript、CSS）编写 hybrid 应用所需的最小骨架一次性铺好。

Ionic 本身是构建在 AngularJS 与 Apache Cordova 之上的混合移动应用开发框架：界面由 Web 技术渲染，Cordova 负责调用移动设备原生能力并把应用打包成原生安装包。本仓库的 mobileapp 目录 就是一个真实的 base 实例——由ionic start mobileapp blank生成（详见 28-ionic 主教程），它完整保留了 base 的骨架（config.xml、gulpfile.js、www/、bower.json、package.json、hooks/、scss/），并在其上叠加了 ES6 转译、视图目录等工程化定制。

另外需要说明：这类模板仓库本身默认关闭了 Issue 提交，遇到问题通常需要通过 Ionic 官方社区渠道反馈，而不是直接向模板仓库提 Issue。

用 Ionic CLI 生成新项目

官方推荐的方式是使用 Ionic CLI 基于本工程创建新项目——CLI 会直接套用官方现成的 starter 模板。首先全局安装ionic命令行工具（依赖 npm）：

$ npm install -g ionic

然后生成项目，例如使用默认的分页（tabs）界面模板：

$ ionic start myProject tabs

Ionic 提供多套内置模板（tabs、sidemenu、blank等），也可以传入自定义模板。本仓库的 dailyreads 移动端使用的正是blank模板：

$ ionic start mobileapp blank

执行后，CLI 会在mobileapp目录下生成整套源码文件。下图是教程中生成的工程目录结构：

生成工程的目录结构解读

base 工程由若干职责清晰的组成部分构成，仓库中的实际文件可以逐一对照：

• config.xml：应用配置文件，可改变项目的诸多行为（应用名、包名、版本、平台偏好、网络白名单等）。仓库实例见 config.xml。
• gulpfile.js：定义项目的 Gulp 任务（sass、babel、views、watch 等），见 gulpfile.js。
• www：被打包进应用的静态 bundle，包含 html、js、css、lib 等，入口为 www/index.html。
• bower.json / package.json：分别定义项目的依赖与开发依赖（dev-dependencies），见 bower.json 与 package.json。
• plugins / platforms：列出所用的 Cordova / Ionic 插件以及当前构建的平台。
• 除此之外还有hooks/（Cordova 生命周期钩子，仓库中为 hooks/after_prepare/010_add_platform_class.js）、scss/（Ionic 的 SCSS 源样式，入口为 scss/ionic.app.scss），以及定制后新增的src/（ES6 源码与视图目录）。

运行项目与 livereload

进入项目目录并启动开发服务器：

$ cd mobileapp $ ionic serve

服务器启动后，浏览器访问 http://localhost:8100/ 即可看到应用页面：

ionic serve处于 live 模式：修改www目录内的文件会被 livereload 自动重新加载，无需手动刷新。

把 base 升级为 ES6 + SCSS 构建流水线

默认模板的入口 www/js/app.js 使用 ES5 语法编写。为了用 ES6 编写代码并自动转译为旧版 JavaScript，仓库对 base 做了如下工程化改造（每一步都有仓库源码可查）：

1. 在www同级新建src目录，把app.js从www/js移到src/js（仓库中即 src/js/app.js）。
2. 安装 Babel 的 Gulp 插件：

$ npm install gulp-babel --save

3. 在 gulpfile.js 中定义babel任务，把src/js/*.js用es2015预设转译后输出到www/js：

gulp.task("babel", function () { return gulp.src(paths.es6) .pipe(babel({presets: ['es2015']})) .pipe(gulp.dest("www/js")); });

其中paths在文件顶部统一声明：es6: ['./src/js/*.js']、views: ['./src/views/**']、sass: ['./scss/**/*.scss']。

4. 把babel挂到default与watch任务上，保证构建与监听时都先执行转译（仓库中的 gulpfile.js#L43-L47）：

gulp.task('watch', function() { gulp.watch(paths.es6, ['babel']); gulp.watch(paths.views, ['views']); gulp.watch(paths.sass, ['sass']); });

同时，仓库还新增了views任务，把src/views/**的 HTML 视图复制到www/views（gulpfile.js#L38-L41），让视图文件也能进入构建流程。有一点值得注意：仓库 gulpfile 中default任务被声明为['babel', 'html', 'sass']，但文件里并没有定义名为html的任务——这属于仓库遗留的一处命名不一致，实际生效的构建任务是babel、views与sass。

5. base "可选支持自定义 SCSS" 的特性由sass任务兑现（gulpfile.js#L19-L30）：编译scss/ionic.app.scss输出到www/css，并用minifyCss压缩、rename生成.min.css：

gulp.task('sass', function(done) { gulp.src('./scss/ionic.app.scss') .pipe(sass()) .on('error', sass.logError) .pipe(gulp.dest('./www/css/')) .pipe(minifyCss({ keepSpecialComments: 0 })) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest('./www/css/')) .on('end', done); });

6. 若要使用Array.find等 ES6 新 API，还需用 Bower 安装 polyfill，并在 www/index.html#L23 引入对应脚本：

$ bower install babel-polyfill --save

<script src="lib/babel-polyfill/browser-polyfill.js"></script>

仓库的 bower.json 中已声明"babel-polyfill": "~0.0.1"，www/index.html 也已完成引入。

7. 让ionic serve自动联动 Gulp：修改 ionic.project，用gulpDependantTasks声明构建前需执行的 Gulp 任务、用gulpStartupTasks声明 serve 期间常驻的任务（如 watch）。仓库中的实际配置如下：

{ "name": "DailyReadsApp", "app_id": "", "gulpDependantTasks": ["views", "babel"], "gulpStartupTasks": ["watch"] }

配置完成后再次执行ionic serve，CLI 会先跑gulp-babel；此时修改src/js/app.js，服务器也能实时检测到变化并自动重载。

应用配置与平台构建

base 工程通过 config.xml 控制应用行为，仓库实例中可以看到几类关键配置：

• 应用元信息：<name>Daily Reads</name>、id="com.ionicframework.starter"、version="0.0.1"、<description>Lists Twitter likes</description>等；
• 显示与启动偏好：webviewbounce、DisallowOverscroll、SplashScreenDelay、FadeSplashScreenDuration、BackupWebStorage等preference；
• Android 相关：android-minSdkVersion为 16，以及各密度（ldpi 到 xxxhdpi）下的icon/splash资源配置；
• 网络访问白名单：默认的<access origin="*"/>，以及显式的allow-intent声明：

<allow-intent href="http://*/*" /> <allow-intent href="https://*/*" />

（教程写作时）默认工程会包含ios平台；如需构建 Android 版本，可用 CLI 添加平台并编译出 apk：

$ ionic platform list $ ionic platform add android $ cordova compile android

生成的 apk 位于mobileapp/platforms/android/build/outputs/apk/目录。仓库的 package.json 中cordovaPlatforms已声明android，cordovaPlugins则列出了 device、console、whitelist、splashscreen、statusbar、keyboard 等常用插件。

需要特别注意：应用打包安装到真机后，如果仍请求http://localhost:5000/...是无法连通的——必须把localhost替换为实际服务器的 IP 地址，并按上面的allow-intent白名单放行 HTTP 请求，Android 平台才会允许应用发起这些网络调用。

小结

Ionic App Base 是理解 Ionic 工程的最佳入口：CLI 一键生成、目录职责清晰、SCSS 开箱即用。本仓库的 mobileapp 实例则示范了如何在 base 之上叠加 ES6（Babel 转译）、SCSS（sass）与视图（views）任务，将其改造成一条完整的 Gulp 构建流水线，并通过config.xml与ionic.project完成应用配置和构建联动。若想继续深入，把 base 扩展成完整应用（多视图导航、REST API 接入、下拉刷新等），可以直接阅读仓库中的 28-ionic/README.md 主教程，并对照 src/js/app.js 与 src/views/home/home.html 等实际源码。

• 示例工程