FEZ

FEZ 是面向前端模塊化工程的開發框架。主要目的是統一前端開發模式和項目開發結構，自動化前端工作流，提高開發效率和開發質量。使用持續集成等軟件工程的架構模式，集成眾多業界先進的解決方案，讓研發人員更專注于業務邏輯的實現。核心包括功能模塊化、結構規范化、及開發自動化。

FEZ倡導的前端開發理念

采用響應式界面布局，一份代碼各種終端設備兼容，自動適配PC端、手機端、PAD端、及各種大小的屏幕，并可以嵌入任何APP中使用。為產品的多元化幾何倍的提高開發效率，極大降低多平臺項目的開發成本。
模塊化/組件化開發，將復雜的系統細分為模塊，分治管理，并有統一的文件結構，兼顧模塊的通用和復用原則，極大提高項目的功能擴展和可維護性。
積木式、組件化快速構建頁面，使用API接口/Mock數據前后端分離、并在流程上讓設計、前端、后端、測試團隊并行工作，極大提高團隊研發效率。
使用國際前沿的工程自動化技術解決項目復雜的資源管理和大量重復的代碼編譯工作。

FEZ使用場景

【一份代碼支持多終端響應式WEB應用】參考示例：fez-demo-handlebars
【基于Vue的高性能大中型WEB應用】參考示例：fez-demo-vue
【基于React的高性能大中型WEB應用】參考示例：fez-demo-react
【高性能移動端混合APP及H5應用】參考示例：fez-demo-framework7
【快速構建中小型官方網站、活動、專題、宣傳頁面】參考示例：fez-demo-75team fez-web
【網頁中顯示藝術/特殊字體的官網網站、活動專題】參考示例：fez-demo-fontmin

FEZ核心特性

功能模塊化

FEZ 支持使用ES6 Module來組織前端代碼，支持使用ES5/ES6/ES7等標準特性開發項目，通過Babel編譯完美運行在瀏覽器中。可以整合如Vue、React等MVVM框架實現單文件組件形式的高效開發體驗。

模塊化是一種處理復雜系統分解為更好的可管理模塊的方式。每個模塊完成一個特定的子功能，所有的模塊再進行統一的拼裝和加載，成為一個整體，完成整個系統所要求的功能。有關模塊化的更多知識請參考：【github.com/fouber/blog】【www.zhihu.com/question/37…】

結構規范化

FEZ 將復雜的系統劃分為功能頁面(組件)，將復雜的頁面(組件)劃分為若干個模塊，將模塊分為：獲取數據、渲染顯示、交互操作，并且都有統一的文件結構。

統一的項目開發結構

.
├── fez.config.js
├── gulpfile.babel.js
├── package.json
└── src├── lib├── static│?? ├── fonts│?? ├── images│?? └── styles│       ├── page1.scss│??     └── page2.scss└── views├── page1│?? ├── index.html│?? ├── index.js│   ├── service.js│?? └── module│         ├── mod1│         │    └── index.js│         └── mod2│              └── index.js├── page2│?? ├── index.html│?? ├── index.js│?? └── module│         ├── mod1│         │    ├── index.js│         │    └── service.js│         └── mod2│              └── index.js│              └── service.js└── public├── module└── utils復制代碼

開發自動化

FEZ 集成了大量自動化前端工作流。任何機械的重復性的工作都應該交給 FEZ 來完成。

自動化搭建本地研發環境，快速響應文件更改并自動刷新瀏覽器。
自動化同步瀏覽器中滾動頁面、點擊等行為到其他瀏覽器和設備中。
自動化編譯ES6/ES7或CommonJS標準的JS代碼，并生成source map便于瀏覽器端調試。
自動化編譯Sass/Less/Stylus => CSS文件。
自動化使用Autoprefixer添加CSS3的各種瀏覽器前綴。
自動化處理第三方框架庫JS腳本、CSS樣式、Font字體等并自動化插入到頁面。
自動化根據配置合并前端JS、CSS文件。
自動化壓縮JS、CSS、HTML、圖片、字體等靜態資源。
自動化Svg轉Icon圖標、雪碧圖合成、移動端高清@2x圖片適配，并自動化生成對應樣式。
自動化Svg圖標合并、自動化使用symbol形式引入頁面。
自動化轉換所有CSS樣式中的PX單位為REM單位。
自動化轉換所有圖片為WebP格式并生成對應樣式文件。
自動化注入WebP瀏覽器支持檢測腳本并替換所有的WebP文件。
自動化生成所有靜態資源的MD5版本號。
自動化添加所有靜態資源添加CDN地址。
自動化搭建用于測試上線代碼的多終端測試環境。
自動化通過SFTP部署上線、或部署靜態資源。
自動化通過Mock方式構建隨機數據，模擬研發和上線的數據環境。
自動化創建統一結構化項目、及統一結構化的項目頁面。
自動化轉換TTF為網頁字體(eot,svg,ttf,woff,woff2)并生成font-face樣式文件。
自動化深度無損壓縮PNG/JPG/JPEG圖片。

FEZ安裝使用

Mac系統推薦使用 iterm2 及 oh my zsh
類 Unix 系統，請打開任意終端輸入命令執行。
Windows 用戶請先安裝 git，然后在 Git Bash 下執行命令

安裝

1. 安裝 Node 和 NPM

詳細過程參考官網 https://nodejs.org (中文網站 http://nodejs.cn/)
Node >= 5.10，建議使用最新穩定版(LTS)。
Ubuntu 用戶使用 apt-get 安裝 node 后，安裝的程序名叫 nodejs，需要軟鏈成 node。
Windows 用戶安裝完成后需要在 CMD 下確認是否能執行 node 和 npm。

FEZ不能保證所有 window系統下默認的 Nodejs 環境都能正常運行。可以嘗試安裝nodejs的windows開發工具集

2. 全局安裝 Gulp4.0

任意目錄執行

npm install gulp@next -g
復制代碼

詳情請參考 Github 社區 Gulp

目前Gulp發行版本是3.9.1，如果安裝過全局的非4.0版本 gulp 請先卸載 npm uninstall gulp -g

3. 全局安裝 Bower (可選安裝)

任意目錄執行

npm install bower -g
復制代碼

使用Bower主要是為了方便管理基于瀏覽器的第三方框架庫，通過頁面自動化注入技術解決頁面框架庫的引入和管理問題，如果您使用node_module資源、或用固定的CDN資源、或手動在頁面引入第三方框架庫，可以選擇不安裝。

下載FEZ工程框架

使用Git下載(推薦)

git clone git@github.com:furic-zhao/fez.git
復制代碼

使用瀏覽器下載

將https://github.com/furic-zhao/fez/archive/master.zip下載解壓到任意目錄。

使用FEZ工程框架

1. 安裝FEZ的NPM依賴包（在FEZ工程目錄執行）

npm install
復制代碼

2. 創建項目 （在 FEZ 工程目錄執行）

gulp project --dir=demozhj
復制代碼

在FEZ工程目錄下會自動創建結構化的 demozhj 項目

demozhj
├── fez.config.js            /／ FEZ功能配置文件
├── package.json             /／ 項目npm配置文件
├── gulpfile.babel.js        /／ gulp入口文件
└── src                      /／ 源碼目錄├── lib                  /／ JS公共庫文件目錄├── static               /／ 靜態資源目錄│   ├── fonts            /／ 字體目錄│   ├── images           /／ 圖片目錄│   └── styles           /／ 樣式目錄│       └── index.scss   /／ 首頁樣式文件└── views                /／ 業務邏輯存放目錄├── index            /／ 首頁目錄│   ├── index.html   /／ 首頁Html文件│   ├── index.js     /／ 首頁業務邏輯腳本文件│   └── module       /／ 首頁模塊目錄└── public           /／ 業務邏輯公共文件目錄├── module       /／ 公共模塊目錄└── utils        /／ 公共工具類庫目錄
復制代碼

創建項目會默認創建index頁面。

3. 運行項目

進入 demozhj 項目目錄執行

gulp
復制代碼

FEZ 會自動打開默認瀏覽器進入研發環境，項目任意文件的更改都會自動刷新瀏覽器，請盡情享用FEZ為你帶來的愉悅開發體驗！

命令說明

gulp
復制代碼

FEZ 會自動打開系統默認瀏覽器進入研發環境，您可以打開多個不同終端和不同類型的瀏覽器訪問同一開發頁面，開發過程中任何文件的更改，或是在任何一個終端的瀏覽器中的操作行為，都會同步到每個終端界面，實時查看在每個終端的修改效果。

gulp dist
復制代碼

FEZ 會自動化編譯源碼目錄中的所有文件(js、sass、less、html、圖片、字體等)，自動化生成md5版本號，并將編譯后的上線代碼發布到dist目錄。之后通過其它途徑、或流程工具發布dist目錄到線上服務器。

本地測試上線代碼（在項目目錄執行）

gulp test
復制代碼

FEZ 會自動化構建本地測試環境，并自動打開系統默認瀏覽器對dist上線目錄中的代碼真實性的模擬服務器上的操作效果，可以讓測試人員打開多個不同終端和不同類型的瀏覽器一次性測試所有平臺、所有瀏覽器中的最終產品的交互和操作。

gulp sftp
復制代碼

FEZ 會調用項目目錄中fez.config.js的sftp配置信息，通過SSH方式快速部署dist 中的上線代碼，或是部署dist目錄中的靜態資源。

gulp zip
復制代碼

FEZ 會自動化將dist目錄中所有上線代碼打包成dist.zip文件，用于通過其它流程工具部署上線。

svg => icon 轉換（在項目目錄執行）

gulp svg2icon
復制代碼

FEZ 會調用項目目錄中fez.config.js的svgIcons配置信息，自動化轉換svg圖標為icon字體文件并生成對應的樣式文件。

gulp sprite
復制代碼

FEZ 會調用項目目錄中fez.config.js的sprites配置信息，自動化合并slice目錄中的小圖標為雪碧圖并生成sprite.png圖片到images/sprite／目錄，同時生成對應的樣式文件(可配置生成css/less/sass/scss)到styles/sprite/目錄

創建結構化模版頁（在項目目錄執行）

gulp page --dir=demopage
復制代碼

demopage 頁面結構

.
└── src├── static│   └── styles│       └── demopage.scss  /／ demopage 頁面樣式文件└── views└── demopage           /／ demopage 頁面目錄├── index.html     /／ demopage HTML頁面├── index.js       /／ demopage 業務邏輯腳本文件└── module         /／ demopage 模塊目錄
復制代碼

gulp fontmin
復制代碼

FEZ 會調用項目目錄中fez.config.js的minfonts設置的網頁中要顯示的文本信息，將src/static/ttf/目錄中存放的普通大文件ttf字體生成網頁字體(eot,svg,ttf,woff,woff2)，并將生成后的小文件網頁字體格式存放在src/static/fonts/目錄下，同時生成對應的@font-face樣式文件(css,less,sass,scss)，可在頁面樣式中直接引用。FEZ讓你在網頁中大量的使用特殊字體成為可能，請盡情發揮設計師的想象力。