FIS教程入門

時間  2019-11-08
標籤 fis 教程 入門 简体版
原文   原文鏈接

快速入門

FIS是專爲解決前端開發中自動化工具、性能優化、模塊化框架、開發規範、代碼部署、開發流程等問題的工具框架。javascript

使用FIS咱們能夠快速的完成各類前端項目的資源壓縮、合併等等各類性能優化工做，同時FIS還提供了大量的開發輔助功能php

首先咱們瞭解一下FIS的基本命令css

  • fis install: 命令安裝fis倉庫提供的各類 組件、框架、示例、素材、配置等 開發資源。
  • fis release: 命令用於編譯併發布的你的項目，擁有多個參數調整編譯發佈操做。
  • fis server: 命令能夠啓動一個本地調試服務器用於預覽fis release產出的項目。

下面這張圖描述了FIS的整個使用流程html

接下來咱們能夠經過快速入門進一步的瞭解FIS。前端

準備工做

快速入門除了文檔外，咱們還提供了視頻教程，歡迎你們觀看，看到最後有彩蛋喲-`д´- 傳送門java

工具安裝

FIS使用Node.js開發，以npm包的形式發佈。所以使用FIS須要先安裝Node.js，再經過npm安裝命令進行FIS安裝。node

$ npm install -g fis

$ npm install -g fis@1.9.14 此方法能夠選擇安裝FIS版本

安裝遇到困難？點擊這裏jquery

遇到問題：linux

FIS做爲nodejs模塊發佈託管在 npm上，npm是nodejs的包管理工具。查看npm網站git

用戶須要使用npm install命令來安裝FIS。更多npm使用，執行 npm -h 來查看

因爲npm常常被牆，安裝FIS的時候會出現速度過慢，或者安裝不上的問題 。能夠經過 npm的 --registry參數指定倉庫。指定國內的npm鏡像來解決npm被牆的問題。

例如：

npm install some-npm-module -g --registry=國內鏡像

即你能夠經過下面的命令使用cnpmjs倉庫安裝FIS

npm install fis -g --registry=http://registry.npm.taobao.org/

注意 若是提示Error: No compatible version found.. ，有多是npm版本太低致使，能夠參考 #83 解決

注意 若是提示WARN optional dep failed, continuing fsevents 警告，能夠無視，這個是一個可選依賴包，僅在Mac下可使用。

 

 

 

示例準備

在介紹FIS的主要功能前，須要先準備一個示例項目。能夠從Github上獲取。

$ git clone https://github.com/hefangshi/fis-quickstart-demo.git

本地預覽

首先咱們能夠經過 fis server start 命令啓動FIS的本地調試服務器功能對構建發佈的項目進行預覽調試

$ fis server start

注意

  • 若是8080端口被佔用，能夠經過 fis server start -p [port] 指定新的端口。

  • 若是沒有java、php環境，能夠經過 fis server start --type node 啓動Node版fis server。

  • 命令執行後內置服務器會一直運行，能夠經過 fis server stop 命令關閉內置服務器。

本地調試服務器啓動成功後，就會自動打開 http://127.0.0.1:8080 ，可是此時服務器內沒有任何內容。咱們還須要經過FIS發佈DEMO項目才能進行預覽

$ cd fis-quickstart-demo #進入DEMO目錄 $ fis release #編譯併發布DEMO

fis release 命令會將編譯後的項目發佈至本地調試服務器，再次刷新瀏覽器頁面，咱們就能夠到fis-quickstart-demo項目的主頁了。

資源壓縮

資源壓縮一直是前端項目優化中很是重要的一環，使用FIS咱們無需任何配置，只須要一個命令就能夠完成壓縮工做。

$ fis release --optimize

若是以爲參數輸入比較麻煩，實際上也支持參數縮寫，更多的參數能夠參考 fis release -h 或命令行。

$ fis release -o

FIS構建並不會修改源代碼目錄中的內容，而是擁有獨立的產出的目錄，FIS默認的產出目構錄能夠經過 fis server open打開，你也能夠經過 fis release -d path/to/output 指定你但願的輸出目錄，詳情能夠參考FAQ

查看一下網站的靜態資源，咱們會發現腳本、樣式、圖片資源都已經壓縮完成。無需額外的插件和配置編寫，一條命令就完成了壓縮工做，是否是很是方便快捷？

FIS默認會調整全部資源引用的相對路徑爲絕對路徑，若是隻是單純的但願對項目的腳本、樣式、圖片進行壓縮，不但願對資源引用地址作調整，能夠直接使用基於FIS封裝的spt。

 

添加文件版本

FIS可以根據靜態資源的內容自動生成文件版本，自動更新資源引用路徑，解決緩存更新問題，告別手動更新時間戳。

咱們經過開啓 --md5 參數，爲項目中的靜態資源添加md5版本號

$ fis release --optimize --md5 # fis release -om

刷新頁面，咱們能夠看到全部資源均加上了md5版本號

資源壓縮

仍是喜歡時間戳？沒問題，FIS也能夠知足你的需求，點擊這裏

 

資源合併

設置打包

FIS能夠經過pack來進行資源文件的合併，好比咱們須要將DEMO中的公共庫文件打包在一塊兒，能夠修改fis-conf.js配置，加入pack配置

fis.config.set('pack', { 'pkg/lib.js': [ '/lib/mod.js', '/modules/underscore/**.js', '/modules/backbone/**.js', '/modules/jquery/**.js', '/modules/vendor/**.js', '/modules/common/**.js' ] });

設置完pack後，FIS默認只會進行文件打包，不會對頁面中的靜態資源引用進行替換，咱們能夠經過引入後端靜態資源管理來加載打包模塊。不過也能夠利用fis-postpackager-simple插件，能夠自動將頁面中獨立的資源引用替換爲打包資源。

插件安裝

FIS的編譯系統擁有一個使用簡單、擴展方便的插件體系，這套插件體系保證了FIS編譯工具的靈活性和生命力。這裏咱們簡單介紹一下FIS插件的安裝方法，更加詳細的插件系統介紹能夠查看配置API modules。

插件的安裝分爲兩步，首先咱們須要經過npm包管理工具進行插件安裝

$ npm install -g fis-postpackager-simple

fis-postpackager-simple插件是提供給純前端應用的打包合併插件，其餘定製解決方案，如fis-plus、yogurt等不須要這個插件，須要查看各自的文檔瞭解使用方式。

插件安裝到本地後，咱們還須要經過項目配置文件開啓插件，修改項目根目錄下的fis-conf.js配置，開啓fis-postpackager-simple插件

$ cd fis-quickstart-demo $ vi fis-conf.js #vi是linux下的文本編輯器，windows用戶能夠選用任意文本編輯器對fis-conf.js文件進行編輯。 
//file : fis-conf.js fis.config.set('modules.postpackager', 'simple');

應用打包

爲了開發調試時更加方便 fis release 默認不會合並資源，在指定了 --pack 參數後，FIS纔會進行打包合併處理。

$ fis release --optimize --md5 --pack # fis release -omp

再次瀏覽咱們能夠發現原有的基礎類庫引用已經被替換爲了 lib.js ，關於fis-postpackager-simple插件更多的靜態資源處理策略和使用方法，請參考fis-postpackager-simple。

資源合併

自動打包

利用simple插件，咱們還能夠按頁面進行自動合併，將沒有經過pack設置打包的零散資源自動合併起來。

//file : fis-conf.js //開啓autoCombine能夠將零散資源進行自動打包 fis.config.set('settings.postpackager.simple.autoCombine', true);

再次運行FIS構建項目

$ fis release -omp

咱們會發現剩餘的零散資源已經被自動合併了。

人工干預合併

合併圖片

經過上述幾個步驟，咱們已經成功將腳本資源和樣式表資源進行了合併，可是爲了進一步的減小HTTP鏈接數，咱們還能夠對引用的圖片資源進行進一步的合併。

用於圖片合併的插件csssprites已經在FIS中內置了，所以無需安裝，只須要在fis-conf.js的配置中開啓便可

//爲全部樣式資源開啓csssprites fis.config.set('roadmap.path', [{ reg: '**.css', useSprite: true }]); //設置csssprites的合併間距 fis.config.set('settings.spriter.csssprites.margin', 20);

使用csssprites合併的圖片須要在圖片路徑處添加query標識，示例項目中已經預先添加，更詳細的使用方法能夠參考使用文檔

再次運行FIS構建項目

$ fis release -omp

刷新一下，添加幾個待辦項，咱們會發現全部待辦項的圖片都合併在了一張圖片中。

人工干預合併

輔助開發

語言擴展

使用FIS能夠方便的將各類異構語言轉換爲前端語言，好比說能夠將CoffeeScript編譯爲JavaScript、Less編譯爲CSS、前端模板預編譯等等，而且能夠作到各類異構語言無縫混用，咱們以Less爲例演示如何使用FIS來擴展前端開發語言。

更多的語言擴展類插件能夠查看更多插件

插件安裝

$ npm install -g fis-parser-less

開啓插件

//file: fis-conf.js //後綴名的less的文件使用fis-parser-less編譯 //modules.parser.less表示設置後綴名爲less的文件的parser，第二個less表示使用fis-parser-less進行編譯 fis.config.set('modules.parser.less', 'less'); //將less文件編譯爲css fis.config.set('roadmap.ext.less', 'css');

快速試用

在fis-conf.js同目錄編寫一個LESS文件

body { .container { width: 980px; } }

使用發佈到output目錄中

$ fis release -wd output

能夠看到在output目錄中，原有的less文件已經被編譯爲了css文件

body .container { width: 980px; }

因爲咱們添加了 -w 參數，你還能夠隨意修改LESS文件，FIS將會自動監聽文件修改，自動編譯發佈CSS文件

自動化

文件監視

經過文件監視功能，咱們能夠要求FIS在項目文件出現修改時，自動增量構建項目文件。而且增量構建是考慮了各類嵌入關係的，好比a.css文件內嵌了b.css文件，那麼當b.css文件修改時，FIS會自動從新構建a.css和b.css兩個文件。

可使用快速入門中的fis-quickstart-demo試試看，首先開啓文件監聽功能

fis release --watch #fis release -w

隨意修改項目內容，返回頁面刷新便可查看到相應的變化。

自動刷新

咱們只須要在文件監視的參數基礎上添加 --live 或 -L 參數便可實如今項目文件發生修改後，自動刷新頁面的功能，大幅提升頁面製做效率。

fis release --watch --live #fis release -wL

隨意修改項目內容，頁面將會應用修改並自動刷新。

要求瀏覽器環境支持WebSocket。

快速部署

經過配置咱們能夠快速的將FIS的編譯結果上傳至指定的文件夾甚至遠程服務器與後端聯調，結合文件監視、自動刷新功能咱們能夠作到修改文件後自動更新遠程服務器內容，並刷新調試頁面。詳細配置能夠參見deploy。

更多的輔助開發能力能夠參考命令行。

 

命令行

三條命令，知足你的全部需求

執行 fis --help 讓咱們來看一下fis命令的相關幫助：

Usage: fis <command>

    Commands:

      release     build and deploy your project
      install     install components and demos
      server      launch a php-cgi server

    Options:

      -h, --help     output usage information
      -v, --version  output the version number
      --no-color     disable colored output

正如你所見，使用fis你須要——也只須要——記住三條命令：

  • fis release： 編譯併發布你的項目
  • fis install：安裝fis倉庫提供的各類 組件，框架，庫，樣例項目，甚至配置文件 等模塊
  • fis server：啓動一個 1.8M 大小的內置調試服務器，它採用php-java-bridge技術實現， 依賴java、php-cgi外部環境 ，能夠 完美支持運行php程序 哦。

接下來，就讓小編分別介紹這三個命令的使用，見證奇蹟的時刻到了。。。

fis install <name>

難度等級：★☆☆☆☆

install命令被設計用來 各類安裝，不管你是想初始化一個模塊，仍是想下載一個前端基礎庫，亦或下載一份配置文件，總之但凡開發須要的，只要fis倉庫裏有，你就用它來安裝就對了。 理論上任何資源均可以經過這個命令來獲取，由於它的實現很是簡單： 從fis代碼倉庫下載->解壓到當前目錄。

fis install

少說多練，我們先來裝個小東西瞧瞧：

$ fis install firstblood-demo install [firstblood-demo@latest]

若是你在執行命令的目錄下發現了一個叫firstblood的目錄，恭喜你，你已踏出前端工業化之路的第一步啦！

 

fis release [options]

難度等級：★★★☆☆

release是一個很是強大的命令，它的主要任務就是進行代碼的 編譯 與 部署，它的參數囊括了前端開發所需的各類基礎功能：

  1. 添加 --watch 或 -w 參數，支持對項目進行增量編譯，監聽文件變化再觸發編譯
  2. 添加 --live 或 -L 參數，支持編譯後自動刷新瀏覽器。Liveload功能須要瀏覽器支持Web Socket功能，例如Chrome、Firefox、Safari等瀏覽器。

  3. 添加 --dest [path|name] 或 -d 參數，來指定編譯後的代碼部署路徑，支持發佈到 本地目錄、本地調試服務器目錄、遠程機器目錄(須要配置)，它與--watch參數配合使用，可讓你的代碼保存就上傳！並且--dest值支持逗號分隔，這也就意味着，你 一次編譯能夠同時發佈到本地以及多臺遠程機器上！舉幾個栗子：

    • 發佈到fis server open目錄下用於本地調試

      fis release
# or
fis release --dest preview

    • 發佈到項目根目錄的output目錄下， 注意，這裏的output實際上是一個內置的部署配置名，而不是一個目錄名。

      fis release -d output

    • 發佈到相對 工做目錄 的路徑

      fis release -d ../output

    • 發佈到絕對路徑

      fis release -d /home/work/ouput
# win fis release -d d:/work/output

    • 使用配置文件的 deploy節點配置 進行發佈，此配置可將代碼上傳至遠端

      fis release -d remote

    • 以上全部發布規則任意組合使用（一次編譯同時上傳到多臺遠端機器 & 項目根目錄下的output & 調試服務器根目錄 & 本地絕對路徑）

      fis releaes -d remote,qa,rd,output,preview,D:/work/output

  4. 添加 --md5 [level] 或 -m [level] 參數，在編譯的時候能夠對文件自動加md5戳，今後告別在靜態資源url後面寫?version=xxx的時代

  5. 添加 --lint 或 -l 參數，支持在編譯的時候根據項目配置自動代碼檢查

  6. 添加 --test 或 -t 參數，支持在編譯的時候對代碼進行自動化測試

  7. 添加 --pack 或 -p 參數，對產出文件根據項目配置進行打包

  8. 添加 --optimize 或 -o 參數，對js、css、html進行壓縮

  9. 添加 --domains 或 -D 參數，爲資源添加domain域名

初步瞭解以後，讓咱們對剛剛下載的項目作一次編譯，look at me：

$ cd firstblood $ fis release --md5 --dest ./output [WARNI] missing fis-conf.js

這裏有個小小的warning，說找不到fis的配置文件，我們不用管它，由於咱們要體驗 零配置 使用。接下來進入到firstblood/output目錄看一下產出的文件，尤爲是index.html，你將看到fis的自動化工具對 html、js、css各自擴展了三種語言能力：

  • 資源定位：獲取任何開發中所使用資源的線上路徑；
  • 內容嵌入：把一個文件的內容(文本)或者base64編碼(圖片)嵌入到另外一個文件中；
  • 依賴聲明：在一個文本文件內標記對其餘資源的依賴關係；

有了這三種語言能力，你的團隊前端工業化水平將有很大的提高，由於：

  1. 資源定位能力，能夠有效的分離開發路徑與部署路徑之間的關係，工程師再也不關心資源部署到線上以後去了哪裏，變成了什麼名字，這些均可以經過配置來指定。而工程師只須要使用相對路徑來定位本身的開發資源便可。這樣的好處是 資源能夠發佈到任何靜態資源服務器的任何路徑上而不用擔憂線上運行時找不到它們，並且 代碼 具備很強的可移植性，甚至能夠從一個產品線移植到另外一個產品線而不用擔憂線上部署不一致的問題。
  2. 內容嵌入能夠爲工程師提供諸如圖片base64嵌入到css、js裏，前端模板編譯到js文件中，將js、css、html拆分紅幾個文件最後合併到一塊兒的能力。有了這項能力，能夠有效的減小http請求數，提高工程的可維護性。fis不建議用戶使用內容嵌入能力做爲組件化拆分的手段，由於下面這個能力會更適合組件化開發。
  3. 依賴聲明，爲工程師提供了聲明依賴關係的編譯接口。fis在執行編譯的過程當中，會掃描這些編譯標記，從而創建一張靜態資源關係表，它會被產出爲一份 map.json 文件，這份文件詳細記錄了項目內的靜態資源開發路徑、線上路徑、資源類型以及 依賴關係 和 資源打包信息，這樣，使用fis做爲編譯工具的產品線，就能夠將這張表提交給後端或者前端框架去運行時根據組件使用狀況來按需加載資源或者資源所在的包，從而提高前端頁面運行性能。

ok，回到剛剛的firstblood示例項目，進入到output目錄，你將看到：

  1. 全部的資源，除了html都加了md5戳
  2. 多了一個map.json文件，裏面記錄了當前項目下的靜態資源信息。
  3. 編輯器打開index.html文件，你將看到更多驚喜。

接下來，咱們使用install命令安裝一個配置文件，用於 調整文件編譯後的部署路徑 ：

$ fis install firstblood-conf

此時firstblood項目目錄下會多出一個fis-conf.js文件，讓咱們看一下里面的內容：

fis.config.merge({ roadmap : { domain : { //全部css文件添加http://localhost:8080做爲域名 '**.css' : 'http://localhost:8080' }, path : [ { //全部的js文件 reg : '**.js', //發佈到/static/js/xxx目錄下 release : '/static/js$&' }, { //全部的css文件 reg : '**.css', //發佈到/static/css/xxx目錄下 release : '/static/css$&' }, { //全部image目錄下的.png，.gif文件 reg : /^\/images\/(.*\.(?:png|gif))/i, //發佈到/static/pic/xxx目錄下 release : '/static/pic/$1' } ] } });

刪除一下output目錄，再次執行編譯命令：

$ fis release --md5 --domains --dest ./output

就能夠看到，fis調整了編譯產出的目錄結構。編輯output目錄下的index.html，還會發現，fis將全部引用資源的地方也都調整爲了發佈路徑，全部css也自動添加了域名！

fis release命令還有強大的自動上傳功能，這篇文檔不會詳細介紹此功能的使用方式，但小編能夠先發個截圖表示一下。截圖中顯示的是我在windows下編譯了firstblood項目，而後自動同步到個人linux測試機上的截圖。以後我修改了index.html文件，它又幫我秒傳上去了，嚯嚯！

自動上傳功能

當你學習到這裏時，恭喜你，你已掌握了F.I.S自動化/輔助開發工具的大部分功能，下面一條命令，會給你帶來更爽的開發體驗。

 

fis server <command> [options]

難度等級：★★☆☆☆

考慮到工程師須要在後端程序沒開始的時候就能寫點東西看看效果，或者離開公司在別處與妹子把酒言歡時忽然來了靈感要寫碼，沒有一個小巧的調試服務器怎麼能行？！fis團隊將本地調試服務器做爲一項重要功能來開發，賦予工程師無處不在的寫碼調試能力。不要小看這個調試服務器，它是特別定製的，使用php-java-bridge技術實現，完美支持運行php程序，能夠比較真實 的模擬產品線線上運行環境。

fis的調試服務器依賴於用戶本地的 jre 和 php-cgi 環境，因此：

  • 若是沒有jre環境，請移步 這裏 下載
  • 若是沒有php-cgi環境的，請移步 這裏 下載
  • 請把java、php-cgi命令添加到環境變量中

搞定環境後，讓咱們來啓動調試服務器看看：

$ fis server start checking java support : version 1.6.0 checking php-cgi support : version 5.2.11 starting fis-server on port : 8080

不須要再使用調試服務器時，能夠經過 fis server stop 關閉

服務器啓動以後，它會自動檢查環境，最後告訴你它監聽了8080端口，這個時候，你的瀏覽器應該打開了一個調試服務器根目錄的瀏覽頁面，地址是 http://localhost:8080/。

在剛剛的firstblood項目中執行命令：

$ fis release --md5 --optimize --watch

如今，fis已經將編譯好的代碼發佈到調試服務器中啦，刷新瀏覽器，你會看到咱們的firstblood示例項目的運行效果。此時，你修改項目文件都將自動編譯併發布到調試服務器目錄下，看看頁面源代碼，你會發現更多驚喜！順便恭喜你，至此你已徹底掌握了fis的基本用法，你能夠藉助fis這個利器去挑戰大型商業產品開發了！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程