自動化構建工具。
包含單頁面應用和多頁面應用策略。
整合Angular4使用。
學習試手得差不多了，基本功能已經完備，此處備份思路，不會再更新本此工具。
ver 1.1.0
- 加上 Angular4；
- mock數據，虛擬服務器代理；
- chrom無法顯示
cheap-module-source-map的sourcemap，換了一個devtool，現在sourcemap指向原文件； - 增加發佈環境下的webpack日誌參數；
- 開發環境下webpack不使用
UglifyJsPlugin()； - 增加新命令；
ver 1.0.1
- 部分任務做成異步任務；
watch-wp監視流程修改；- 拋出錯誤不再終止任務；
- sass編譯
- sass校驗
- css補全
- css壓縮
- css sprite生成
- js校驗
- js壓縮
- 文件模塊化
- 提出公共文件
- browser-sync
├── build
│ └── css # sass編譯後，未經壓縮的css文件
│ └── icon # 圖標文件
│ └── images # 圖片目錄
│ └── js # 非第三方插件的js文件
│ └── module # 第一級為chunk分類，第二級為頁面
│ └── common-list # 每個文件夾對應一個頁面
│ └── a
│ └── index.js
│ └── b
│ └── index.js
│ └── common-page
│ └── ...
│ └── sass # sass文件目錄
│ └── ts # Angular的ts文件目錄
├── dist # 輸出目錄
│ └── css # 不使用webpack的css輸出目錄
│ └── js # 不使用webpack的js輸出目錄
│ └── module # 使用webpack生成的js和css文件
│ └── ...
├── vendor # 插件和庫
│ └── ...
└── gulpfile.js
└── webpack.config.js # webpack配置
└── tsconfig.json # TypeScript配置
└── .eslintrc # eslint規則
└── .stylelintrc # stylelint規則
首先電腦要安裝node.js，這裡不累述node.js的安裝姿勢了。
$ git clone git@github.com:HenriettaSu/Gulp-Webpack.git
$ cd Gulp-Webpack
$ npm install
$ npm install gulp -global
然後到 node_modules/gulp-asset-rev/index.js 裡找到下面代碼：
var verStr = (options.verConnecter || "-") + md5;
src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
替換成：
var verStr = (options.verConnecter || "") + md5;
src = src + '?v=' + verStr;
本套件會根據環境有不同的配置，默認為開發環境，當需要生成發佈版的時候，請將環境變量改為發佈環境。
更改當前終端下環境變量：
$ export NODE_ENV=production
npm run build：編譯發佈環境文件
npm run webpack：編譯開發環境文件，所編譯文件均未壓縮
npm run dev：進入開發環境，並開始監視文件變化
$ gulp css-sprite
$ gulp imagemin
執行壓縮任務前，會先執行 css-sprite 生成sprite。
$ gulp stylelint
**重要提示：**校驗不通過將拋出錯誤，不能編譯文件。
校驗這種事還是有點主觀的，以下幾種規則都是為了增強可讀性的，刪掉或修改並不影響：
case類：大小寫empty-lines類：空行newline類：換行space類：空格whitespace類：空白
但是下列幾種規則建議保留：
color-no-invalid-hex：避免無效的色值；no-duplicate類：避免重複；no-extra-semicolons：避免多餘分號；no-empty類：避免空塊等；no-unknown類：避免脫字誤字；no-vendor-prefix類：為了避免漏了前綴或使用了前綴過期，編譯sass的時會自動執行autoPrefixer()添加前綴；shorthand-property-no-redundant-values：避免可簡寫屬性出現冗余值；
$ gulp sass-to-css
會首先執行 stylelint 任務，通過校驗後才能編譯sass文件。
前綴補全會在這裡執行。
$ gulp minify-css
壓縮的文件將會輸出到 dist/css 目錄下。
$ gulp minify-module-css
使用webpack生成的css文件（在 dist/module 目錄下）沒有經過壓縮，需要執行這個命令來進行壓縮。
$ gulp eslint
校驗規則使用eslint，可以自己配置。
$ gulp jscompress
會首先執行 eslint 任務，通過校驗才能壓縮。
可能會廢棄這個功能，反正webpack就會進行打包壓縮。
$ gulp webpack
目前webpack的作用是提取公共文件，壓縮js。
$ gulp browser-sync
熱啟動，同時生成內網可以瀏覽的地址，供不同設備調試。
$ gulp
進入監聽狀態，自動編譯文件，文件更新時自動刷新頁面。
$ gulp wp
同上。區別在於這個使用了webpack：提取公共文件，css和js用webpack打包壓縮。
考慮到某些情況下，頁面類型不同導致加載文件差異較大，module先以文件夾對頁面進行簡單分類如：列表頁、詳情頁、等，每個頁面又需要一個文件夾對應，加載的文件以 require() 的形式寫在 index.js 文件內。
目前設想的是，react、jquery之類的通過 <script> 單獨引入，其他第三方插件打包一起（TODO：配置拓展要不要打包到一起？）並分公共文件和獨立文件。
詳細參看 webpack.config.js 文件，有簡單註釋，暫時覺得沒有什麼需要特別拿出來說的。
build開發分支dist包含全部編譯後代碼的分支vendor庫、第三方插件分支
QQ：3088680950
如果發現八阿哥了或者有功能上的建議，推薦通過 issue 發起討論。
MIT license. 有好的想法歡迎提供。