知識點涉及怎麼結合gulp、webpack、Babel等並結合NodeJS+NPM開發前端。
爲什麼需要前端工程化？
前端工程化的意義在於讓前端這個行業由野蠻時代進化爲正規軍時代，近年來很多相關的工具和概念誕生。好奇心日報在進行前端工程化的過程中，主要的挑戰在於解決如下問題：
✦ 如何管理多個項目的前端代碼？
✦ 如何同步修改複用代碼？
✦ 如何讓開發體驗更爽？
項目實在太多
之前寫過一篇博文 如何管理被多個項目引用的通用項目？，文中提到過某某的項目偏多（PC/Mobile/App/Pad），要爲這麼多項目開發前端組件並維護是一個繁瑣的工作，並且會有很多冗餘的工作。
更好的管理前端代碼
前端代碼要適配後臺目錄的規範，本來可以很美好的前端目錄結構被拆得四分五裂，前端代碼分散不便於管理，並且開發體驗很不友好。
而有了前端工程化的概念，前端項目和後臺項目可以徹底分離，前端按自己想要的目錄結構組織代碼， 然後按照一定的方式構建輸出到後臺項目中，簡直完美（是不是有種後宮佳麗三千的感覺）。
技術選型
調研了市場主流的構建工具，其中包括gulp、webpack、fis，最後決定圍繞gulp打造前端工程化方案，同時引入webpack來管理模塊化代碼，大致分工如下：gulp：處理html壓縮/預處理/條件編譯，圖片壓縮，精靈圖自動合併等任務webpack：管理模塊化，構建js/css。
至於爲什麼選擇gulp & webpack，主要原因在於gulp相對來說更靈活，可以做更多的定製化任務，而webpack在模塊化方案實在太優秀（情不自禁的讚美）。
怎麼設計前端項目目錄結構？
抽離出來的前端項目目錄結構如下
appfe目錄：appfe就是前面提到的前端項目，這個項目主要包含兩部分：前端代碼、構建任務appfe > gulp目錄：包含了所有的gulp子任務，每個子任務包含相關任務的所有邏輯。appfe > src目錄：包含了所有前端代碼，比如頁面、組件、圖片、字體文件等等。appfe > package.json：這個不用說了吧。appfe > gulpfile.js：gulp入口文件，引入了所有的gulp子任務。
理想很豐滿，現實卻很骨感，這麼美好的願望，在具體實踐過程中，註定要花不少心思，要踩不少坑。
好奇心日報這次升級改造即將上線，終於也有時間把之前零零碎碎的博文整合在一起，並且結合自己的體會分享給大家，當然未來可能還會有較大的調整，這兒拋磚引玉，大家可以參考思路。
gulp 是什麼？
gulp是一個基於流的構建工具，相對其他構件工具來說，更簡潔更高效。
Tip：之前寫過一篇gulp 入門，可以參考下，如果對gulp已經有一定的瞭解請直接跳過。
webpack 是什麼？
webpack是模塊化管理的工具，使用webpack可實現模塊按需加載，模塊預處理，模塊打包等功能。
Tip：之前寫過一篇webpack 入門，可以參考下，如果對webpack已經有一定的瞭解請直接跳過。
如何整合gulp & webpack
現在webpack明顯呈越來越受歡迎的趨勢，而gulp在當年的jquery時代的時候也是發揮了重要作用。他們都可以看做是構建工具的一種，構建工具的目的是實現構建過程的自動化。他們都是node工具包，可以通過npm全局安裝到本地計算機。
Gulp是任務運行工具，比如，常用命令有：gulp.task()，Webpack不是任務運行工具， Webpack是一個模塊構建工具。主要目的是幫助程序模塊及其依賴構建靜態資源。所以，gulp在jQuery時代堪稱完美，而對於SPA大型單頁應用來說，webpack的模塊化很好地解決了這個問題。
gulp 走的是流式處理路線，webpack 走的是模塊處理路線，但是兩者所要達成的目標卻是一樣的，那就是促進前端領域的自動化和工程化管理。
webpack是衆多gulp子任務中比較複雜的部分，主要對JS/CSS進行相關處理。
包括：模塊分析、按需加載、JS代碼壓縮合並、抽離公共模塊、SourceMap、PostCSS、CSS代碼壓縮等等...
使用node構建環境(webpack,gulp)
關鍵點
其中關鍵點是npm script中運行的代碼是優先本目錄中的模塊，即運行webpack,gulp須要全局安裝的模塊時，現在只用安裝在本項目內便可以運行
代碼
package.json
{
...
scripts: {
"dev": "webpack",
"build": "gulp"
}
...
}
使用（交付後端）
只須要把整個本地項目全部複製給後端人員，並在後端開發機上安裝node.js環境即可以正常運行
- 運行代碼
npm run dev
npm run build
nodejs，npm，gulp，webpack的介紹和關係
nodejs
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。讓JavaScript運行在服務端的開放平臺，它讓JavaScript成爲PHP，Python，Ruby等服務器端語言平起平坐的腳本語言。（安裝的時候注意設置環境變量）
npm
npm是nodejs的一個模塊，是nodejs的包管理器。
我們在Node.js上開發時，會用到很多別人已經寫好的javascript代碼，如果每當我們需要別人的代碼時，都根據名字搜索一下，下載源碼，解壓，再使用，會非常麻煩。於是就出現了包管理器npm。大家把自己寫好的源碼上傳到npm官網上，如果要用某個或某些個，直接通過npm安裝就可以了，不用管那個源碼在哪裏。並且如果我們要使用模塊A，而模塊A又依賴模塊B，模塊B又依賴模塊C和D，此時npm會根據依賴關係，把所有依賴的包都下載下來並且管理起來。試想如果這些工作全靠我們自己去完成會多麼麻煩！
市場上還有很多常用的第三方工具，cnpm，yarn，bower
gulp
Gulp就是爲了規範前端開發流程，實現前後端分離、模塊化開發、版本控制、文件合併與壓縮、mock數據等功能的基於流一個前端自動化構建工具。說的形象點，“Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上我們可以對產品進行管理。”
Gulp是通過task對整個開發過程進行構建。
1.構建工具
2.自動化
3.提高效率用
webpack
Webpack 是當下最熱門的基於配置的前端資源模塊化管理和打包工具。它可以將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等。
1.打包工具
2.模塊化識別
3.編譯模塊代碼方案用
gulp和webpack都是基於node.js的工具
總結
1.jquery依然依靠豐富的dom操作去組合業務邏輯，當業務邏輯複雜的時候，每行代碼都會有不知所云的感覺。因爲:
- 第一：業務邏輯和UI更改該混在一起，
- 第二：UI裏面還參雜這交互邏輯，讓本來混亂的邏輯更加混亂。
當然第二點從另一方面看也是優點，因爲有的時候UI交互邏輯能夠更加靈活地嵌入到業務邏輯，這在其他MV*框架中都是比較難處理的。
2.vuejs非常小清新，小清新不代表做不了複雜的東西，比如官方的這個demo就不錯：http://vuejs.org/examples/svg.html
3.reactjs代碼量最多，因爲它既要管理UI邏輯，又要操心dom的渲染。
4.extjs無感 沒用過。
5.angularjs渲染快，就是量大（相對於vue.js）。
前端工程化可以自動化處理一些繁複的工作，提高開發效率，減少低級錯誤。
更重要的是，還是文章開頭的說的，前端工程化最大的意義在於給我們新的視角去看待前端開發，讓前端開發可以做更復雜、更有挑戰的事情！
【參考文章】
1、前端三大主流框架的對比React、Vue、Angular - 簡書 https://www.jianshu.com/p/c4005414025c
2、node.js+npm+vue+webpack+nginx前端項目打包部署到服務器 - https://blog.csdn.net/qq_35813265/article/details/81872351
3、nodejs與nginx的完美搭配 - https://blog.csdn.net/qq_17475155/article/details/66473855
4、用Nginx做NodeJS應用的負載均衡 - https://blog.csdn.net/chszs/article/details/43203127
5、使用pm2躺着實現負載均衡 - https://blog.csdn.net/qq_17475155/article/details/53823862