❶ 前端自動化6部是個車間還是個什麼意思
先來說說為什麼要自動化。凡是要考慮到自動化時，你所做的工作必然是存在很多重復乏味的勞作，很有必要通過程序來完成這些任務。這樣一來就可以解放生產力，將更多的精力和時間投入到更多有意義的事情上。隨著前端開發不再是簡單的作坊式作業，而成為一個復雜的工程時，還涉及到性能優化一系列工作等等，這時自動化已然是迫切的需求。
早期的網站開發
在還沒有前端工程師這種分工如此明確的崗位時，大家所理解的前端工作無非就是製作網頁的人，包括html、css、js等。稍微高級點的可能就是php了，可以讀寫資料庫，可以稱之為動態的網頁。通過近幾年的發展，分工越來越細，在大公司如BAT三家，基本是把前端分開來了，有專門的人寫js，有專門的人寫css。以前一個網頁可以一個人搞定，包括切圖，寫頁面到寫邏輯，無非是幾個資源鏈接拼湊起來。當然邏輯性不強，頁面不重。
最簡單的頁面如下：
<!DOCTYPE html>
<html>
<head>
<style>....</style>
</head>
<body>
hello world
</body>
<script>
....
</script>
</html>
這樣幾個html標簽就能展示成網頁了。順便寫幾個邏輯，填寫幾個表單就差不多了。這就是早期的網頁。
javascript庫
有一次需求你做了一個頁面，然後第二次需求，你領導又讓你做了頁面，只是這次與上次的邏輯都差不多，就改改樣式皮膚，修改圖片等等。這樣你就要從原來的地方拷貝一份代碼過來。如果有一天發現一個bug，你就需要修改兩處地方，這使得你非常的惱火，於是就把公共的邏輯抽取出來，兩個頁面都引用這段代碼，這樣就很好的解決了這個問題。以後有第三個第四個頁面，你也不會擔心了。漸漸的公共的代碼越來越大，又是個獨立的文件，這個文件就成為了一個庫文件了，就像jquery等等。
模塊化
隨著業務的不斷擴大，頁面越來越多，邏輯越來越重，之前你提取出來的庫文件越來越大，功能越來越多。A頁面只引用了其中的一部分函數，B頁面C頁面同樣如此，後來你決定將庫文件拆分成更小的模塊，由各自的功能決定應該在哪個模塊。這樣一來前端開發就此演化為模塊化開發方式。你開發的產品就像搭建積木一樣，將各個模塊組裝在一起。
網頁優化
好了，現在你的工程很龐大了，文件數量新增了非常的多，JS模塊也很多，這時候一個頁面也能載入了上十個js文件或者好幾個樣式文件。用戶訪問你的網頁的時候需要把這些資源從伺服器下載下來，所以理論上來說，想要加快你的網站，比必須減少下載的時間。可以從下載的數量和下載的大小出發，在不做大改變的前提下就是減少HTTP請求數以及壓縮文件大小。雅虎的網頁優化十四條軍規中很大一部分是針對這種情況進行優化，如：
1、合並請求
2、使用雪碧圖
3、壓縮js、css代碼（除去空格，混淆等等）
4、延遲載入
在PC時代，這些問題可能不是那麼尖銳。移動互聯網的興起，對網頁速度提出了更高的要求，因為網速相對比較慢。也有新的優化措施出現，比如緩存js文件等。可是要做到這些，並不是很容易。假如你的頁面引入十個JS文件，這樣發布出去顯然是不好的，所以你要手動合並，將十個JS文件合並成一個，或者幾個。然後還要將合並後的文件進行壓縮。發出去之後產品經理發現有個小問題需要優化一下，這時候你又要重復剛才的工作。如果這樣的事情發生三次，或者更多次，你會變得惱火。當然這只是令你惱火的一點點因素而已，更多的還有合並雪碧圖等等。
經歷過幾次痛苦之後，你會發現性能優化與工程本身之前存在一些矛盾的地方。就是在優雅的開發的同時，兼顧性能方面的考慮實在難以做到。這時自動化工具太有必要了，將開發與發布隔離開來。按照優化的准則，利用構建工具，在發布的時候輕松一鍵搞定，這將是最理想化的作業方式。
一些構建工具
nodejs的出現，給前端開發帶來了一些改變。在沒有任何語言障礙的情況下，前端同學可以轉為後台開發，nodejs帶來另外的一個福音便是構建工具。之前的壓縮合並工具大多是由java編寫的，像雅虎的yui compressor，但對沒有java基礎的前端開發來說，至少要走不少彎路。然後最近一兩年比較火的是國外的grunt和gulp，以及國內的FIS。相比而言，國外總是走在前頭，在探索更好的開發方式，做出了很多探索。
grunt
之前在鳥廠的時候，在組內也嘗試推廣過模塊化的開發方式，主要是用seajs模塊載入器，關於這個的好處我這里就不展開說明了。這種方式從11年開始到現在基本已經得到了認可，或者說是未來的趨勢，ECMAScript 6已經將模塊化加入了規范。等到瀏覽器支持應該是幾年之後的事情。這種模式主要是參考了nodejs，將其思想運用到瀏覽器上。seajs模塊化的詬病之處便是網路請求，上線前面臨的一個問題就是模塊太多，有十幾個文件，需要合並和壓縮，而且還不能簡單的將文件合並在一起。有一套他自己的規則。
在開發的時候，一個模塊對應一個文件，如下：
// a.js
define(function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define(function(require, export, mole){
// xxxxx
})
如果上線前簡單的將這兩個文件合並在一起，那麼a模塊是不能找到b模塊，因此這樣的做法是行不通。一個規則是根據文件的路徑，給每個模塊加上一個唯的id，id的值就是該模塊的路徑：
// a.js
define('a', function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define('b', function(require, export, mole){
// xxxxx
})
所以在自動化的過程中，需要提取模塊的唯一ID，然後再進行合並。
grunt的插件很多，也非常的成熟，能夠滿足各式各樣的需求。作為新手，我是琢磨了大概半個月的時間才大概了解了其配置文件的意思，但也只是知道用，不明白個所以然。grunt的運作方式就是根據配置文件載入相應的插件，完成相應的任務（task）。當時中文資料比較少，英文也比較晦澀，尤其是配置文件中各配置項的意思不太明白。而當文件多起來了，構建的效率明顯跟不上。加上組內也不太重視，所以就沒怎麼去折騰了。轉去鵝廠之後，grunt就無疾而終了。
gulp
沒有在實戰項目中運用過，暫不說明
組內的構建工具
剛來到鵝廠時，也有自己的一套構建工具，比較單一，項目不大。主要是將上文提到的seajs所帶來的文件解決掉，提取模塊ID，合並之。隨著業務的發展，越來越不滿足實際的需求，後來索性放棄了它，轉而投向網路的FIS。
FIS構建工具
放棄之前的構建工具是因為一個尖銳的問題引起的，就是在發布的時候，有一段時間將會引起外網報錯，就是頁面已經出去，js文件卻還是舊的，即使你在文件後面加上了查詢參數也不太起作用。加上瀏覽器和CDN本身的緩存，這個問題一時之間找不到好的解決方案，唯一的辦法就是採用新的文件，文件加上自身的hash值作為文件名。這樣一來就瞄準了網路的FIS，它能夠簡單的實現我們所需要的功能。
核心思想是文件的定位，也就是在開發測試的階段並不需要將文件hash，只需要在上線的那一刻來做這步。找到原有文件的依賴，將其替換為新的文件名。
理想都很美好，但現實真的很殘酷。FIS上手相對於grunt是要簡單些，但其一點也不簡單。需要理解整體的思想才能去實施，而且小白用戶基本不會使用，除非是一些簡單的合並需求。但復雜的業務場景FIS是滿足不了的。包括前面提到的模塊ID的提取，seajs模塊文件的合並等都需要進行二次開發才能夠做到。
很多頁面是嵌入到APP內部的，APP本身也可以做一次緩存，根據特定的文件名規進行緩存，徹底消滅了304請求，如果每次都是新文件，在伺服器端也可以配置更長久的緩存期，所以這里也需要定製開發。
FIS最值得詬病的地方就是全局構建，這一點不僅使得構建速度快不起來，而且生成的新文件特別多，導致發布的時候去挑選文件。在多人協作開發的時候，會產生沖突，發布的過程極其的痛苦，不知道網路內部的人是怎麼使用的。望著文件夾滿是hash的文件名，瞬間就奔潰了。這是小組內部使用FIS後，血的教訓。
後來決定大刀闊斧的對FIS進行改造。在構建的時候只生成相關的資源文件，核心是找到該文件所依賴的所有的資源文件。當然還是全局構建，只是在生成文件的時候不生成其他不相關的。
這樣發布工作變得非常輕松，一目瞭然。然後配合現在的發布工具，基本上整個開發發布流程也比較順暢了。那天小組會議討論，構建工具的理想目標是什麼，這個問題我也沒有細想過，總之就是要從重復的勞動中解放出來，把時間花在值得的地方。或許可以採用一鍵發布，這可能就是理想，也是後期可以考慮再優化的地方。
現在組內所採用的構建工具，已經和FIS本身有很大的差別了。進行了很多地方的改造，後面有機會進行整體的開發發布流程分享，以及我的一些構建思路。
iamaddy
關注
1
0
0
專欄目錄
4款前端自動化構建工具的介紹與對比.zip_java自動化框架
01-07
4款前端自動化構建工具的介紹與對比.zip 大家都知道webpack是當人不讓的前端自動化構建工具,但是除了它還有其它常用的前端打包工具存在,現在我們來比較4款
前端自動化構建工具(Grunt,、Gulp、 Webpack)
01-02
<span style="color:#404040;">使用構建工具去對 JS、CSS、HTML、LESS、IMG 等進行合並壓縮構建到最後實現自動化構建項目。是前端工程師必備的技能之一。 本套視頻主要講解當前開發中最流行的三種自動化構建工具: Grunt, Gulp, webpack。從理解什麼是構建工具，為什麼要用構建工具，到如何去使用構建工具。 學習本套視頻之前 建議先學習 JS 模塊化。</span>
如何實現自動化前端開發？
CSDN資訊
7051
IDE不僅是文本編輯器，還是編譯器、生成器、調試器和集成器。 作者 |Nicolus Rotich 譯者 |彎月，責編 | 郭芮 出品 | CSDN（ID：CSDNnews） 以下為譯文： 每一行代碼都可以表示為字元串變數，無論代碼本身執行了哪些操作。 這就是我們使用文本文件（即集成開發環境，IDE）向計算機發布指令的根本原因，我知道你一定在想：文本編輯器的名字也太高級了吧。...
前端自動化發布實戰總結
weixin_34418883的博客
163
為什麼要做 今年4月份，開始自己的第二份工作，習慣了老東家如絲般的發布體驗，一下子感覺來到了「原始社會」。 首先這是一篇長文，主要介紹自己在做自動發布這個過程的一些思考。 引用玉伯的Web研發模式演變來說，現在我們處於 - Web1.0時代： 前後端代碼耦合 java環境對前端過於復雜 缺乏工具和規范，代碼難維護 內嵌代碼：html內嵌js，j...
前端項目自動化部署
最新發布
@SCY
392
本文主要內容為三個方面： 一、使用Git倉庫來管理項目 二、如何使用雲伺服器 三、使用Jenkins進行自動化部署
如何實現Web前端自動化？讓這些工具幫助你
xiaoxijing的博客
1569
隨著前端技術的發展，前端開發從靜態網頁的開發到復雜的前後端交互再到基於node.js的全棧開發，前端需要做的事情越來也多，前端代碼的邏輯和交互效果越來越復雜，越來越不易於管理。模塊化開發和預處理框架把項目分成若干個小模塊，增加了最後發布的困難，沒有一個統一的標准，讓前端的項目結構千奇百怪。在新技術不斷湧入的多元化發展模式中，Web前端工程師的工作量也越來越大。前端自動化構建在整個項目開發中越來越重...
前端工程化實戰 - 自動化構建工具
每天進步一點點
496
最典型的運用場景就是在去開發網頁應用時就可以使用： main.scss index.html package.json 安裝 Sass 模塊 安裝完成後，在 node_moles 下有一個 .bin 目錄，這個目錄下有一個 Sass 的命令文件，可以使用指令打開幫助信息 將 Sass 文件轉換成 CSS 使用 或 啟動 實現自動化構建 （1）安裝 browser-sync 模塊，用於啟動一個測試伺服器，去運行項目 （2）在 scripts 中添加 serve 命令，通過 br
前端自動化部署
qq_41206257的博客
2689
名詞解釋 集成：在推送或者 merge 代碼後自動進行構建打包 交付：將上一步生成的代碼包發布至測試、生產等環境 需求 在 git 代碼倉庫發生變化後，自動執行打包腳本，並且發布至伺服器。 解決的問題 在之前每次開發完畢需要上線之前，需要手動執行 bash 命令打包，並且將打包後的代碼人為的拖動至上傳應用（FlileZilla Pro）。 手動執行構建腳本消耗時間人力 而拖動代碼文件會存在拖拽錯誤，覆蓋之前的其他項目代碼等難以預料的問題 工具選擇 gitlab/github/gitee Jenki
前端自動化介紹
張營的技術博客
1815
文章目錄DevOps介紹前端自動化自動化相關概念問題提出常見現象最佳實踐 DevOps介紹 相信大家或多或少的聽過這個詞DevOps，而且看起來很高大上，其實這個是敏捷開發的一種執行流程表現，先來一張經典的DevOps流程圖： 具體的流程為： 先是計劃plan，編碼code，然後編譯build，測試test（Dev） 然後發布release，部署deploy，運維operate，監控monitor（Ops） 然後發現問題或有新的需求，就重新計劃plan。。。如此循環 這就是完整的DevOps流程。 下
前端項目自動部署
weixin_29005819的博客
1190
一、實現的最終效果 點擊一下，即可實現 項目打包 文件壓縮(便於上傳到伺服器) 連接伺服器 備份 上傳打包的文件 解壓 完成部署 二、原理及需要的插件 原理： 執行shell腳本 需要的npm依賴包：archiver(壓縮)，ssh2（執行腳本：如連接伺服器，解壓等操作） 三、詳細步驟 3.1 安裝包 yarn add archiver ssh2 3.2 引入包和編寫配置文件 const archiver = require('C:\\Users\\Administrator\\AppDa
前端自動化測試詳解
wdquan19851029的專欄
2405
這篇文章主要向大家介紹前端自動化測試詳解,主要內容包括基礎應用、實用技巧、原理機制等方面，希望對大家有所幫助。 1 前言 文章研究了四個問題：什麼是自動化測試、為何要自動化測試、什麼項目適合自動化測試、自動化測試具體要怎麼作。在尋找這四個問題答案的過程當中，梳理了一套完整的前端自動化測試方案，包括：單元測試、介面測試、功能測試、基準測試。 2 什麼是自動化測試 維基網路是這樣定義的html 在軟體測試中，測試自動化（英語：Test automation）是一種測試方法，使用特定的軟體，去控制測試
Gitlab-ci:從零開始的前端自動化部署
大灰狼的小綿羊哥哥的博客
2669
前言 本文為首發原創，同時轉載至公眾號「全棧前端精選「和「廣發證券金融科技」中 目錄 一.概念介紹 1.1 gitlab-ci && 自動化部署工具的運行機制 1.2 自動化部署給我們帶來的好處 二.知識預備 2.1 gitlab-ci涉及的抽象概念(Runner/PipeLine/Executor/Job ) 2.2 YML文件的基本語法規則 2.3 .gitlab-ci.yml配置的特定關鍵字 三.CI實戰 3.1 編寫一個gitlab-ci的「he
vue前端用伺服器上路徑的圖片展示_談談前端性能自動化
weixin_39968640的博客
1445
前述：前段時間出了性能分析的需求，需要對前端頁面性能做一套自動化測試工具。領導都發話了，那咱說干就干。花了一周時間去找資料以及匹配優秀並且合適的開源插件。花了一個月的時間(斷斷續續，需求也要做的~)完成了這個工具的建設和開發。目前也搭建了一套平台來支撐這樣的工具使用。前端用的VUE，後端用的node(由於本人較熟悉前端)，資料庫用的是mangoDB。好了，話不多說，上才藝~設計背景 & 前...
實現前端項目自動化部署（webpack+nodejs）
winne雪
2097
前言： 一般來說，我們前端是不需要關心部署的事情的，只需要把打包後的文件直接丟給後台去部署就可以了。但是呢，如果頻繁修改一點東西就要叫後台進行部署，這樣後台會很煩（畢竟人家還有其他工作嘛），我們也會很不好意思。 或許有些公司會給前端配置可視化操作伺服器文件的軟體（FTP客戶端），這時我們就可以打包後自己到伺服器上部署了，如果不同環境需要部署到不同伺服器，此時我們又需要區分打包再手動上傳到伺服器上。 這時我們就會想，有沒有直接一句命令就能自動化部署到不同伺服器上，根本不需要打開軟體來手動上傳的？？？ 答案：必
前端項目自動化部署——超詳細教程（Jenkins、Github Actions）
q411020382的博客
1374
參考資料 Docker 入門教程
常用的前端自動化構建工具gulp/grunt/fis --簡介
杜杜的博客
235
常用的前端自動化構建工具 之前我們自動化構建將入門級別使用的 NPM Scripts自動化構建工具對於相對復雜的項目構建會比較吃力，那麼我們會了解 Gulp Grunt fIS 用法基本相同：都是通過一些簡單的代碼，組織一些插件的使用，然後就可以用工具代替我們一些重復的工作，增強開發效率。 Grunt 是基於內磁碟實現的 最早的自動化構建工具 Grunt(點擊可進入官網查看) 優點： 它的插件幾乎可以幫助我們完成任何我們想要做的事情， 缺點： 由於工作過程是基於臨時文件去實現的，所以構建速度較慢。 下
前端自動化部署項目到伺服器 -- 一行命令搞定，摒棄傳統的手工部署 npm run build
一個來自外太空的遊客
2353
傳統的前端代碼手工部署流程如下： 傳統的手工部署需要經歷： 1.打包，本地運行npm run build打包生成dist文件夾。 2.ssh連接伺服器，切換路徑到web對應目錄下。 3.上傳代碼到web目錄，一般通過xshell或者xftp完成。 傳統的手工部署存在以下缺點： 1.每次都需要打開xshell軟體與伺服器建立連接。 2.當負責多個項目且每個項目都具有測試環境和線上環境時，容易引起部署錯誤。 （個人之前非常悲劇地遇到過一次，由於同時負責四個項目，八個環境。一天同時可能修改多個項目，
「相關推薦」對你有幫助么？
非常沒幫助
沒幫助
一般
有幫助
非常有幫助
©️2022 CSDN 皮膚主題：大白 設計師：CSDN官方博客 返回首頁
關於我們
招賢納士
商務合作
尋求報道
400-660-0108
[email protected]
在線客服
工作時間 8:30-22:00
公安備案號11010502030143
京ICP備19004658號
京網文〔2020〕1039-165號
經營性網站備案信息
北京互聯網違法和不良信息舉報中心
家長監護
網路110報警服務
中國互聯網舉報中心
Chrome商店下載
賬號管理規范
版權與免責聲明
版權申訴
出版物許可證
營業執照
©1999-2023北京創新樂知網路技術有限公司
iamaddy
碼齡8年
暫無認證
3
原創
42萬+
周排名
115萬+
總排名
8683
訪問
等級
122
積分
2
粉絲
3
獲贊
0
評論
1
收藏
私信
關注
熱門文章
聊聊前端自動化 3903
扒一扒前端構建工具FIS的內幕 3474
web前端性能優化–緩存 1306
分類專欄
javascript
3篇
技術
3篇
您願意向朋友推薦「博客詳情頁」嗎？
強烈不推薦
不推薦
一般般
推薦
強烈推薦
最新文章
扒一扒前端構建工具FIS的內幕
web前端性能優化–緩存
2015年1篇2014年2篇
舉報
————————————————
版權聲明：本文為CSDN博主「iamaddy」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/iamaddy/article/details/42364137
❷ Canvas開發的前端頁面自動化實現求助
現在的前端開發已經不再僅僅只是靜態網頁的開發了，日新月異的前端技術已經讓前端代碼的邏輯和交互效果越來越復雜，更加的不易於管理，模塊化開發和預處理框架把項目分成若干個小模塊，增加了最後發布的困難，沒有一個統一的標准，讓前端的項目結構千奇百怪。前端自動化構建在整個項目開發中越來越重要。
我們首先來回想一下之前我們是如何來開始做一個項目的。
① 首先要確定這個項目要使用什麼樣的技術來實現，然後開始規劃我們的項目目錄，接著就要往項目增加第三方庫依賴，比如：
拷貝 CSS庫（Yui Reset | bootstrap）JS庫（Requiet.js | Seajs | jQuery | jQuery插件 ） 進相應目錄（拷貝 N個文件，花費N分鍾）
② 然後，進行編碼
編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 …………
③ 編碼完成，進行語法檢查，文件合並和壓縮
HTML去掉注析、換行符 - HtmlMin
CSS文件壓縮合並 – CssMinify
JS代碼風格檢查 – JsHint
JS代碼壓縮 – Uglyfy
image壓縮 - imagemin
整個過程都在重復無用繁瑣的工具...
漸漸的，一些自動化構建工具出現了，人們開始使用例如Bower、Gulp、Grunt、node、yeoman等等工具來構建一個本地的開發環境。自動化構建已經成了前端開發的趨勢，所以學好自動化構建也就是為自己的開發打下了良好的基礎。
❸ 如何用webpack實現自動化的前端構建工作流
1.首先 git clonehttps://github.com/bjtqti/font-end-boilerplate.git 一份到本地
2.然後 npm install && npm run start
3. 最後打開瀏覽器，運行http://localhost:4000
5.解析一下這些目錄的用途：
|- dist下面存放發布的js、css 文件 （自動生成）
|- node_moles 下面是npm安裝的包文件 （自動創建）
|- src 存放具體的業務代碼
|- task 存放webpack的配置代碼
|- task
|- webpack.api.conf.js 用於webpack的api方式的配置文件 server.js用到
|- webpack.dev.conf.js 用於CLI方式使用webpack 的配置
|- webpack.prod.conf.js 用於生產環境打包輸出的配置
|- .postcssrc.js post-loader的插件配置文件，由於後面用了postcss.config.js所以重命名了這個
|- .babelrc babel的配置文件，為了解析es6語法
|- .gitignore git的配置，指出要不參與版本控制的文件及文件夾
|- .package.json 包配置文件
|- postcss.config.js post-loader配置
|- README.md github.com自動創建的項目說明文件
|- server.js 本地開發調式用的web伺服器
需要重點掌握的是package.json 其次是server.js 和 task相關的配置內容
先看看package.json:
{
"name": "shop",
"version": "1.0.0",
"description": "webapp frontend shop",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "webpack-dev-server --config ./task/webpack.dev.conf.js",
"build": "webpack --config ./task/webpack.prod.conf.js",
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"mall",
"shop"
],
"author": "frog",
"repository": "https://github.com/bjtqti/font-end-boilerplate.git",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^2.1.2",
"html-webpack-plugin": "^2.29.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.0",
"webpack-hot-middleware": "^2.18.0"
},
"dependencies": {
"babel-plugin-transform-runtime": "^6.15.0"
}
}
這個文件其實就是一個json對象，里邊重點掌scripts 的用法。比如start：node server.js 對應 npm run start （或 npm start) 這條命令就相當於是在node環境下運行了server.js
那麼server.js(文件名可以自已定）里邊保存了一些什麼內容？
var express = require("express");
var webpack = require("webpack");
var path = require('path')
var app = express();
var webpackConfig = require("./task/webpack.api.conf.js");
var compiler = webpack(webpackConfig);
var devMiddleware = require('webpack-dev-middleware')(compiler, {
contentBase: webpackConfig.output.path,
publicPath: webpackConfig.output.publicPath,
//hot: true,
//stats: { colors: true },
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
//lazy: true,
//path:'/hmr',
log: () => {}
})
app.use(express.static('./dist'));
app.use(hotMiddleware)
app.use(devMiddleware)
app.listen(4000, function () {
console.log("Listening on port 4000!");
});
其實就是使用了express來搭建一個小型的開發伺服器。然後引用webpack-dev-middleware和webpack-hot-middleware兩個中間件，結合webpack.api.conf.js的配置，實現打包和熱載入src下面的代碼。由於這里涉及到express的知識，不打算涉及全棧的前端只需了解一下即可，因為後面還有一個封裝好的工具可以替代這些工作--webpack-dev-server
所以我在script中添加了一個dev：webpack-dev-server 的命令，這全完是為了方便學習這兩種方式的應用，實際上任選其中一種就好了，這一種可能會感覺更簡單，因為它是第一種方式的封裝，但是要深入的了解，還是建議看看第一種方式，Vue-cli也是採用的第一方式，因為它可供開發者自由支配的空間更大。唯一需要注意的是，如果使用webpack-dev-server的話，目前還不能用webpack3.0+。
接下來運行npm run build 看看，dist目錄下是不是多了一些文件？這就是將來可以直接發布到線上的代碼了。
到這里，打包，發布 都介紹完了，下面簡單演示一下熱替換（也就是所謂的無刷新替換效果）。為了演示方便，我在src下放了一些代碼.
當我們打開http://localhost:4000的時候，瀏覽器上有一段綠色的文字:Hello world 還有一個時間毫秒數，加這個毫數的目的是為了演示，如果頁面刷新了，數字會改變。
然後修改style.css中的內容，比如把字體顏色改成紅色，瀏覽器上的字體顏色也相應的變化了，而數字沒有發生改變。如果手動刷新的話，可以看到數字是會變化的。
這不僅會節省時間，而且對於要保存頁面狀態（比如某按鈕選中）的情況非常有用。當我們修改hello.es6的時候，頁面變成了自動刷新，這是因為我沒有使用js的熱替換載入器。
如果對html的修改，也想要自動刷新的話，需要用到插件，發出相應的事件。比如vue-cli中的方式：
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
這里只是發出一個通知：action:'reload'，要使頁面自動重新載入，還需要有一個接收通知的代碼：
比如在入口中加入：
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
這個地方比較深奧，沒有弄明白也沒關系，有其它方式同樣可以實現。比如webpack-dev-server 內部已經自動完成了對不支持熱替換的載入器，自動降為刷新。
這也是為什麼在開發環境下使用了extract-text-webpack-plugin（提取css的插件）後，樣式的熱替換變成了刷新效果的原因。
❹ 這些自動化的工具，讓Web前端開發工作更輕松
Web前端自動化工具之一：LiveReload
LiveReload技術+兩塊顯示屏可以幫你省去重復刷新瀏覽器這一枯燥的工作。目前實現LiveReload的方式很多，如果你傾向於圖形化的桌面應用，可以嘗試一下。這款應用同時有Mac版和Windows版，使用起來也很簡單，設置好需要監聽文件所在的文件夾，然後將一段腳本插入到HTML頁面即可。
Web前端自動化工具之二：Webpack
現在做前端開發，通常還會涉及到預處理器，雖然技術的多樣化給我們帶來了更多選擇，但要這些技術產生的代碼在瀏覽器中獲得一致的表現，還得將其轉化為瀏覽器支持的類型。Webpack是一款模塊載入兼打包工具，豐富的插件讓這款工具非常實用。雖然現在Grunt 和Gulp作為兩款前端自動化工具非常流行，但其實Webpack結合Npm腳本在大多數場合就已經足夠了。
Web前端自動化工具之三：WeFlow
WeFlow 是最近騰訊團隊推出的一款前端開發工作流工具。WeFlow一個高效、強大、跨平台的前端開發工作流工具，具體的說就是一個GUI的前端工具，可以為用戶提供一套標准化、規范化的工作流程，從而讓大家在交接協作的時候更為高效有序。
Web前端自動化工具之四：CodeKit
除了免費的工具，還有一款付費工具值得一提。CodeKit是Mac下老牌的前端開發輔助工具，目前價格32美刀。雖然不便宜，但功能強大，號稱可以編譯目前所有的前端腳本，支持瀏覽器自動刷新，內置Bower，第三方包的安裝只需要一次點擊即可完成。圖形化的界面操作起來也很方便，不差錢的同學可以考慮。
以上就是小編為大家介紹的目前常用的Web前端自動化工具。前端作為互聯網產品研發的重要環節，工作量勢必會越來越繁重，所以能合理的運營一些自動化的工具，不僅僅可以提高自己的工作效率。同時也可以讓前端開發工作變得更加簡單。
❺ 如何進行前端自動化測試
沒人邀請，路過回答。
前端測試是前端工程方面的重要分支，有過一些探索，這里簡單分享一下。
首先，還是要強調一點：
前端是一種特殊的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的展現問題已經是不小的進步了。
❻ 前端自動化測試框架Jest 基礎入門-
一、引言
前端這幾年發展的非常迅速，我們的系統的功能正在變的越來越復雜，這對我們的前端工程化能力提出了更高的要求，聽到工程化，大家的第一反應肯定是高質量的代碼設計和高質量的代碼實現。
但實際上，前端 自動化測試 也是前端工程化裡面非常重要的一個環節。
二、 Jest 基礎入門
一個普通前端聽到自動化測試，第一反應可能是：我工作這么多年也沒寫過測試，這個東西有用嗎？
答：非常有用
如果你打開GitHub，去看一下流行的開源庫或者框架的源碼，你會發現，在這些源碼裡面，全部都包含了大量的自動化測試的代碼。比如antd、lodash、再比如vue、react、echarts、rex等等……
開源的工具需要穩定性，而引入前端自動化測試為開源項目提供穩定性，是再好不過的選擇了。
三、學習前提
閱讀這篇 文章 需要以下知識儲備：
·js、es6 基礎語法
·node、npm 相關知識
·git 的相關操作
·react或者vue，至少了解一個
·狀態管理工具，至少了解一個
四、背景及原理
首先在任意目錄下創建一個math.js文件，假設這個文件是一個數學庫，裡面定義兩個函數，分別是加法和減法：
// math.js
function add(a, b) {
return a + b;
}
function minus(a, b) {
return a - b;
}
這時候我們可以在業務代碼里去使用這個數學庫。
但是，假如，上面的minus函數我們不小心寫錯了，把減法寫成了乘法，如果直接在業務代碼中使用這個方法，就會帶來無法預期的bug。
所以這時候，我們就需要對math.js這個公共庫進行自動化測試，確保沒問題之後，再讓業務組件去調用，這樣就會保證不會出特別多的bug了。
我們可以這樣做：
在該目錄下創建一個math.test.js文件，然後寫一點測試代碼：
const result = add(3, 7);
const expect = 10;
if (result !== expect) {
throw new Error(`3 + 7 應該等於${expect}，結果卻是${result}`);
}
const result = minus(3, 3);
const expect = 0;
if (result !== expect) {
throw new Error(`3 - 3 應該等於${expect}，結果卻是${result}`);
}
這時候我們運行這段代碼，會發現沒有拋出任何異常，說明這兩個 測試用例 都通過了。
這就是自動化測試最原始的雛形。
然後我們思考一個問題，如何將這堆代碼進行簡化，做成一個公用的函數，比如這樣：
// 測試 3 + 3 是否等於 6
expect(add(3, 3)).toBe(6);
// 測試 3 - 3 是否等於 0
expect(minus(3, 3)).toBe(0);
expect 方法實現：
function expect(result) {
return {
toBe(actual) {
if (result !== actual) {
throw new Error("預期值和實際值不相等");
}
},
};
}
這時候我們運行這段代碼，會發現沒有拋出任何異常，說明這兩個測試用例都通過了。
雖然實現了 expect 函數，但是報錯的內容始終是一樣的，我們不知道是具體哪個方法出現了問題，這時候我們就會想到，我們需要將這個 expect 方法進一步做改良，我們如果能在 expect 方法外部再包裝一層，就可以多傳遞一些額外的內容，比如創造這樣的寫法：
test("測試加法 3 + 3", () => {
expect(add(3, 3)).toBe(6);
});
test("測試減法 3 - 3", () => {
expect(minus(3, 3)).toBe(0);
});
這樣封裝之後，我們既能進行測試，又能得到測試的描述。
test 方法實現：
function test(desc, fn) {
try {
fn();
console.log(`${desc} 通過測試`);
} catch {
console.log(`${desc} 沒有通過測試`);
}
}
所以前端自動化測試到底是什麼？
答：實際上就是寫了一段其它的用來測試的js代碼，通過測試代碼去運行業務代碼，判斷實際結果是否滿足預期結果，如果滿足，就是沒有問題，如果不滿足，就是有問題。
上面實現的 expect 方法 和 test 方法 實際上和主流的前端自動化測試框架 jest 裡面的語法是完全一致的。所以上面的示例代碼可以理解為 jest 的底層實現原理。
❼ 前端如何提升開發效率
來具體聊一聊提高前端工程師開發效率的那些方法！
當然除了以上5點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。希望以上幾點能夠給初識前端的同學帶來啟發並能夠親自實踐。
❽ 前端UI自動化puppeteer實踐
背景
在表單（web頁面）測試過程中，要經常對表單基本功能進行回歸，曾經考慮過使用webUI自動化工具，減少重復性的操作，但是因為之前用過appium，對UI自動化的體驗不是很好，所以有些糾結，但是，再仔細想一下，有可能存在比較好用又確實能提升效率的工具，也不妨去嘗試一下。
上網查詢了一下，puppeteer具有可以使用錄制腳本的工具puppeteer-recorder、截圖等功能，找了個demo開始試了一下，發現坑較少，安裝方便，使用比較流暢。
puppeteer介紹
Puppeteer 是一個Node庫， 它提供高級API，通過DevTools Protocol 來控制Chrome 或 Chromium。 Puppeteer 默認運行為headless ，但是可以配置為運行為non-headless。詳見文末參考鏈接。
效果展示
目錄結構
cases：用例腳本
config：配置文件，可區分測試、線上環境
screenshot_outputs：輸出的截圖文件
utils：用到的通用方法
測試思路
1、在腳本中寫入測試執行步驟
2、運行腳本
3、查看執行結果（截圖），查看是否符合預期。
這樣操作會使簡單很測試很多。就拿表單人工審核為例，全部人工操作的話，需要填寫並提交表單，登錄表單運營後台，找到對應的目錄及表單，對表單進行審核，再重新打開表單並進行查看，而自動化的話，在寫好腳本（在腳本中可進行介面請求）之後，就可以直接運行腳本，查看結果。
環境搭建
1、安裝puppeteer：npm install puppeteer（前提是安裝了node、npm）
2、安裝chrome插件puppeteer-recorder（可自行網路，比較簡單）
3、npm init，初始化一個項目
腳本編寫
遇到問題
1、puppeteer-recorder只能錄制獲取元素、點擊元素操作，沒有獲取到填寫文本的操作，需要修改或添加已錄制好的腳本
2、有些地方例如截圖前，介面請求結束後，需要使用等待方法。await page.waitFor(3000)
3、使用await進行介面請求，不然會出現同步非同步問題，後面的語句開始執行（但是要用到的參數還沒有獲取到）
參考：
https://zhuanlan.hu.com/p/76237595
https://www.jianshu.com/p/679f07ba474b
❾ 如何構建自動化的前端開發流程
自動當然是相對於手動而言的。
手動：
自己放置並引用JS庫和CSS框架
自己處理各個模塊的添加/刪除/依賴關系
自己壓縮合並JS和CSS
自己構建測試環境
自己FTP傳到網站上部署
自己備份各個版本的差異
總之就是什麼都自己來
自動：幾條命令電腦做。
如果沒有手動開發一個完整前端項目的經歷，請先至少手動來一遍。其一是體驗下有多麻煩，其二是不熟悉操作背後的本質，也用不好自動化工具。然後再學開發流程自動化就明白了。
❿ 前端自動化部署解決方案
對象存儲服務都有提供對應的控制台管理桶，同時也提供響應的API供後端業務調用。
aws-s3官方提供了命令行終端操作庫可以方便在命令行發布我們的靜態資源： https://aws.amazon.com/cn/cli/
我們可以這樣發布：
騰訊的cos可以使用很輕量第三方庫 cos-manager 發布資源: https://github.com/yansenlei/cos-manager
npm script 類似shell 的 exec，可以幫助你執行多個並行或順序執行的命令，我們可以一次性執行 刪除本地dist資源->打包->發布
參考：
https://docs.npmjs.com/misc/scripts
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
以上發布我們可以這樣寫：
一個命令，提包走人。（雖然走了有點慌...）
持續集成是一種軟體開發實踐，每一次發布源碼都會集成一次，每一次都會自動化的構建，這意味著也可以把上面的發布腳本在服務端跑起來，打包 測試 發布全部交給CI處理，目前主流的工具是 Travis CI ，具體可以參照： http://efe..com/blog/front-end-continuous-integration-tools/