[轉]基於gulp和webpack的前端工程化

標籤：

本文範例代碼 ：https://github.com/demohi/learning-gulp

本文主要簡單介紹一下基於gulp和webpack的前端工程化。

技術棧

• React.js
• reFlux
• Node.js

我們的需求

• 基於CommonJS模組化開發
• 基於React.js的組件化開發(JSX)
• 為保證組件的複用，css需要打包到js中
• 有國際化需求，靜態檔案需要部署在CDN上面

工程化工具的選擇

• gulp(基於stream的構建工具，與grunt相比，速度快且可程式化)
• webpack(前端檔案打包工具，支援CommonJS、JSX、css等多種檔案混合)

工程化流程

開發模式

開發模式比較簡單，主要就是監聽檔案變化，自動進行打包、合并的操作。

生產模式

參考我們的技術棧與需求，我們的靜態檔案都要發布到cdn上，而且必須有md5版本號碼，方便快速發布(cdn更新極其緩慢，所以更新必須使用新的檔案名稱)

生產模式主要增加了檔案壓縮、檔案md5名修改、上傳cdn、替換html等操作

這樣的好處就是上線非常方便，一個命令即可更新線上，而且不存在緩衝問題。

代碼參考

基於上述流程寫了個demo，供大家參考learning-gulp

可最佳化的點

• 等gulp4發布，可以直接基於gulp來做串列任務
• 增加livereload,不要再重新整理
• 使用react-hot-loader，不重新整理即時替換修改

[轉]基於gulp和webpack的前端工程化