使用 gulp 搭建前端环境之 ionic 项目实践总结(高级篇)

时间  2019-11-07
标签 使用 gulp 搭建 前端 环境 ionic 项目 实践 总结 高级 栏目 JavaScript 繁體版
原文   原文链接

使用 gulp 搭建前端环境之 ionic 项目实践总结

3.1 前言
3.2 angular 目录结构简介
3.3 ionic 目录结构简介
3.4 重构 ionic 目录结构
       3.4.1 区分 SRC 和 WWW
       3.4.2 切换 Development、Staging、Production环境
3.5 gulp 配置详解
    3.6 升级到 ionic2 
    3.7 参考文档

详细步骤及示例请移步至 ionic quickstarter with gulp
系列文章 主要讲解如何用 gulp 搭建一个前端工程化项目css

3.1 前言

咱们经常会花不少时间去写代码，在项目的早期阶段，不少人倾向忽视目录结构的组织；在短时间时间内，这可让开发人员快速的编写代码，但从长远来看会影响代码的可维护性；有时候或许会想到去 github 或者 google 去搜索，好比 angular-seed等等，一些框架已经提供了最佳实践的项目结构。下面将主要分享团队在 angular 项目和 ionic 项目结构上的实践过程；若有不恰当之处，欢迎指正。html

3.2 angular 目录结构简介

ionic 是基于 angular 的一套移动框架，咱们须要先来看看 angular 的目录结构:前端

按文件类型分类（Sort By Type）

许多 AngularJS 教程提供了相似于下面的项目目录结构，这是一个很是典型的应用程序结构；在表面看起来，很是相似于 MVC 框架的目录结构，分为 controllers目录、views目录，以及第三方的JavaScript库的目录。jquery

当你只有少数的视图和控制器，这看起来是很是的好。事实上，它只适合咱们对照教程编写示例代码或较小的应用程序。这种结构使得初学者很容易理解其中的概念。git

可是当你开始向应用程序添加复杂的功能，这种组织方式很快会遇到一些问题，一旦你有10多个控制器,视图和指令文件,你就须要滚动目录树找到所需文件，随着应用程序的增大，如何维护就会成为一个问题：angularjs

www/
|
|- app/
|   |- controllers/
|   |     |- mainController.js
|   |     |- otherController.js
|   |
|   |- directives/
|   |     |- ButtonDirective.js
|   |     |- otherDirective.js
|   |
|   |- services/
|   |     |- userService.js
|   |     |- itemService.js
|   |
|   |- js/
|   |   |- bootstrap.js
|   |   |- jquery.js
|   |
|   |- app.js
|   |
|- views/
|   |- mainView.html
|   |- otherView.html
|   |- index.html
|   |
|- css/
|   |- style.scss
|   |
|- img/
|     |- logo.png

按照功能分类（Sort by Feature）

src/
 |app/
 |  |- admin/
 |  |     |- acount/
 |  |     |- users/
 |  |     |- admin.js
 |  |- dashboard/
 |  |     |- dashboard.js
 |  |     |- dashboard.tpl.html
 |  |- app.js
 |-assets/
 |   |- img/
 |   |- css/
 |   |- font/
 |-common/
 |   |- directives/
 |   |- resources/
 |   |- services/
 |-sass/
 |   |- main.scss
 |   |- variables.scss
 |-index.html
 vendor/
 |- angular
 |- boootstrap
 |- jquery

这种结构把不一样的业务功能拆分为独立的文件，条理清晰，可是仍有必定的局限性。最大的问题是同一个业务功能的代码分布在 controllers, models, services 三个不一样目录下，要从中挑选出相对应的文件，创建起代码关联，仍是有些麻烦。在项目结构二的改进下，因而便有了第三种项目结构，按照功能模块划分目录结构，或许更为合理一些：github

按照模块分类（Structuring for Modules）

让咱们获得最佳实践和你应该作什么来构建可伸缩和可维护的AngularJS应用，你的同事会爱死你的。理想 AngularJS 程序结构应该模块化到很是具体的功能；咱们应该要利用好AngularJS的特性进一步划分咱们的应用程序。下面看一个示例目录结构:json

/
|
|- src/
|
|    |
|    |- app/
|    |    |- home/
|    |    |    |
|    |    |    |- home.module.js
|    |    |    |- home.controller.js
|    |    |    |- home.directive.js
|    |    |    |- ($feature.$type.js)
|    |    |    |- home.html
|    |    |    |- home.scss
|    |    |
|    |    |- config/
|    |    |    |- config.default.json
|    |    |    |- config.development.json
|    |    |    |- config.production.json
|    |    |    |- config.js
|    |    |
|    |    |- app.js
|    |    |- app.routes.js
|    |    |- app.services.js
|    |    |- app.templates.js
|    |    |
|    |- css/
|    |    |- scss/
|    |    |    |- ionic.app.scss (index file)
|    |    |- ionic.app.css (all css will be compiled into this file)
|    |    |
|    |- img/
|    |    |
|    |- lib/
|    |    |- angular/
|    |    |- angular-resource
|    |    |- ionic
|    |- shared/ (common components cross projects)
|    |    |- canvasClock/
|    |    |- calendar/
|    |    |- constants/
|    |- index.html

参考：gulp

3.3 ionic 目录结构简介

最近陆陆续续作过一些基于 ionic 的 hybird app，遇到过一些问题，踩过一些坑；有开发过 ionic 经验的人都知道，咱们只须要使用 ionic start ProjectName 就能够生成一个 ionic 的模板项目结构：

ionic project structure

ionic 默认开发环境是在 www目录，所以咱们的关注点只须要聚焦在 www目录便可，观察上面的项目结构，咱们能够发现与在分析 angular 目录时的按文件类型分类的目录结构是相似的

另外：ionic 默认只提供了基于 gulp 的 sass 编译，使用 bower 来安装库依赖，除此以外并无其余的自动化构建流程，如常见的代码合并压缩，图片压缩，分环境开发等等；所以咱们须要重构 ionic 默认的目录结构，以此来完成适合大型应用的目录

有了上面 angular 和 ionic 目录的简单介绍，咱们知道 ionic 默认的项目结构可能更适合通常的项目架构，若是咱们想更好的管理 ionic 项目，咱们须要对它进行重构和更多的自动化构建过程

3.4 重构 ionic 目录结构

咱们先来看看重构后的项目目录结构，而后再来分析它所遵循的规范：

/
|
|- src/
|
|    |
|    |- app/
|    |    |- home/
|    |    |    |
|    |    |    |- home.module.js
|    |    |    |- home.controller.js
|    |    |    |- home.directive.js
|    |    |    |- ($feature.$type.js)
|    |    |    |- home.html
|    |    |    |- home.scss
|    |    |
|    |    |- config/
|    |    |    |- config.default.json
|    |    |    |- config.development.json
|    |    |    |- config.production.json
|    |    |    |- config.js
|    |    |
|    |    |- app.js
|    |    |- app.routes.js
|    |    |- app.services.js
|    |    |- app.templates.js
|    |    |
|    |- css/
|    |    |- scss/
|    |    |    |- ionic.app.scss (index file)
|    |    |- ionic.app.css (all css will be compiled into this file)
|    |    |
|    |- img/
|    |    |
|    |- lib/
|    |    |- angular/
|    |    |- angular-resource
|    |    |- ionic
|    |- shared/ (common components cross projects)
|    |    |- canvasClock/
|    |    |- calendar/
|    |    |- constants/
|    |- index.html
|
|- www

  • app : components using for the app

  • css : common stylesheets, using scss

  • img : common images

  • lib : thrid-party libraries managed by bower

  • shared : common components cross projects

  • www : compile the source code for the production environment

从上面的目录结构能够看到，如今的目录结构有点相似于咱们在分析 angular 项目时的按照模块来分类的项目结构；这种组织方式适合编写大型的应用程序，它不一样于咱们使用 ionic start projectName 初始化的项目目录；

ionic 默认的目录将全部的routes, controllers都放在一个文件夹，将全部的html 模板文件放在一个文件夹；

相反的，咱们选择使用模块来管理组织文件，每一个模块是在本身的目录包含 JavaScript(控制器)和HTML(模板)，css，image；即每一个功能点都是一个小的模块，这使它更容易保持一个大型应用程序组织和维护。

3.4.1 区分 src 和 www 目录

新增长 src 文件夹，项目的源代码(HTML、CSS、JavaScript)位于 src 目录下面而不是位于默认的 www 目录下

ionic serve 默认是读取 www 目录下文件启动本地静态服务器，咱们经过使用 gulp 构建来将 src 的代码映射到 www 目录下

  • development 当你想切换到开发环境在浏览器上运行时，只须要执行ionic serve

  • production 当你想切换到生产模式在设备上设备时，只需执行ionic build --env production

3.4.2. 模块区分原则

通常原则： ONE DIRECTORY == ONE MODULE (and one subdirectory == 1 sub module).

模块的定义须要根据项目而定，切分的粒度也须要视状况而定，例如咱们能够将 login切换为一个模块，全部有关login模块的html,css,js，img都放在login模块目录下：

这里引用前端农民工张云龙大神的一张图片做为说明

moduleExample

推荐阅读： 前端工程——基础篇

3.4.3 切换development，staging和production环境

当你从 ionic-quickStart clone项目以后，默认的是development环境，你须要开起两个终端来分别执行 gulp build 和 ionic serve来运行项目:

# switch to development mode
$ gulp build # same as running `gulp build --env development`

# run local serve
$ ionic serve

当你须要切换到staging环境，即常说的预发布环境(压缩源代码,API路径替换等等)，你只须要执行gulp build --env staging来自动化构建你的项目L

# switch to staging mode
$ gulp build --env staging

当你须要切换到production环境，即常说的生产环境(与staging环境只有API路径不一样)，你只须要执行gulp build --env production来自动化构建你的项目：

// switch to production mode
$ gulp build --env production

3.5 gulp 配置详解

更改 ionic 默认的项目结构后，咱们须要基于gulp来构建更完善的流程，先来看看整个的流程图：

gulp build process

gulp build process

gulp build task

gulp build task

Using gulp switch different environments

GIF demo

构建流程详解：

  1. 在开发模式下：须要默认将 SRC 下的文件复制到 WWW 目录下，而且实时监听 SRC 文件的改动映射到 www(由于 ionic serve 默认会读取 www 目录下的文件启动本地服务)；开发模式主要的 gulp 任务是监听 html, css, JS 的改动，sass 的编译，实时刷新，stylelint，JSLint，文件替换和 API 路径配置；

  2. 在预生产模式下：首先须要清除掉 WWW 目录下的全部文件，而后从新从 SRC 编译代码到WWW 目录下，这个过程主要的 gulp 任务是：清除文件，HTML 模板合并缓存，图片压缩，CSS 合并压缩，JS 合并压缩；

  3. 在生产模式下: 生产模式和预生产模式除了 API PATH 配置不同，其它的gulp任务都是同样；

详细步骤及示例请移步至 ionic-quickstarter-with-gulp

3.6 升级到 ionic2

ionic2 如今虽然还未发布，可是咱们能够从官方文档下载有关 ionic2 的相应示例，对比发现，咱们此次基于gulp的构建结构居然与 ionic2 有殊途同归之妙(吹嘘?)，ionic2 主要分为app和www目录，以此来区分不一样的开发模式，组件化等等，基于 Webpack 构建，流程更加完善，值得期待!

ionic2 目录结构

|-www/
    |
    |--Home/
    |--|-HomeCtrl.js
    |--|-Home.html
    |
    |--Detail/
    |--|-DetailCtrl.js
    |--|-Detail.html
    |
    |-index.html
    |-app.js

3.7 参考文档

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程