使用 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教程