前言：
在做純靜態頁面開發的過程中，難免會遇到一些的尷尬問題。比如：整套**有50個頁面，其中有40個頁面頂部和底部模組相同。那麼同樣的兩段**我們複製了40遍（最難受的方法）。然後，這個問題就這樣解決了。再然後，產品經理看了幾遍後突然說頂部的某塊需要改改設計。。。突然感覺好尷尬~~（心裡是萬馬奔騰~），然後呢？然後就期待下一次的萬馬奔騰！！！
雖然類似問題的解決方案很多，但是純前端，不用各種框架的情況下，一種比iframe更靠譜的解決方案莫過於用像gulp這樣的構建工具來完成。雖然在體驗上也許會有一點小小的瑕疵（每次改完檔案要預覽，都需要先gulp一下），但是也並非是不能忍受。畢竟我們想要的僅僅是改一改某公共模組就能達到解決40個頁面的目的。
舉例的開發環境配置：
必備外掛程式：
gulp-file-include
技能描述：
將需要模組化的html**放到乙個獨立的html檔案中。如：head.html
然後在需要使用的地方使用：@@include('./head.html')
檔案路徑自定義~~
最後配置好gulp並執行
使用demo：
技能介紹：
執行 gulp prew 會將檔案複製到prew目錄下，並生成對應的完整html檔案。（注：此處將pages資料夾下的檔案直接放到了prew根目錄下，並非prew/pages。根據需要自改配置）
執行 gulp watch後gulp會建立乙個監聽程序，在開發的時候每次修改檔案後，gulp會自動執行prew，這樣就不用每次都手動執行gulp prew然後再去刷瀏覽器。（這是一招實用技能）
最後：
這套技能的要點不在於如何使用gulp，而是怎麼去劃分模組。每個模組除了有html**以外，其實還可以有js、css**或者引入js、css檔案的**，這樣才能更模組一點。
gulp基於seaJs模組化專案打包實踐
了解gulp的肯定對npm都有所了解，在這裡就不再贅述，直接貼依賴包。devdependencies 檔案中使用了gulp的外掛程式 gulp load plugins 沒用過的可以簡單了解下 css 合併 壓縮 md5 gulp.task css function pipe autoprefixe...
什麼是模組化？模組化的好處
1.高內聚低耦合，有利於團隊作戰，當專案很複雜的時候，將專案劃分為子模組分給不同的人開發，最後再組合在一起，這樣可以降低模組與模組之間的依賴關係體現低耦合，模組又有特定功能體現高內聚。2.可重用，方便維護，模組的特點就是有特定功能，當兩個專案都需要某種功能的時候，我們定義乙個特定的模組來實現該功能，...
什麼是模組化？模組化怎麼實現？
前言 增加印象，留下腳印 忘記還可以翻一翻 奧利給。1，什麼是模組化 公司裡乙個專案是有很多程式設計師一起開發的，例如 多人運動 這個專案 有程式設計師a 程式設計師b 程式設計師c 程式設計師a 寫了 aaa.js 裡面有幾千行 幾萬行 程式設計師b 寫了 bbb.js 裡面有幾千行 幾萬行 程式...