1. 前端工具裡面gulp和fis，有哪些優缺點
過去幾年一直不斷地提到Web應用新世代的成長，這些App內容變得越來越豐富，帶動了前端整體的復雜度大幅增加。像是Backbone(藉由提供模型)、AngularJS和EmberJS框架都是創造新App非常好的框架，增強了所有Web的功能;同時，Web程式語言Javascript在普及度和成熟度上已經進步了非常多，而且還能和NodeJS在後端協同工作。但為了能持續面對復雜度的新挑戰，開發者已經創造工具使整體開發過程更加流暢，從測試框架到分析工具，這些成熟又有用的工具把最棒的體驗帶給我們的使用者。就如同剛剛所提到的，我們喜歡能夠幫助我們提供最棒品質的軟體，同時也能使得生活變得更加簡單方便，本文要分享給大家5個我們每天面對挑戰所使用最棒的工具和框架：Chromedevtools這是目前最好的前端開發工具!Chrome自從它誕生後，就已經大量投資在開發者工具軟體，至今仍不斷的在改善它，每一個發布會(每六周一次)都會伴隨著它自己的全新開發功能。這個開發工具是一個完整的多元軟體套件，你可以實時編輯DOM(HTML)/CSS，當進行一個深入的效能分析時，可以一步步找出Javascript的錯誤，甚至能增加終端機指令。感謝有它，近來解決了回報效能的問題。DOM/CSS編輯器是非常強大的工具，能即時回饋給你的團隊，能夠在UI/UX的新功能上很快地執行迴圈。官方網站和GoogleDevelopersYouTube管道都是資訊的金礦，比如說，命令列的API(應用程式介面，)包含非常多有用的指令，比如說從控制台功能中的復制指令，復制到剪貼簿上。許多詳細的使用手冊同樣在HTML5Rocks里都能參考。如果你的好奇心很強，並且想了解瀏覽器究竟是如何運作的，那麼你會在這些教學里學到很多東西，幫助你全面掌控開發周期。除了上述的之外，最重要的是，透過網路工具你能知道現在在介面之下到底發生了什麼事情，以及優化你的下載速度，時間軸會以更深入的角度來告訴你瀏覽器做了哪些事情。如果你跟我們一樣充滿好奇心，你可以學到關於瀏覽器、Web是如何運作的，如此一來，你就可以反過來完整的操控應用程式的生命周期。以我個人觀點來說，如果它們依照現在的路線持續發展下去，肯定會變成Web供應開發商最終的IDE()，最強大的放入整合發展空間。Grunt說到工作自動化，Grunt是我們的首選。它是Javascript跑任務的專家，針對一般的任務提供大量整合性的外掛程式，擴展程度仍很高，提供很多選項讓你能夠自由的寫任何符合需求的工作內容。最棒的是，你能夠將這些任務結合創造更強大而復雜的工作。Grunt的范疇超出僅僅是自動化前端相關的工作，舉例來說，當我們在開發時，我們利用它來測試PHP：我們同樣也用它暫時解決在Vagrant中自動監測與保護的rsync(Unix下的一款應用軟體)一些效能問題，這是近來才被引進的方法。Grunt提供很廣泛的外掛程式，從瀏覽檔案夾、診斷訊息、編譯程式到最簡化你的程式碼。它的句法是一致且容易學習的，可以讓瑣碎的工作變得簡單。LiveReload你有沒有算過，每天平均有多少次會按鍵盤上的重新整理鍵呢?非常多，對吧!LiveReload是一個簡單的Web協議，不論檔案在哪時候被修改而觸發事件，客戶都能自行處理事情;客戶端和伺服器端都能進入各種不同的實作。說到Chrome的擴充功能，Chrome商店就是一個很強大的例子。去體驗看看吧，你一定能發現很多讓生活變得更簡單的東西。以下幾個是我們最喜歡的：1.WhatFont：你可以透過它知道在任何網站上內容的字型是什麼，當你在找最適合的文字編排時，或是重新調整美化你的字型風格時，它是非常好用的小工具。2.Pageruler：另一個很好用的應用程式，主要是因為任何前端開發者，都對像素要求百分之百的完美。3.ProxySwitchySharp：說到找出在地化資訊錯誤最佳的工具就非它莫屬，在地化資訊是哪些?比如說電話號碼、預設貨幣等等。想知道嗎?在ChromeApp中你能得到資訊!Mocha/Chai/Sinon測試測試，測試到你很想吐嗎?這是很常發生的，因為需要一大堆引導指令，而且在前端開發的初始階段沒有設計好測試，那麼後面的工作往往會變得非常困難。很幸運的是，我們現在有很棒的測試架構，就和你已經在使用的其他語言一樣，非常的有用和強大。兩個主要的框架是Jasmine和Mocha。過去我兩個都有使用過，最終選擇了後者，Mocha。它最主要的優勢在於，當你必須和非同步的編碼一同運作的時候，在Javascript的發展中它最普遍使用的方法。比如說，舉一個非常簡單的例子，這里有兩個不同的規格，一個由Jasmine寫，另一個則是Mocha/Chai：Jasmine的句法選擇是預設的，並以官方的文檔作說明，非官方的擴充功能增進了Jasmine非同步特色，提供和Mocha一樣的功能。花一些時間，來了解這個範例以及觀察Mocha的語法有多清楚。不像Jasmine，Mocha只提供行為的測試架構，關於BDD(Behavior-drivendevelopment)，而不是假物件(mock，主要存在的目的是協助單元測試程式可以順利進行)或是斷言(assertion，放在程式中的一階邏輯，如果一個結果為真或為假的邏輯判斷式)架構，因為它整合專用架構非常棒，就像是Chai和Sinon，幾乎沒什麼不好的地方。Sinon有完整的功能來mock假物件和stub假物件(用途和mock很接近)。舉例來說，你可以如何評估的方法，一直以來都使用Sinon的間諜類型(擷取自很傑出的文檔)：Chai的功能是在斷言這方面是非常傑出的，以和平常的語言非常相似的語法，舉例來說你可以看到以下的程式碼，就知道它很清楚簡單：Karma最後一個是Karma，Karma(一個測試程式是否符合需求的測試工具)是Javascript的程式測試工具，由AngularJS的團隊寫的，現在你可以徜徉在Mocha、Chai和Sinon中寫測試程式，何不同時用它們持續地測試、跑程式，給你實時的回饋呢?Karma可以讓你從你的工作站到持續整合製造(CI，ContinuousIntegration)執行你的測試，它能同時發布到多個瀏覽器(Chrome、Firefox、IE和PhantomJS等等)，除此之外，還能跑你的測試來挑戰它們，給予你對你的程式碼最大的信心。當然，我們甚至還沒有提到任何文字編輯器，SublimeText和Vim我們都有用，它們是我們生產力最最重要的基礎。然而在做開發的過程中，最真實的快樂就是你第一次寫的程式進行監測然後得到結果，這是一種實時的成就感，然後接下來你就能將它們發布到瀏覽器上。現在你已經非常有能力成為前端的忍者，在你的開發旅途中已經准備好要迎接每個挑戰了。。
2. fis什麼意思
FIS全稱為Front-end Integrated Solution，即前端集成解決方案。前端團隊發展大多會經歷規范設計、技術選型、系統拆分、性能優化等階段，其中的技術需求可以總結為前端集成解決方案。
3. 前端工具裡面gulp和fis，有哪些優缺點
優點和缺點：
gulp輕量級，你的項目可能由於歷史原因，或者其他原因，fis的一些基礎要求可能和你項目有沖突。比如你可能只想處理整個項目中的一個模塊，或者你不太想在本地開發使用絕對路徑，或者你的項目和程序員分工頁面模板（jsp，php等）和前端資源不在同一個資源位置。這個時候你更適合使用gulp來定製自己的解決方案。
但是gulp使用者來說，並不是每個人都有非常強的處理錯誤能力，如果遇到插件bug（當然這種情況很少見），需要聯系作者，這個是一件非常棘手的事情。但是這種風險是存在的。
fis相對來說因為有專門的QQ群天天為用戶答疑解惑收集bug處理bug，壓根就不用擔心太多問題。另外fis的一些解決方案確實是目前前端優化裡面會需要真實考慮面對的。接觸fis會讓你對整個前端的優化和載入管理有更深入的了解，當然如果你已經了解很透徹了。我相信對於選擇gulp 和fis這種困惑應該也不會存在。
4. linux 怎麼給往往也升級fis
第一種使用ifconfig命令配置網卡的ip地址。此命令通常用來零時的測試用，計算機啟動後
ip地址的配置將自動失效。具體用法如下。Ipconfig ethx ipadd netmask x.x.x.x。
其中ethx中的x代表第幾快乙太網卡，默認第一塊為0.ipadd代表ip地址。x.x.x..x為子網掩碼。例如給網卡eth0配置的ip地址為192.168.1.1 子網掩碼為 255.255.255.0 。如下下圖所
注意（此方法配置的ip地址後計算機從新啟動將會失效）
（2）neat命令
Neat命令=redhat-config-network圖形下配置ip地址
雙擊圖下畫紅線的部分
雙擊劃線部分後出現下圖所示：根據要求配置相關信息
雙擊ok配置完畢。配置完後重啟服務，並查看配置ip地址。
注意（此方法配置的ip地址後計算機從新啟動仍然有效）
（3）netconfig命令
輸入netconfig後將會出現下圖所示，單擊yes按鈕。
進行相關配置後ok退出。
注意（此方法配置的ip地址後計算機從新啟動仍然有效）
（4）vi /etc/sysconfig/network-scripts/ifcfg-ethx
配置完以後重啟動服務.，p地址就配置好了。其實前面3個的配置方法最終還是改變了/etc/sysconfig/network-scripts/ifcfg-ethx下的配置文件罷了。
5. 常見的前端集成部署方案有哪些各自的優缺點是什麼
前端行業經歷了這么長時間的發展，技術元素非常豐富，這里列舉出一般web團隊需要用到的技術元素：
開發規范：包括開發、部署的目錄規范，編碼規范等。不要小瞧規范的威力，可以極大的提升開發效率，真正優秀的規范不會讓使用者感到約束，而是能幫助他們快速定位問題，提升效率。
模塊化開發：針對js、css，以功能或業務為單元組織代碼。js方面解決獨立作用域、依賴管理、api暴露、按需載入與執行、安全合並等問題，css方面解決依賴管理、組件內部樣式管理等問題。是提升前端開發效率的重要基礎。現在流行的模塊化框架有requirejs、seajs等。
組件化開發：在模塊化基礎上，以頁面小部件(component)為單位將頁面小部件的js、css、html代碼片段放在一起進行開發、維護，組件單元是資源獨立的，組件在系統內可復用。比如頭部(header)、尾部(footer)、搜索框(searchbar)、導航(menu)、對話框(dialog)等，甚至一些復雜的組件比如編輯器(editor)等。通常業務會針對組件化的js部分進行必要的封裝，解決一些常見的組件渲染、交互問題。
組件倉庫：有了組件化，我們希望將一些非常通用的組件放到一個公共的地方供團隊共享，方便新項目復用，這個時候我們就需要引入一個組件倉庫的東西，現在流行的組件庫有bower、component等。團隊發展到一定規模後，組件庫的需求會變得非常強烈。
性能優化：這里的性能優化是指能夠通過工程手段保證的性能優化點。由於其內容比較豐富，就不在這里展開了，感興趣的同學可以閱讀我的這兩篇文章 [1] [2]。性能優化是前端項目發展到一定階段必須經歷的過程。這部分我想強調的一點是性能優化一定是一個工程問題和統計問題，不能用工程手段保證的性能優化是不靠譜的，優化時只考慮一個頁面的首次載入，不考慮全局在宏觀統計上的優化提升也是片面的。
項目部署：部署按照現行業界的分工標准，雖然不是前端的工作范疇，但它對性能優化有直接的影響，包括靜態資源緩存、cdn、非覆蓋式發布等問題。合理的靜態資源資源部署可以為前端性能帶來較大的優化空間。
開發流程：完整的開發流程包括本地開發調試、視覺效果走查確認、前後端聯調、提測、上線等環節。對開發流程的改善可以大幅降低開發的時間成本，工作這些年見過很多獨立的系統（cms系統、靜態資源推送系統）將開發流程割裂開，對前端開發的效率有嚴重的阻礙。
開發工具：這里說的工具不是指IDE，而是工程工具，包括構建與優化工具、開發-調試-部署等流程工具，以及組件庫獲取、提交等相關工具，甚至運營、文檔、配置發布等平台工具。前端開發需要工具支持，這個問題的根本原因來自前端領域語言特性（未來我會單獨寫一篇文章介紹前端領域語言缺陷問題）。前端開發所使用的語言（js、css、html）以及前端工程資源的載入與定位策略決定了前端工程必須要工具支持。由於這些工具通常都是獨立的系統，要想把它們串聯起來，才有了yeoman這樣的封裝。前面提到的7項技術元素都直接或間接的對前端開發工具設計產生一定的影響，因此能否串聯其他技術要素，使得前端開發形成一個連貫可持續優化的開發體系，工具的設計至關重要。
6. 前端常用的框架有哪些
首先我想說明一下，我們通常說的js不是框架，是語言，即javascript，據最新世界編程語言排行榜來看，已經上升到了第7位，發展迅猛，其標準是ecmascript，現在基本上是基於ecmascript5。jquery是用js寫的框架，其在dom操作上有很明顯的優勢，也是時下很常用的一個js框架。
至於之外還要學習那些框架呢？
如果你說的是js框架，建議先掌握好jquery，然後還有很多的，比如樓上提到的extjs，近幾年比較流行的angularjs，基於移動端考慮的輕量級仿jquery框架zepto，還有jquery mobile，還有適合寫後端或服務端的node，等等。
如果是web前端框架，就不僅僅是涉及的js了，還有html和css。個人覺得只有這三種語言都涉及到的框架才能說得上是web前端框架。現在比較火的是bootstrap，還有foundation，比較古老的有jqueryui，easyui等等，還有其他很多很多。如果還有算上處理方案及版本升級代碼迭代等，就要用到網路團隊研發的fis這種了。其實內容真的很多很多，前端任重而道遠啊~
7. fis3和webpack有什麼區別
fis/fis3是grunt、gulp之後興起的一個比較優秀的前端工程解決方案。它的本質是基於靜態資源標記+動態解析靜態資源表，在模板、js里邊使用特殊的標記方法引用前端資源，構建的時候生成一張資源依賴表，瀏覽器或者後端模板語言在解析的過程中通過查表得到某個靜態資源在不同環境下的引用路徑，所以不管是純前端渲染（標記方法已經轉換成瀏覽器能識別的了）還是後端（php、node、java）渲染，都很容易支持到，這樣可以做到非常精細化的控制資源的按需載入。可以說fis真正做到了靜態資源動態按需載入。
再來說說webpack，其實本質上是靜態打包，生成chunk需要手動配置entry，雖然可以使用CommonsChunkPlugin、dll等插件輔助提取公共代碼，以及採用code split切割進行懶載入，但這個粒度十分難把握，配置起來也比較困難（fis是自動生成依賴關系和自動處理懶載入）。
單從原理上來講，fis比webpack要先進好多好多。但是fis先進的理念也成為它的一個缺陷，就是自定義的一套標記語言，大量自定義的資源標記語法並不能被瀏覽器直接接解析或者被社區流行的工具（browserify/babel）轉換，比如fis依賴自家定製的mod.js來解析`require()`函數（即定位資源）以及資源base64內嵌語法`__include()`等。這一點直接導致了fis無法和後來的強大的npm社區對接，大量的npm前端模塊在fis用不了，筆者認為這是導致各公司在選擇前端統一的構建工具標准時不考慮fis的最大原因吧。
fis的作者
曾經說過，webpack只差一步——生成支持靜態資源表，就完美了，深以為然！目前，webpack好像有生成sourcemap的插件，但是缺少配套的解析sourcemap的工具，後端的模板引擎貌似也沒有支持sourcemap。
webpack現有的懶載入手段不完美，但是基本夠用，主要是它直接支持commonjs規范的require語法，再配置babel等還可以直接解析ES6語法（當然，fis也可以通過插件支持ES6的），加上可以直接使用npm模塊這一點，依託npm社區強大紅利來搭建公司級公共組件化規范。所以綜合考慮，webpack目前是前端構建工具的首選。
8. FIS —— 已經不再維護的前端構建系統
之前工作一直用到 FIS ， FIS2 和 FIS3 都有用過，現在只是把學習筆記放上來，因為手中實踐的東西較多，之後有時間會進行下一步的整理。
FIS 是網路的前端團隊出款的一種構建系統， FIS 現在也基本沒有團隊維護了，但是我們還需要了解一下他。相比於 grunt 和 gulp ， FIS 的核心特點是 高度集成 。
他把前端日常開發中常見的開發任務和構建任務都集成在了內部，這樣開發者可以通過簡單的配置文件的方式去配置我們構建過程需要的工作。我們不需要在 FIS 中像 grunt 和 gulp 一樣定義任務， FIS 中有一些內置任務，內置任務會根據開發過程自動完成構建任務。 FIS 中也有用於調試的 web-server ，可以很方便的調試構建結果。
裡面的引用資源也變成了絕對定位
使用 fis3 inspect 命令可以看到對哪些文件進行了操作
9. 前端工具裡面gulp和fis，有哪些優缺點
fis 搭建過程相對繁瑣，不過搭建好以後已經集成功能可以更加豐富，例如自帶伺服器環境等，還有一些網路獨有的構建環節插件。
gulp和gruntjs配置和使用類似，主要使用npm倉庫已有的插件進行封裝，生態系統穩定，相對更開放一些。
我自己也開發了一款前端工具，功能可以看做是弱化的fis，但是也有很多獨有的功能，非常適合初中級前端組成團隊的使用，還自帶了比nginx配置方便的代理配置功能。 你可以網路一下 f2e-server.