前端工程構建工具——Yeoman

一、Yeoman 簡介

通常在開發新項目時我們都需要配置工程環境,開發目錄,需要下載一些庫、框架文件(如 jQuery、Backbone 等),配置編譯環境(Less、Sass、Coffeescript等),甚至還要配置單元測試框架,過程非常繁瑣,還沒開始編碼時間就耗了大半天。為了解決這個問題 Paul Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、Eric Bidelman 和 Yeoman 社區共同開發的一個項目——Yeoman。

?

Yeoman 是由三個工具的組成:YO、GRUNT、BOWER

YO:Yeoman核心工具,項目工程依賴目錄和文件生成工具,項目生產環境和編譯環境生成工具。

GRUNT:前端構建工具,jQuery就是使用這個工具打包的。

BOWER:Web 開發的包管理器,概念上類似 npm,npm 專注于 NodeJs 模塊,而 bower 專注于 CSS、JavaScript、圖像等前端相關內容的管理。

Yeoman 特性:

  • 快速創建骨架應用程序——使用可自定義的模板(例如:HTML5、Boilerplate、Twitter Bootstrap等)、AMD(通過RequireJS)以及其他工具輕松地創建新項目的骨架。
  • 自動編譯 CoffeeScrip 和 Compass——在做出變更的時候,Yeoman 的 LiveReload 監視進程會自動編譯源文件,并刷新瀏覽器,而不需要你手動執行。
  • 自動完善你的腳本——所有腳本都會自動針對 JSHint 運行,從而確保它們遵循語言的最佳實踐。
  • 內建的預覽服務器——你不需要啟動自己的 HTTP 服務器。內建的服務器用一條命令就可以啟動。
  • 非常棒的圖像優化——使用 OptPNG 和 JPEGTran 對所有圖像做了優化。
  • 生成 AppCache 清單——Yeoman 會為你生成應用程序緩存的清單,你只需要構建項目就好。
  • “殺手級”的構建過程——你所做的工作不僅被精簡到最少,讓你更加專注,為你節省大量工作。
  • 集成的包管理——Yeoman 讓你可以通過命令行輕松地查找新的包,安裝并保持更新,而不需要你打開瀏覽器。
  • 對ES6模塊語法的支持——你可以使用最新的 ECMAScript 6 模塊語法來編寫模塊。這還是一種實驗性的特性,它會被轉換成 eS5,從而你可以在所有流行的瀏覽器中使用編寫的代碼。
  • PhantomJS單元測試——你可以通過 PhantomJS 輕松地運行單元測試。當你創建新的應用程序的時候,它還會為你自動創建測試內容的骨架。

二、安裝

這里以 OSX 上的安裝為例,先來看下 Yeoman 的安裝環境要求:

  • NodeJS >= 0.8.x
  • Ruby >= 1.8.7
  • Compass >= 0.12.1
  • optipng
  • jpegtran
  • PhantomJS >= 1.6

在 OSX 上 Ruby 是內置的,所以只需要手動配置下其它服務:

  • NodeJS 安裝請直接去官網下載 .pkg 安裝包進行安裝(Homebrew 安裝的 NodeJS 會有問題,無法運行 Yeoman 命令)
  • Compass 可以使用 Ruby 自帶的包管理工具安裝:
    ? $gem install compass
  • 其余的 optipng、jpegtran、PhantomJS 可以通過 Homebrew 安裝,如果已經安裝了 Xcode 那么 Xcode CLI Tools 就已經內置。

開始安裝 Yeoman:

npm install -g yo grunt-cli bower

遇到權限問題請加sudo

安裝完畢后,會看到以下提示:

?

三、使用

1、創建工程

安裝好 Yeoman 后,就可以通過命令來新建工程,首先新建一個工程目錄,比如 demo,首先創建 demo 目錄然后在該下鍵入命令:

yo webapp

這時 Yeoman 會詢問一些配置設置(這里全部選擇了 Yes),之后就開始自動創建工程。

?

工程創建完畢后就可以看到 demo 目錄下已經生成了許多目錄及文件,這時開發所需的環境就搭建好了,可以開始編碼了。

?

webapp 其實是 Yeoman 內置的工程模板,它整合了 html5 Boilerplate、jquery、Modernizr、Bootstrap、RequireJS 等框架或庫文件,使我們創建完后就能直接使用。除了generator-webapp 還有一個 generator-mocha、generator-backbone、generator-angular等工程模板,可以通過npm search yeoman-generator命令查找,然后使用npm install [name]來安裝。

如果工程中需要其它類庫,也可以使用命令方便的添加,例如添加 underscore:

bower install underscore

2、啟動工程服務

Yeoman 內置 Node 服務。啟動命令:

?grunt server

服務啟動后會自動打開瀏覽器訪問http://localhost:9000/(端口號可以在 gruntfile.js 中配置),然后工程服務會監聽工程目錄下的預編譯文件,一旦發生改變就自動編譯并刷新瀏覽器。比如我們修改工程下的 main.scss 文件,工程服務就會開始運作:

?

3、運行測試框架

Yeoman 內置 mocha 測試框架,在 PhantomJS 環境下進行測試,測試命令:

grunt test

?

運行完畢后可以在工程里的 test 目錄找到測試報告。

至此 Yeoman 的部署就完成了。接下來就是自定義一套工程模板。

參考文章

http://yeoman.io/index.html

http://www.36ria.com/6144

轉載于:https://www.cnblogs.com/liusixin/p/6565881.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/284237.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/284237.shtml
英文地址,請注明出處:http://en.pswp.cn/news/284237.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【FME實戰教程】001:FME2020中文安裝圖文教程(附安裝包下載)

文章目錄1. 安裝license2. 安裝FME Desktop3. 安裝中文語言4. FME軟件下載地址1. 安裝license 打開軟件安裝包中的fme-flexnet-win-x64.msi,如下圖所示: 點擊Next。 點擊Next。 單擊install。 點擊finish,完成。 (1)修…

算法導論 第三部分——基本數據結構——第14章:數據結構的擴張

本章通過擴張紅黑樹構造出兩種數據結構:動態順序統計和區間樹。 1、動態順序統計:查找倒數第i小的數據 復雜度為 lg(n) 為什么是擴張紅黑樹而不是搜索二叉樹或者二叉樹? 相對于搜索二叉樹,紅黑樹的平衡性更好,高度在l…

/hgfs下無共享文件夾?/mnt下沒有hgfs文件夾?vmhgfs-fuse:找不到命令?

前言:最近在使用linux的過程中,需要在宿主操作系統與客戶操作系統間建立共享文件夾,遇到了些許問題,在網上參考了許多文章與各種嘗試后,現得以解決,分享如下。1、系統環境:宿主操作系統&#xf…

GraphQL入門有

本文將從GraphQL是什么,為什么要使用GraphQL,使用GraphQL創建簡單例子,以及GraphQL實戰,四個方面對GraphQL進行闡述。說得不對的地方,希望大家指出斧正。 github項目地址:https://github.com/Charming2015/…

對話莊表偉:開源第一課

莊表偉目前就職于華為的開源管理中心。自2014年開源社成立之初,他便友情參與了開源社的籌辦工作。2017年,開源社轉型為完全由個人成員組成的組織,莊表偉就以個人身份加入了開源社。作為開源社理事,當被問到“為什么要參選”時&…

【FME實戰教程】002:FME完美實現CAD數據轉shp案例教程(以三調土地利用現狀數據為例)

FME完美實現CAD數據轉shp案例教程(以三調土地利用數據為例) 文章目錄1. cad數據預覽2. 轉換過程3. shp數據預覽1. cad數據預覽 2. 轉換過程 (1)打開FME Desktop2020中文軟件,點擊【新建】。 (2&#xff09…

Linux學習之01_基礎命令介紹

初學Linux,還在摸索中,在這個過程中希望能記錄下學習到的東西,參考的的書籍為《鳥哥的Linux私房菜》 在這里學到的主要命令有這幾個: data cal bc man shutdown sync 1、基礎命令操作 data----顯示日期與實踐的命令 cal----顯示日…

窮舉算法實例

public static void main(String[] args) {Scanner scnew Scanner(System.in);System.out.println("輸入頭的個數:");int headsc.nextInt();System.out.println("輸入腿的個數:");int footsc.nextInt();for(int i0;i<head;i){//假設兔子的數量為iint jh…

VMware Workstation All Key

官方下載&#xff1a;https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html 懶人打包&#xff1a;鏈接:https://pan.baidu.com/s/1kWJRfjL 密碼:wzce 注&#xff1a;如果是WinXP或32位系統請用 10.0 版本 VMware 所有版本永久許可證激活密鑰&…

【GlobalMapper精品教程】017:KML generator快速將坐標轉為KML文件

本文介紹KML generator軟件,并快速將坐標轉為KML文件的使用方法,并用globalmapper中打開kml文件加以驗證。本專欄配套完整的案例數據包,請打開data017.rar獲取軟件及數據。 文章目錄 1. KML文件介紹2. kml generator軟件介紹2.1 單點KML制作2.2 Excel數據KML制作2.3 文本文件…

從cpp向qml文件傳中文字符串的方法

Qt 使用Unicode編碼來存儲操作字符串&#xff0c;但很多情況下&#xff0c;我們不得不處理采用其他編碼格式的數據&#xff0c;舉例來說&#xff0c;中文多采用GBK和Big5編碼&#xff0c;而日本則多采用Shift-JIS or ISO2022編碼。將其他編碼格式的字符串轉化成采用Unicode編碼…

Codeforces 746 G. New Roads

題目鏈接&#xff1a;http://codeforces.com/contest/746/problem/G mamaya&#xff0c;不知道YY了一個什么做法就這樣過去了啊 2333 首先我顯然可以隨便構造出一棵樹滿足他所給出的深度要求。 但是他還對于葉子節點的數目有要求。 考慮首先構造一棵樹最大化在滿足給出的深度條…

模型驗證組件 FluentValidation

FluentValidation 是 .NET 下的模型驗證組件&#xff0c;和 ASP.NET MVC 基于Attribute 聲明式驗證的不同處&#xff0c;其利用表達式語法鏈式編程&#xff0c;使得驗證組件與實體分開。正如 FluentValidation 的 介紹&#xff1a; A small validation library for .NET that u…

第二屆中國PWA開發者日

點擊藍字關注我們活動介紹為加速推動漸進式 Web 應用 (PWA) 在中國的發展&#xff0c;微軟與英特爾攜手舉辦“第二屆中國 PWA 開發者日”。本次活動邀請一眾業界大咖圍繞 PWA 展開分享&#xff0c;探討最新技術進展&#xff0c;及 PWA 生態的實踐與落地。期待與您線上相聚。活動…

【GlobalMapper精品教程】018:提取影像數據的范圍生成矢量圖層

文章目錄 1. 加載影像數據2. 生成邊界3. 導出矢量范圍4. 背景影響邊界解決辦法1. 加載影像數據 以DSM為例,加載如下所示: 2. 生成邊界 在影像圖層上右鍵→圖層→【邊界框/覆蓋-創建圖層覆蓋框/多邊形區要素】,如下圖所示: 選擇【否】。 邊界創建完成。 3. 導出矢量范圍 …

MPMoviePlayerController屬性方法簡介

屬性說明property (nonatomic, copy) NSURL *contentURL播放媒體URL&#xff0c;這個URL可以是本地路徑&#xff0c;也可以是網絡路徑property (nonatomic, readonly) UIView *view播放器視圖&#xff0c;如果要顯示視頻必須將此視圖添加到控制器視圖中property (nonatomic, re…

在Leangoo里怎么設置看板周期?

設置看板周期有兩種方式&#xff1a; 1&#xff09;點擊看板上的看板周期時間直接修改 2&#xff09;通過菜單 設置看板周期 瀏覽器訪問官網鏈接&#xff1a;www.leangoo.com 轉載于:https://www.cnblogs.com/shineshine/p/5663104.html

consul部署多節點和consul-template部署

一.consul的介紹 1.1consul是什么&#xff1f; Consul是HashiCorp公司推出的開源工具,用于實現分布式系統的服務發現與配置。 Consul是分布式的、高可用的、可橫向擴展的。它具備以下特性 : service discovery:consul通過DNS或者HTTP接口使服務注冊和服務發現變的很容易,一些外…

基于ABP實現DDD

什么是DDD呢&#xff1f;領域驅動設計[DDD]是一種針對復雜需求的軟件開發方法。將軟件實現與不斷發展的模型聯系起來&#xff0c;專注于核心領域邏輯&#xff0c;而不是基礎設施細節。DDD適用于復雜領域和大規模應用&#xff0c;而不是簡單的CRUD應用。它有助于建立一個靈活、模…

二、通過工廠方法來配置bean

調用靜態工廠方法創建 Bean是將對象創建的過程封裝到靜態方法中. 當客戶端需要對象時, 只需要簡單地調用靜態方法, 而不同關心創建對象的細節. 要聲明通過靜態方法創建的 Bean, 需要在 Bean 的 class 屬性里指定擁有該工廠的方法的類, 同時在 factory-method 屬性里指定工廠方法…