SegmentFault 技術週刊 Vol.29 - 據說前端又出新工具了？驚不驚喜？

在前端刀耕火種的年代，佈局用 table 標籤，CSS 樣式大量內聯；校驗 JS代碼是否規範，須要複製代碼到 jshint（相信不少 「前輩」 對此都不陌生）；壓縮合並代碼，也是經過壓縮工具壓縮完再複製到一個文件裏；修改了代碼要查看效果，必須手動刷新瀏覽器；代碼寫好了要發佈到服務器，須要用 FTP 軟件上傳，等等等等。

其實嚴格來講，那個時候尚未前端開發這個職位，那個時候叫切圖仔或者頁面仔，隸屬於設計部或者其餘什麼部。CSS 不能預編譯，也沒有模塊化，不能自動打包，而今天，這些都只要使用前端構建工具就能夠實現了，咱們也有了專門的前端開發崗位。若是當時的前端開發者穿越到如今，他必定會很是驚訝，並覺得本身作了個假前端。

簡單的來講，前端工程化就是把一整套前端工做流程中能用工具搞定的部分用工具搞定。

起源

前端的工程化

前端這個職位的誕生也有短短的十年。而在十年以前，我不認識你，那會還叫網頁製做，用着一個Adobe很是牛逼的軟件叫Dreamweaver。這是一個神奇的軟件，絢麗多彩的網頁經過它，拖拖拽拽，就這麼夢幻般的生成了。網頁製做師們，像一羣織夢的婦人，心靈手巧，耐苦耐勞，從不抱怨。

我爲何這麼強調前端工程化

WEB 前端開發這幾年發展很是迅速，很是多的開發框架和構建工具涌現，可能你昨天還在用的工具、插件，到了今天就過期了。在 2 年前，我面試別人的時候，會問一些有沒有接觸NodeJS、 Grunt、gulp、ES六、Babel 這類技能的問題，超過半數的面試者會回答『沒有』，或者說『只是剛剛接觸，並非很深刻』。迫於招人急迫，我並不會直接說 NO，而後繼續問一些 HTML、CSS、JS 前端三板斧的知識。 然而今年，若是應聘者不會這些技能，那真的很抱歉， 我不會接受一個沒有走在前沿的開發者 。任何面試者都不會喜歡一個墨守成規的人。難道沒人告訴你，外面的世界已經變了嗎？

前端工程化知識要點回顧&思考

前端工程化相關問題是隨着前端的發展愈來愈受到重視的問題，一套好的工程化解決方案能在提升開發效率(包括代碼編寫的溫馨度及多人協做)的同時確保整個系統的伸縮性(各類不一樣的部署環境)及健壯性(安全)，同時在性能上又能有一個很優異的表現(主要上各類緩存策略加載策略等)，並且這套方案又應該是對工程師無感知(或感知很小)趨於自動化的一套方案。總之，要達到這個目的前端工程化還有很長一段路要走。

F++：別忽略前端工程化的部署與測試

前端工程能夠說是軟件工程的一個細分領域，流程類似，但特色鮮明。先來講說前端，固然我指的是Web前端，相比其餘方向的技術有什麼特色：

• 提及前端，至少涉及3種語言。（html，css，javascript）

• 前端代碼在用戶端運行時增量安裝。（摘自張雲龍的文章，資源和代碼都是增量下載的）

• 最基本的情況下，前端代碼不須要編譯（即改即生效）。

• 瀏覽器即運行環境，很是易於調試和開發（不須要simulator）。

工欲善其事

我終於弄懂了各類前端build工具

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……諸多的名詞讓你一時間感到手足無措，好像根本學不完。 其實關鍵就是，不要被它們唬住。要知道，全部這些工具，其最初的設計目的，都是要讓你的工做變得更簡單。 要想弄明白這些工具是什麼、如何工做以及爲什麼要使用它們，你其實只須要抓住少數幾個核心概念。

前端工程化工具初選

面對日益紛雜的前端工具，做爲新人常感無從下手。通過一番檢索和簡單對比，再結合本身的喜愛，篩選了將要學習和使用的工具，以適應日益工程化、專業化的 Web 前端開發工做。

寫給後端看的前端技術——webpack（上）

不懂「前端」說的virtual dom、ReactJS、Vue、Angularjs這一大堆東西，也不懂前端說的ES6的優雅，也不知道爲啥我用Bootstrap、jQuery就得「剁手」。世界上總得有一篇文章是寫給後端工程師看的，後端寫給後端看的，不裝逼，認認真真。我決定用webpack做爲學習前端的第一步，一方面是因爲「Build工具」幾乎是學習前端的第一道門檻；另外一方面它已經「千秋萬代一統江湖」了因此請無視——gulp、grunt之類的吧。

php工程獅感知的前端工做流程

這個時代不懂點前端知識，真的沒有辦法生存。就算不會寫，也得了解它的原理吧！最近作了一些總結，以前都是迷迷糊糊，搞不清楚前端以前的相關定位。好好梳理了一下。錯誤之處請各位指正。

本文主要說的是 JavaScript 工做流程。

前端工程化

從零開始，教你如何開始前端自動化

什麼是前端自動化構建就不說了，應爲我不是寫書的。在前端開發實踐中，大公司都會有本身的基礎前端架構，能容包括了開發環境、代碼管理，代碼質量，性能檢測，命令行工具，開發規範，開發流程，前端架構及性能優化。相對而言，小公司或則是創業型的公司，前端架構這塊作得就相對沒有這麼好，甚至於很不規範，而規範的目的在於提高工做效率。

[ 前端實習日記 ] 構建靜態頁面基礎架構

之前咱們敲靜態頁面都是寫好html，css, js，而後再去刷新瀏覽器，艾尼馬又不行，有從新寫過再刷新，一個頁面下來按chrl+r的次數可以讓你的鍵盤多活好幾天，要不會刷新快捷按鈕那不得手殘了都。

後來，grunt,gulp等工具應運而生，固然它們不止這個功能，但卻很好地減輕了咱們的負擔。這篇文章介紹一些如何使用這些工具使構建頁面變得簡單高效。這只是我的的目前在用的不成熟的方案，更專業的還請參考百度FIS。

精益 React 學習指南 （Lean React）- 2.1 前端工程化概述

在前端開發的初始階段，開發者一般只用關 html, css, javascript。可是現代化的前端開發已經不只僅是業務代碼自己，真正的前端開發環境涉及不少方面的需求，如：

• 開發需求

• 共享需求

• 性能需求

• 部署需求

這些東西咱們都統一的叫作前端工程化，爲了簡化前端工程化的配置，出現了不少優秀的工具

精益 React 學習指南 （Lean React）- 2.4 webpack + gulp 構建完整前端工做流

React 在大多數狀況被當作當 SPA （單頁面應用）的框架，實際上在真實業務開發過程當中，非單頁面應用的業務框架居多。因此咱們在構建前端工程的時候，以多個頁面的方式維護。下面定義前端工程的目標：

• 基礎技術

• 應用模式

• 樣式結構

gulp

初探前端自動化神器 （Gulp）

Gulp 是一個構建系統，開發者可使用它在網站開發過程當中自動執行常見任務。Gulp 是基於 Node.js 構建的，所以 Gulp 源文件和你用來定義任務的 Gulp 文件都被寫進了JavaScript（或者CoffeeScript）裏。前端開發工程師還能夠用本身熟悉的語言來編寫任務去 lint JavaScript 和 CSS、解析模板以及在文件變更時編譯LESS 文件（固然這些只是一小部分例子）。

gulp前端自動化工具的快速入門案例

最近項目和工做中要開始使用自動化工具了，回想一下之前接觸這個的時候就是什麼nodejs，grunt之類的了，此次乾脆就用一個新的，那麼就是gulp

gulp構建前端自動化

grunt是前端工程化的先驅
gulp更天然基於流的方式鏈接任務
Webpack最年輕，擅長用於依賴管理，配置稍較複雜
推薦使用Gulp，Gulp基於nodejs中stream，效率更好語法更天然,不須要編寫複雜的配置文件

webpack

[新姿式]前端革命，革了再革：WebPack

五年間，NodeJS成爲了服務端以及腳本工具的一代翹楚，NPM的成功讓你們意識到一個集中式的依賴／包管理體系的重要性，Bower應運而生，還有試圖將CMD和NPM包帶到前端領域，統一先後端包格式的Browserify等等，大量的前端工具爆發式地出現，WebPack是其中的(又)一款模塊打包工具。

[譯] Webpack 前端構建集成方案

構建工具逐漸成爲前端工程必備的工具，Grunt、Gulp、Fis、Webpack等等，譯者有幸使用過Fis、Gulp。
前者是百度的集成化方案，提供了一整套前端構建方案，優勢是基本幫你搞定了，可是靈活性相對比較低，社區也沒那麼大；後者提供了很是靈活的配置，簡單的語法能夠配置出強大的功能，流控制也減小了編譯時的時間，能夠和各類插件配合使用。
譯者由於要使用AMD模塊機制，開始接觸了webpack，發現官網上講的晦澀難懂，沒法實踐，而國內雖有博客也講解一些入門的教程，可是要麼篇幅太短，要麼只講各類配置貼各類代碼，而後谷歌發現了國外大牛寫的這篇博客，發現講的很是通俗易懂，配合實踐和代碼，讓譯者感慨萬千，瞬間打開了一扇大門。

webpack學習（一）—— 入門

本文主要內容譯自webpack入門，以一些小的demo對webpack作了簡單介紹，每一個步驟都很簡單明瞭，適合對webpack徹底不瞭解的新手閱讀，以對webpack有個基本的瞭解。

webpack學習（二）—— 進階

本文將介紹如何使用webpack對具備較爲規範的結構的項目進行構建。主要包括如下幾個方面：

• 進一步瞭解webpack.config.js

• 進一步瞭解webpack-dev-server

• 使webpack支持es6語法

webpack學習（三）—— webpack-dev-server

本文主要介紹如下兩方面的內容：

• webpack-dev-server自動刷新

• 熱加載（Hot Module Replacement）

webpack學習（四）— code splitting

首先說，code splitting指什麼。咱們打包時一般會生成一個大的bundle.js(或者index,看你如何命名)文件，這樣全部的模塊都會打包到這個bundle.js文件中，最終生成的文件每每比較大。code splitting就是指將文件分割爲塊(chunk)，webpack使咱們能夠定義一些分割點(split point)，根據這些分割點對文件進行分塊，並實現按需加載。

webpack 進階

詳解webpack-dev-server的使用

webpack-dev-server是一個小型的Node.js Express服務器，它使用webpack-dev-middleware來服務於webpack的包，除此自外，它還有一個經過Sock.js來鏈接到服務器的微型運行時。

webpack-dev-server使用方法，看完還不會的來找我~

webpack-dev-server主要是啓動了一個使用express的Http服務器。它的做用主要是用來伺服資源文件。此外這個Http服務器和client使用了websocket通信協議，原始文件做出改動後，webpack-dev-server會實時的編譯，可是最後的編譯的文件並無輸出到目標文件夾。

重寫webpack多頁應用配置腳手架

歷經了多個web項目的實戰檢驗，咱們對webapck在構建中逐步暴露出來的性能問題概括主要有以下幾個方面：

• 代碼全量構建速度過慢，即便是很小的改動，也要等待長時間才能查看到更新與編譯後的結果（引入HMR熱更新後有明顯改進）；

• 隨着項目業務的複雜度增長，工程模塊的體積也會急劇增大，構建後的模塊一般要以M爲單位計算；

• 多個項目之間共用基礎資源存在重複打包，基礎庫代碼複用率不高；

• node的單進程實如今耗cpu計算型loader中表現不佳；

針對以上的問題，咱們來看看怎樣利用webpack現有的一些機制和第三方擴展插件來逐個擊破。

基於webpack+gulp搭建純靜態頁面型前端工程模板

基於webpack搭建純靜態頁面型前端工程解決方案模板。

5分鐘打造簡易高效的webpack配置

5分鐘從零搭建一個簡易高效的webpack開發環境。首先咱們明確一下需求：

• 打包調試

• 提取公共代碼

• 壓縮

• 熱替換

webpack分包及異步加載套路

前行

工具武裝的前端開發工程師

《基於React的前端工程實戰》大綱，也是筆者心中的前端學習路線圖

本書最大的優點在於造成了完整的知識體系結構，讓你合理概括本身學到的知識，將知識放在它該在的地方。另外筆者想強調的是，不管React仍是Vue或者Angular2都是很是優秀的前端框架，使用哪一個框架仍是屬於術的範疇。本書雖然立足於React，可是其中蘊含的設計模式與工程架構能夠通用於任何框架。筆者也着力於不但願受到某個具體框架的太多的束縛，畢竟在這個突飛猛進的前端世界，說不許哪天就落於人後了。

寫給想作前端的你

給你們的建議

• 道阻且長，冰凍三尺非一日之寒；

• 普遍地學習，有條件和能力的同窗儘早地接觸客戶端開發，更多地瞭解服務端開發；

• 前端大有可爲，新技術的發明者大多不是老東西，老東西經驗足可是歷史包袱重；

• 只在瀏覽器中思考必死無疑；

• 像一位同窗提到的，打好基礎，offer就有。學校裏倒騰幾年真的很難搞出什麼大新聞，面試官也不會刻意爲難你；

• 測試測試測試，前端測試值得學習掌握，好比e2e，這是一個機會：我能告訴你不少公司的前端測試都瞎JB點嗎？

• 學習一些函數式編程的思想，例如：lodash、Redux、RxJS；

• 拿到offer只是開始不要嘚瑟。