前端自動化（一）
隨著前端技術棧的發展，形成了自動化，工程化等相關概念。
工具化
在前端的技術棧發展過程中，出現了很多的工具，形成了工具化，能夠用工具完成的絕不要手工完成，來幫助開發者提升效率。
1. 前端工作流工具： Gulp，Grunt
2. 前端js模組編譯工具：Babel，Browserify，Webpack
3. 包管理器： npm，bower
4. 前端開發系列工具： livereload，資料mock，程式碼監控，程式碼檢查。
工程化
工程化是一個發展趨勢，以工具化為基礎。
工程的核心是流程自動化，又稱為構建，這些包括了：程式碼質量檢測，程式碼壓縮，程式碼合併，程式碼優化，程式碼編譯，單元測試等等部分。構建就是把這些以工作流程的方式組合起來，然後用一個命令列執行這整個流程。它有點像批處理，但是是程式開發中使用的特殊批處理。
自動化
自動化是以工程化為基礎，是在流程自動化上更進一步的自動化。
持續整合就是全自動化的一個終極體現。他的主要流程是：版本控制庫 ->構建 ->測試 ->報告.
程式碼規範
程式碼規範可以提高程式碼的可閱讀性和避免一些低階錯誤。為了將程式碼規範的檢查放到前端開發工程中，各種前端語言都有對應的hint或者lint工具。在github官方推出的atom裡有眾多的外掛可以做程式碼的質量檢查，會讓開發者在儲存程式碼時即給出相應的提示。向html,css的錯誤，常規情況下並不容易被發現，有了這些工具就可以改善這一點。
預處理
SASS
甚至為了避免這一點，引入了各種預編譯語言，css的預編譯less，現在流行的是sass，功能也更加強大，語法錯誤無法通過編譯，來彌補css這種缺陷。
sass的優勢很明顯：
- sass提供了很多簡便的寫法,css預編譯,主要的設計思想可以按照程式設計的思路去編寫自己的樣式,SCSS在SASS3.0的基礎上吸收了Less,形成了現在的SCSS.
- 易維護，更方便的定製
- 效率的提升，css3的發展，加上主流瀏覽器的相容性不一，hack的處理可以由sass處理.
以及為了提高效率推出了眾多的sass庫，compass等。
ES6
js的預處理語言也有很多，只是為了讓有其他語言經驗的開發者更容易的上手js的編碼。
因為瀏覽器的實現大多還是 ES5 的標準，為了使用最新的 ES6 語法，通常的做法是採用 Babel 將 ES6 編譯為 ES5。
js模組化
這個過程中，出現了AMD，CMD，UMD這些模組定義模式。
- AMD（Asynchronous Module Definition）: 非同步模組定義，可以非同步的載入或依賴其他模組，支援的庫如 Require.js, Sea.js 。
- CommonJs : 可以將 Javascript 按照 Node 模組的方式定義。
- UMD: 為了相容 AMD 還是 CommonJsx 風格，出現了 UMD。
AMD例子：
define(['jquery'], function ($) {
function myFunc(){};
return myFunc;
});
CMD例子:
var $ = require('jquery');
function myFunc(){};
module.exports = myFunc;
UMD例子：
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
//Node, CommonJS-like
module.exports = factory(require('jquery'));
} else {
//Browser globals (root is window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
//methods
function myFunc(){};
//exposed public method
return myFunc;
}));
其中，CommonJs 的風格是需要編譯的，最終會將多個模組編譯為一個 UMD 方式定義的模組。使用webpack[推薦]。
Browserify 是最先出現的 CommonJs 編譯工具，使得我們可以像寫 Node 模組一樣寫前端程式碼，Browserify 可以 build 使用 npm 中的所有模組（只要模組支援在前端中執行）
Webpack 是支援 CommonJs 和 AMD 的模組編譯工具，逐漸替代 Browserify, 基於 AMD 的好處就是程式碼可以非同步話，這是 Browserify 無法做到的
檔案處理
通常一個前端專案會分有一個 src 目錄和 dist 目錄， src 放置原始碼，dist 放置編譯後的程式碼。所以在前端工程的流程中會涉及到檔案的拷貝，刪除，移動等流程。
開發效率
通常的前端開發過程是，修改前端程式碼，呼叫命令編譯程式碼，然後瀏覽器 F5 重新整理。這個過程可以做到自動化，通過程式碼監控工具，指定要監控的目錄和檔案，如果對應檔案有改變，呼叫編譯工具編譯原始碼，然後通過 livereload 自動重新整理瀏覽器。 gulp-browserify也可以實現同樣的功能。
資料的mock
現代化前端專案開發大多是前後端分離的方式，也就是後端基本是提供 API 服務，在真實開發環境中，通常的問題是，後端 API 極其不穩定或者沒開發，為了不阻礙前端的開發，通常的做法是，前後端先約定 API 介面定義，然後前端根據定義 mock 介面。
我們可以利用mock工具mock.js來實現。
效能需求
- 程式碼壓縮
- 程式碼合併
- 圖片壓縮
- 雪碧圖或者css sprit。
這些過程都可以在前端工程的 build 過程中實現。
前端工作流
為了解決前端工程中複雜的流程，出現了很多開源前端流程處理工具。這些工作流工具不僅僅是其本身，都是一個流程生態體系，每個工具都涉及到對應的外掛庫，幾乎我們能想到的前端工程問題都有對用的外掛能夠解決。
Grunt和Gulp
目前 Gulp 幾乎已經取締 Grunt ，成為前端的預設流程工具，其核心思想是基於記憶體的流的方式，提供高效的效能，極簡的 API，定義不同的 task，然後將 task 串聯起來。
關於gulp，可以參見我的另一篇文章gulp入門1
版本管理工具
git，linux創始人的作品，語法和shell類似，目前最牛的版本管理工具，建議使用命令列，而不是圖形化介面，這樣是無法領略它的美。
大量的使用，繪製git命令圖，完成日常的開發足矣。
後言
目前國內也出現了前端構建工具[實現工程化]，如百度的fis，百度在第3版中說明，編譯工具應該具備的3個核心能力：
- 資源定位: 獲取任何開發中所使用資源的線上路徑
分離開發和部署路徑之間的關係,靜態資源的定位,加上了md5的戳.
對html的script,link,style的內容，替換url.
在css中定位url - 內容嵌入:把一個檔案的內容(文字)或者base64格式的圖片嵌入到另一個檔案中去。
- 依賴宣告:在一個文字檔案內標記對其他資源的依賴關係。
在我們學習自動化的過程中，可以選擇多個開源的組合工具，如gulp + webpack + Babel等，也可以選擇類似百度的fis這類整合工具。
現在國內的大公司，在招聘前端，一般都會要求會使用這些工具，做到前端自動化的開發，我覺得這是趨勢，工具能夠簡化開發流程，豐富的庫也可以提升開發效率，使我們專注於造更小的輪子，我相信，一旦使用了這些工具，就再也回不去了，應為它真的很好用。具體的工具使用我會陸續的在部落格中更新，針對性的寫一些東西，來完善自己的知識體系。