前端經曆了初期的野蠻生長（切圖，寫簡單的特效）——為了相容浏覽器相容性而出現的各種類庫（jquery,yui等——mv*（飽暖思淫欲，代碼多了，也就想到怎樣組織代碼結構，backbone，angularjs等）——工程化（利用grunt，gulp，yeoman做項目腳手架以及打包部署），然而這些東西配置起來需要一定的門檻，并且需要跟業務耦合。全端化、全棧化以及工程化的大環境下，我們希望有這樣一套工具可以盡量多的支援業務場景，盡量少的配置，盡量簡單的使用指令。而dbl就是這樣一個前端自動化工具，主要功能：項目腳手架，本地server（實時監控，修改立即生效）,本地可視化mock資料并會自動化生成接口文檔，deploy項目。下面會詳細介紹該工具的使用。
運作指令後，dbl會為我們初始化項目結構：
我們的項目腳手架依賴webpack（如果對此不熟悉的可以自行谷歌），優勢在于：
比起grunt，gulp，在配置上要簡單很多。另外，grunt，gulp隻是作為打包工具，如果要做子產品化開發，還必須引入requirejs或者seajs。而用了dbl，你完全不用考慮那些麻煩的配置問題，一切都幫你配置好了，你可以像寫node一樣寫js了。
子產品化開發，一個完整子產品應該包含html，css，js。在傳統工具中，我們很難維護子產品css和js保持同步。而dbl，可以用做到在開發過程中直接這樣使用：
工具會自動把less編譯成css，并且在html頁面上生成style标簽，并把css插入進去。細心的你可能會說，html應該對于style标簽有個數限制，太多無法支援。而且如果上線時采用這種方式不能很好的利用cdn緩存——不過，不用擔心，deploy的時候，我們會把這些style提取出來，根據頁面級别合并成一個css檔案。
資源盡量利用浏覽器緩存。利用angularjs + requirejs，如果有多個vm頁面，公用的資源我們習慣用grunt-requirejs根據頁面打包在一起。這樣做，就忽視了浏覽器緩存對于性能的影響。而dbl，如果有兩個頁面共同引用了一個子產品，這個子產品将會被打包到common.js。
支援less，sass（這個考慮到很多使用者安裝時會出問題，如果需要自己在 make-webpack.config.js配置裡加上即可）。這種可配置的方式極大的考慮了擴充。
本地server。修改自動生效，而且幾乎是瞬時的。
本地mock資料。mock資料是通過啟用另外一個node服務作為資料提供方。
此指令運作後，mock服務自動啟動。預設端口是8001——注意server和mock是兩個獨立服務。mock服務可以可視化編輯接口，會自動生成接口文檔，友善前後端合作。而且隻要項目在，理論上這個文檔一定是最新的。比記錄在doc文檔系統友善多了。你可以通過:http://localhost:8001 通路，界面長這樣：
dbl deploy 指令會把資源進行打包壓縮，并且在目前目錄下生成build檔案夾。到這裡，你就可以愉快的把此目錄上傳到cdn上了。
項目位址：https://github.com/cc17/dbl