Yeoman Gulp-Angular 淺析

前言

當項目達到一定規模時,相信每個人都在煩惱,目錄結構、各種包、依賴的安裝,這些是很影響效率的。所以呢,一個神奇的腳本架---Yeoman出現了。那什么是腳本架呢,官網解釋是這樣的

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive

簡單來說,就是一切幫你自動達好框架,你只要按著他的生成器教程來編寫代碼就可以了,Yeoman官網

安裝Yeoman

準備

在安裝Yeoman之前應該先搭好環境,應該是什么環境呢,當然是Node了,這個就不多解釋了,Node安裝

安裝 Yo

很簡單,把他安裝到全局里,命令如下

npm install -g yo

安裝生成器(Generators)

安裝好yo 之后呢,我們需要在安裝我們需要的生成器,什么是生成器呢?其實就是項目模板,而Yo只是創建這模板的指揮員而已

所以,我們需要選擇我們復合需求的生成器,官網里已經有很多已經搭建好的生成器,詳情

而命令也很簡單,以我后面會詳細講的gulp-Angular為例

在這之前,先安裝依賴的gulpbower

npm install -g yo gulp bower

然后,安裝生成器

npm install -g generator-gulp-angular

運行生成器

安裝完成后,我們先創建一個我們的項目目錄,并進入目錄

mkdir my-new-project && cd $_

然后運行我們的生成器

yo gulp-angular

之后只要按提示選擇我們需要安裝的包就可以了

Gulp-Angular生成器簡單解析

配置選擇:angular,ui-router,bootstrap,jq,es6,resource

生成目錄

當以上都執行完以后,應該會呈現如下目錄


此處輸入圖片的描述
此處輸入圖片的描述

如果沒有bower_componets或者node_modules目錄,那就需要手動安裝了,執行

npm install   // 生成node_modules
bower install // 生成bower_componets
  • bower_componets: bower.json中的依賴包目錄

  • e2e: 測試目錄

  • gulp: gulp配置目錄

  • node_modules: package.json里面依賴包目錄

  • src: 源文件目錄(也就是我們主要編碼,處理過的)

  • .bowerrc: bower配置文件,可以設置安裝位置

  • .gitignore: 配置Git上傳時忽略文件名

  • bower.json: bower 安裝的依賴配置

  • gulpfile.js: gulp 運行的入口文件,和makefile同理

  • karma.conf.js: karma 測試文件

  • package.json: npm 安裝的配置

  • protractor.conf.js: Angular 專門的測試框架

接著,在項目根目錄執行

gulp

會多出.tmpdist目錄

  • .tmp: 處理過程的臨時文件

  • dist: 進行各種注射,壓縮等處理后的項目文件

    此處輸入圖片的描述
    此處輸入圖片的描述

Gulp 運行

其實腳本架之所以能高效率的幫助我們完成項目的構建,這完全歸功于這神奇的Gulp,用自動化構建工具增強你的工作流程

當運行Gulp時,其實里面發生了很多事情,現在我就開始簡單歸納一下流程

此處輸入圖片的描述
此處輸入圖片的描述
此處輸入圖片的描述
此處輸入圖片的描述
此處輸入圖片的描述
此處輸入圖片的描述
  1. 通過src/app 下的index.module.jsindex.scss文件作為src下其他jsscss文件的接入口,全部導入到這兩個文件中

  2. index.module.js進行各種處理后,輸出到./tmp/serve/app目錄下的index.module.js文件

  3. index.scss各種scss文件的注入后,輸出到./tmp/serve/app目錄下的index.scss文件

  4. .tmp/serve/appbower_componets下的cssjs文件通過linkscript注射到src目錄下的index.html文件里,然后輸出到.tmp/serve下的index.html文件

  5. .tmp/serve下的index.html所有script標簽的js文件合并壓縮輸出到dist/scripts目錄下。其中,app..js為用戶自己編寫代碼的輸出文件,vendor..js為所有js**依賴的輸出文件

  6. .tmp/serve下的index.html所有link標簽的css文件合并壓縮輸出到dist/styles目錄下。其中,app..css為用戶自己編寫代碼的輸出文件,vendor..css為所有css**依賴的輸出文件

  7. bower_componets目錄中的字體文件輸出到dist/fonts目錄中

  8. 最后將其他文件原樣輸出到dist目錄中,并對src目錄下所有htmlscss文件以及項目根目錄下的bower.json文件進行監視

Gulp 文件

此處輸入圖片的描述
此處輸入圖片的描述
  • conf.js: 提供一些全局變量

  • build.js: 作為第一個最主要的任務,將其他任務結合構建起來,關鍵模塊如下

    • useref: 通過``等標志,將在其中的標簽標示的文件輸出成一個文件和一個標簽
  • inject.js: 負責將js和css文件注射進html文件,關鍵模塊如下

    • inject: 通過``等標志將指定的源文件文件注入

    • wiredep: 通過``等標志將bower.json依賴的文件注入

  • styles.js:src下和bowerscss文件注入到index.scss中,并編譯后輸出到./tmp/serve/app目錄下的index.scss文件

  • scripts.js:index.module.js進行各種處理后,輸出到./tmp/serve/app目錄下的index.module.js文件

  • server.js: 處理一些gulp command 和服務的開啟

  • watch.js: 對文件進行監視

  • 其他兩個: 測試

參考

Gulp文件注釋

我的博客

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前言 本文默認你已經安裝好node環境,并且熟悉node命令,和window cd命令。 gulp簡介 基于nod...
    9I閱讀 1,992評論 4 50
  • 在現在的前端開發中,前后端分離、模塊化開發、版本控制、文件合并與壓縮、mock數據等等一些原本后端的思想開始...
    Charlot閱讀 5,483評論 1 32
  • 原文標題:Gulp for Beginners作者: Zell Liew翻譯:治電小白菜原文地址:https://...
    ZZES_ZCDC閱讀 1,604評論 6 18
  • 安裝Gulp首先需要安裝Node.js,并在控制臺輸入$ npm install gulp -gMac端需要寫成$...
    LaBaby_閱讀 947評論 0 1
  • gulp是基于流的前端自動構建工具,那gulp有什么優點呢,可以用三個字形容:自動化。下面就介紹一些有用的插件吧。...
    aaronckl閱讀 2,996評論 1 1