A. 怎樣提高前端工程師開發效率，都在這里
前端工程師其實是一個工作很雜的職位，除了要負責切圖、寫html/css/js外，還要解決一系列的瀏覽器兼容性、網頁性能優化等問題，所以提高前端工程師的開發效率是勢在必行的，也是前端工程化的體現。
對於開發效率，我個人理解是
開發效率 = 新增代碼的效率 + 修改代碼的效率 + 維護代碼的效率
那麼如何提高前端開發效率便可以按照前端工程化的理念來進行劃分。下面我就介紹下7個提高前端開發效率的方法。
1.切圖
切圖是一個前端最基礎的技能，一般我們使用Photoshop或者FireWorks基本都能搞定設計師交付給我們的設計圖，但是要提高切圖效率的話就得使用一些訣竅了，比如利用PS里的動作來實現「一鍵切圖」功能，這里除了切圖外還介紹了其他的實用方法和工具。
2.編碼
對於編寫代碼部分我們首先要找到一款合適自己的IDE工具，建議不要使用Notepad++或者Dreamweaver，這些工具已經不符合前端潮流了，無法讓自己優雅地敲代碼。這里我主要推薦Sublime Text、Atom或者Webstrom，因為它們除了人性化的界面和支持大多數語法的高亮外，還可以安裝各種各樣的插件來拓展你的IDE工具，下面我主要介紹幾款Sublime Text提高開發效率的插件：
其中Element是用於快速編寫html/CSS的，比如輸入 ul>li 後按下tab鍵便可以生成一個ul標簽裡麵包含一個li標簽
JSFormat用於格式化JS；CSScomb用於對樣式屬性進行一鍵排序；HTML-CSS-JS Prettify可以一鍵規范我們的HTML/CSS/JS，甚至JSON格式；SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用於調用本地調色板功能。這些工具都非常實用，一定程度上可以提高我們的編碼效率。
3.自動化
說到提高開發效率，這里不得不提一些前端的自動化工具，畢竟前端自動化是目前及未來的趨勢，能夠很大程度上縮減前端不必要的工作量，使我們能夠專注前端本身。
這里我們可以使用NPM來管理我們的項目包文件；利用webpack來打包壓縮我們的代碼；利用Node.js來實現構建本地伺服器；利用Karma、Jasmine來測試我們的前端代碼。
用好前端自動化工具可以幫助我們處理很多瑣碎的事情，比如一鍵壓縮代碼、圖片，一鍵合並JS，檢測文件更新等。
4.模塊化
隨著web2.0時代的到來，Ajax技術得到廣泛應用，前端代碼日益膨脹，而前端模塊化能夠方便我們對項目代碼的維護，進行按需載入，從長遠角度來看對我們提高項目的開發效率同樣大有益處。
在ES6出來之前應該說前端代碼本身不具備實現模塊的功能，我們必須要使用一些模塊化載入器來實現，比如RequireJS、SeaJs等。而隨著ES6的普及，目前像RequireJS、SeaJs這樣的工具已經沒有存在的必要了。所以在基於ES6的開發環境下我建議使用ES6的模塊化功能來實現我們的前端模塊化。
5.組件化
前端組件化的概念也是由來已久，我們可以通過將我們的代碼劃分成不同組件來實現功能公用，一個同樣的功能我們可能不用再次編寫相同的代碼，同時也可以提高前端代碼的可維護性和清晰度。以下是目前流行的前端框架Vue的單文件組件的概念圖：
我們可以將公用的組件抽離，將大組件拆分成小組件的形式實現前端組件化，組件與組件之間可以存在父子關系，也可以存在兄弟關系。在Vue的單文件組件中，一個組件包含了其HTML、CSS、JS的代碼片段。
6.前後端分離
前後端分離的項目對提升前端開發效率非常有幫助，因為前端不再需要後台配置路由、搭建伺服器環境、編寫模板等，這樣一來前端的生產力就會得到很大程度的解放，但是前後端分離的項目有利也有弊，如下圖所示：
最終我們需要根據項目需求衡量利弊來決定是否使用前後端分離的模式。
7.規范與模式
團隊協作離不開編碼規范和開發模式的幫助。遵循編碼規範文檔可以幫助我們在團隊開發時提高合作開發的效率。一個團隊遵循一套編碼規范可以使每個人的代碼寫出一個人的風格，這樣團隊間相互審查、測試、完善功能時會非常高效。下方是一些開源的前端編碼規範文檔：
網頁鏈接
首頁-TGuide
網頁鏈接
網頁鏈接
除了編碼規范我們在開發時經常會沿襲了一些已經存在的模式來解決問題，比如當用JS編寫彈框時我們往往會用到單例模式，用CSS編寫動畫時直接套用動畫的常用屬性等，我們不再需要從頭開始思考某一個功能的實現，這就是模式帶來的意義。
結語
當然除了以上7點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。只有將前端無序、繁雜的操作組織起來，利用工具簡化、規范前端流程，才能實現項目構建、開發、維護的一體化。希望本文能夠給初識前端的同學帶來啟發並付諸實踐。
B. 什麼是"前端工程化"
前端工程化是指使用軟體工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規范化、標准化。其主要目的為了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重復工作時間。
前端工程化是前端架構中重要的一環，主要就是為了解決上述大部分問題的。而前端工程本質上是軟體工程的一種，因此我們應該從軟體工程的角度來研究前端工程。
前端工程化有四個特點：模塊化、組件化、自動化、規范化。
1、模塊化：
就是將一個大文件拆分成相互依賴的小文件，再進行統一的拼裝和載入。只有這樣，才有多人協助的可能。在工程化之前，一直是使用js、jquery、ajax，這沒有模塊概念，對於開發大型且復雜的系統會有一定的限制。
2、組件化：
組件化≠模塊化。模板化只是在文件層面上，對代碼和資源的拆分；組件化是在設計層面上，對於UI的拆分。目前市場上的組件化框架最多，主要的有Vue，React，Angular2。
3、自動化：
「簡單重復的工作交給機器來做」，自動化也就是有很多自動化工具代替我們來完成，例如持續集成、自動化構建、自動化部署、自動化測試等等。
4、規范化：（至關重要的一環）
在項目規劃初期制定的好壞對於後期的開發有一定影響。包括的規范有：
目錄結構的制定、編碼規范、前後端介面規范、文檔規范、組件管理、Git分支管理、Commit描述規范、定期codeReview、視覺圖標規范。
(2)前端自動化工程擴展閱讀：
為什麼需要前端工程化：
前端越來越復雜，設計的問題和環節也越來越多，不採用工程化管理，就無法很好的實現團隊協同和降低復雜性。 原因如下：
1、前端范疇不斷擴大
早期的前端只需要適配桌面瀏覽器，而現在的前端，需要適配不同類型和尺寸的設備，包括移動端網頁，app應用等。
2、前後端分離
早期的前端只是後端 MVC 框架的一層模塊， 而現在的前端普遍是從後端介面獲取數據，編寫處理邏輯，各種前端mvc前端框架也層出不窮。
3、模塊化開發的出現
現在的前端開發不再是從零寫起，重復造輪子，而是會引用大量內部和外部的組件和模塊，這也導致前端必須進行模塊管理。
4、轉碼器的盛行
為了提高效率，前端工程往往不會直接寫html,css,和js代碼，而是改用其他格式書寫，再用工具編譯為目標格式。
比如用Jade 寫HTML，用less、sass、stylus 編寫CSS,用ES6、Typescript編寫JavaScript。
5、開發流程和團隊
早期的前端團隊往往只有幾個人，而現在的前端團隊可以擴展到幾十人，甚至上百人。每個人只負責自己的一塊內容。所以，如何協調多人多團隊的工作，保證溝通順暢，保證許可權管理，越來越成為一大問題。
前端工程化的具體內容：
1、代碼規范: 保證團隊所有成員以同樣的規范開發代碼。
2、分支管理: 不同的開發人員開發不同的功能或組件，按照統一的流程合並到主幹。
3、模塊管理: 一方面，團隊引用的模塊應該是規范的;另一方面，必須保證這些模塊可以正確的加入到最終編譯好的包文件中。
4、自動化測試：為了保證和並進主幹的代碼達到質量標准，必須有測試，而且測試應該是自動化的，可以回歸的；
5、構建：主幹更新以後，自動將代碼編譯為最終的目標格式，並且准備好各種靜態資源；
6、部署：將構建好的代碼部署到生產環境。
C. 如何進行前端自動化測試
沒人邀請，路過回答。
前端測試是前端工程方面的重要分支，有過一些探索，這里簡單分享一下。
首先，還是要強調一點：
前端是一種特殊的GUI軟體
看過我最近一年內做前端工程方面相關分享的人可能有印象，我總是在強調這一點。前端測試也跟這個理論基礎有所關聯。
在這里，我還想吐槽一下：
API測試方法論在測試GUI時並不能解決所有問題。
與很多前端工程師討論過前端測試，大家更多的還是盯著API測試方法論。誠然，前端有那麼一小部分代碼是可以用API測試保證質量的，但前端項目中的絕大多數代碼是GUI界面，前端測試應該向傳統GUI測試方法論需求解決方案：GUI軟體測試_網路 ，這個網路詞條介紹的很不錯，大家可以感受一下GUI測試相關概念和方法。它的測試用例、覆蓋率統計、測試方法等等都與API測試有著很大的不同。
統一了這個認知之後，我們來討論一下前端GUI測試的特殊性。根據網路詞條上的那些介紹，相信大家都能感覺到GUI測試的成本非常高，而前端這種特殊的GUI軟體，具有天生的快速迭代特徵，這使得case維護成本也變得非常高，經常跟不上迭代速度。
一
個標準的互聯網應用產品的前端部分，我粗略估計大概有20%的業務基礎代碼比較穩定，比如通用組件、通用演算法和數據模塊等，可以針對這些建立復雜一些的
API和GUI測試用例來保證質量。剩下80%的部分不是很穩定，每天都在迭代，針對他們維護case的成本非常高。目前業界中號稱做了自動化測試的項
目，也大多是在做那穩定的20%。
關於穩定部分的單元測試方法我這里就不贅述了， @貘吃饃香 的答案給出了很多關鍵字，有興趣的去搜索就好了。我想討論的是針對剩下80%不穩定部分的工程化測試方案。據我了解，前端測試面對這些問題還是很無力的，業內大部分團隊還是靠堆人解決。
面對這種現狀，我其實也沒想到過什麼好的方法，基本原則就是：以最低的成本建立和維護自動化測試用例。到目前為止，就想到過兩個方案（都不是測試方案，只是回歸測試輔助）：
1. 不太靠譜的「超級工位」大法。
這個方案可以說根本不是什麼技術方案，而是一個辦公設施，就是我們准備一個工位，擺上所有我們需要測試的主流設備，然後設備通過某種方式與一台電腦相連接，測試人員坐在工位上，在電腦中輸入某個url，就能同步到所有設備中，然後開始逐個的人肉測試。
超級工位大法示意圖（應該很多設備的，這里就是隨便展示一下而已。。。）超級工位大法示意圖（應該很多設備的，這里就是隨便展示一下而已。。。）
相比現在的前端GUI測試，超級工位已經算是從0到1的飛躍了，雖然沒解決什麼技術問題，但為測試前的准備工作做好了鋪墊。如果把前端測試比作吃屎，超級工位就是為這餐准備了一個好一點的餐桌。。。
2. 靠譜一些的「頁面差異監控」
12
年的時候還在網路，當時有同事去美國參加velocity，twitter分享了一下他們的開發流程，其中有一個環節就是頁面對比監控，利用了一個叫
pdiff的工具，每次提交代碼，會自動對比頁面之間的差異然後提醒測試人員注意回歸。這也是一個典型的GUI測試零成本維護用例的案例。不過pdiff
這個工具是基於像素對比的，誤報率比較高，所以去年我做了一個這個項目：fouber/page-monitor · GitHub 基於DOM樹的diff，這樣就能很大程度上自主控制要監控的元素，可以設置監控樣式、文本的變化，比起像素diff智能了一些。
其
工作原理就是利用phantom或其他headless瀏覽器訪問頁面，然後截圖，然後執行一段js，遍歷整個dom樹，獲取元素計算樣式和元素內文本內
容，構造出一個JSON結構，然後每次diff這個json來判斷頁面差異，並標記在截圖上展示。dom樹的diff過程有點類似react的虛擬dom
樹diff。
（react的dom樹diff演算法示意圖）（react的dom樹diff演算法示意圖）
（react的dom樹diff演算法示意圖）（react的dom樹diff演算法示意圖）
DOM樹diff我們可以分辨出元素樣式修改/內容修改/新增元素/刪除元素四種不同的頁面差異，我們可以配置選擇器來忽略元素。四種頁面差異的效果圖：
新增元素（綠色區域標記部分，「i am new here」）新增元素（綠色區域標記部分，「i am new here」）
刪除元素（灰色區域標記部分，「你好」）刪除元素（灰色區域標記部分，「你好」）
內容修改（黃色區域標記部分，「百-度」，「新-浪」）內容修改（黃色區域標記部分，「百-度」，「新-浪」）
樣式修改（紅色區域標記的部分）樣式修改（紅色區域標記的部分）
基於這樣的頁面差異對比監控，我們可以建立一個任務系統，把應用的所有頁面url監控起來，這樣每次版本迭代提交代碼後，系統就能自動告訴我們，哪些頁面的元素展現發生了改變，用於確定回歸范圍。
用監控的方式確定測試回歸范圍，是一種「少吃屎」的手段，符合工程化要求，能比較大范圍的應用，雖然不能完美解決GUI中的交互問題，但能保證GUI的展現問題已經是不小的進步了。
D. 前端自動化工具有哪些
隨著前端開發技術的不斷發展，前端開發工作也變得越來越復雜，如果能合理地採用一些自動化的工具，生活要容易得多。
LiveReload
我目前的開發主力機是一台較早的 13寸 Macbook Pro，外加一台戴爾的顯示器。相信做前端開發的都知道，這多出來的一台顯示器對工作效率的提升有多大。
LiveReload 技術+兩塊顯示屏可以幫你省去重復刷新瀏覽器這一枯燥的工作。目前實現 LiveReload 的方式很多，如果你傾向於圖形化的桌面應用，可以嘗試一下 LiveReload.app, 地址是：https://github.com/livereload/LiveReload， 這款應用同時有 Mac 版和 Windows 版，使用起來也很簡單，通過圖形界面設置好需要監聽文件所在的文件夾，然後將一段腳本插入到 HTML 頁面即可。
現在做前端開發，通常還會涉及到預處理器，雖然技術的多樣化給我們帶來了更多選擇，但要這些技術產生的代碼在瀏覽器中獲得一致的表現，還得將其轉化為瀏覽器支持的類型。
Webpack 是一款模塊載入兼打包工具，豐富的插件讓這款工具非常實用。雖然現在 Grunt 和 Gulp 作為兩款前端自動化工具非常流行，但其實 Webpack結合Npm腳本在大多數場合就已經足夠了。
django-webpack-loader
如果你在使用 Django ，django-webpack-loader是一款你不可錯過的 Webpack 插件。
我們都知道瀏覽器緩存對頁面載入速度的重要性， 同時我們也希望當資源文件發生變化時，頁面能立刻向用戶呈現變化。
通常的做法是將資源文件的 hash 值作為資源地址的一部分，比如main-cf4b5fab6e00a404e0c7.js， Webpack雖然支持這種命名方式，在配置文件中按如下方式設置即可。
其他推薦
WeFlow
CodeKit
E. 前端主要學什麼
與其他計算機主流技術所不同的是，Web前端所包含的知識模塊很多，就目前而言，HTML、CSS、JS、DOM是目前前端技術最為基礎也是最為主要的四大模塊，但會隨著實際需求而有所改變。
一名優秀的Web前端工程師，需要JavaScript語言基礎扎實，具有良好的規范開發習慣；熟悉常用的設計模式，熟練使用Vue、Angular技術棧開發；能夠熟練使用angular、vue、echarts、jquery、react等框架進行傳統開發；要熟悉MVVM、MVC開發模式；熟悉前端工程化、自動化技術，可以根據需求配置Gulp文件及更改Webpack配置文件；熟練使用git版本管理工具。
此外，還要熟悉HTML5、CSS3的新特性，了解不同瀏覽器之間的差異，製作出的頁面能夠有很好的兼容性。
Web發展得很快，幾乎每天都在變化！如果沒有快速學習的能力，就跟不上 Web發展的步伐。作為前端工程師僅僅依靠今天的知識是無法適應未來的，必須不斷提升自己，不斷學習新技術、新模式。因此，不僅作為新人小白要努力學習，提高自己；就連已經入職三五的前端開發工程師，也需要不斷學習，了解前端技術的變化，提高自己的技術技能。
為你分享一下北京尚學堂的前端學習課程框架
F. 前端自動化一般用什麼工具
前端工作其實有很多零零星星的小地方都是可以通過工具協助進行開發的。
基本文件伺服器和代理
可共用化代碼片段
源文件修改，網頁自動刷新
css，js部署前的合並和壓縮
圖片的合並和壓縮
自動化部署（FTP、SCP等）
js、css代碼質量檢測
單元測試
less、sass動態編譯
ES6 2 ES5動態編譯等等。
我的 f2e-server（網路一下） 可以幫你做一些事情。
G. 前端工程師怎樣提高開發效率
前端工程師其實是一個工作很雜的職位，除了要負責切圖、寫html/css/js外，還要處理一系列的瀏覽器兼容性問題、優化網頁性能等，所以提高前端工程師的開發效率是勢在必行的，也是前端共工程化的體現。那麼如何提高便可以按照前端工程師涉及的工作點來進行劃分。下面我就介紹下平時我在工作中使用的一些提高開發效率的方法。
當然除了以上5點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。希望以上幾點能夠給初識前端的同學帶來啟發並能夠親自實踐。
H. 什麼是前端工程化
所謂前端工程化我認為就是將前端項目當成一項系統工程進行分析、組織和構建從而達到項目結構清晰、分工明確、團隊配合默契、開發效率提高的目的。
工程化是一種思想而不是某種技術，前端工程化就是用做工程的思維看待和開發自己的項目，而不再是直接擼起袖子一個頁面一個頁面開寫，所有能降低成本，並且能提高效率的事情的總稱為工程化。
前端工程師是互聯網時代軟體產品研發中不可缺少的一種專業研發角色。從狹義上講，前端工程師使用 HTML、CSS、JavaScript 等專業技能和工具將產品UI設計稿實現成網站產品，涵蓋用戶PC端、移動端網頁，處理視覺和交互問題。
前端工程師，又叫web前端開發，前端開發是從網頁製作演變而來。早期的網頁製作主要內容都是靜態的，以文字圖片為主，用戶使用網站也以瀏覽為主。隨著互聯網的發展，現代網頁更加美觀，交互效果更加顯著，功能更加強大，於是網站開發細分成了前端開發和後端開發。
前端工程師通過前端技術完成界面設計、界面展現，交互效果，頁面維護、網站優化等等。通俗點講，就是設計、製作網頁，實現網頁上各種各樣的特效和功能。
I. 前端該怎樣實現自動化測試
有一款開源工具庫叫selenium可以完美實現前端自動化測試。
希望我的回答能幫到您。
J. 前端自動化構建工具 對於工程有什麼好處
簡化優化，方便管理擴展，移植。