背景
前端經歷了初期的野蠻生長（切圖，寫簡單的特效）——為了兼容瀏覽器兼容性而出現的各種類庫（JQUERY,YUI等——mv*（飽暖思淫欲，代碼多了，也就想到怎樣組織代碼結構，backbone，angularjs等）——工程化（利用grunt，gulp，yeoman做項目腳手架以及打包部署），然而這些東西配置起來需要一定的門檻，並且需要跟業務耦合。全端化、全棧化以及工程化的大環境下，我們希望有這樣一套工具可以盡量多的支持業務場景，盡量少的配置，盡量簡單的使用命令。而DBL就是這樣一個前端自動化工具，主要功能：項目腳手架，本地server（支持wacth，修改立即生效）,本地可視化mock數據並會自動化生成接口文檔，deploy項目。下面會詳細介紹該工具的使用。
安裝dbl工具
sudo npm install dbl -g dbl -V 項目腳手架
mkdir demo && cd demo dbl init 運行命令后，dbl會為我們初始化項目結構：
|-demo |-- src |-- index.html |-- css |-- js |-- make-webpack.config.js |-- package.json |-- aliasMap.json ... 如何使用及工具優勢
我們的項目腳手架依賴webpack（如果對此不熟悉的可以自行谷歌），優勢在於：
- 比起grunt，gulp，在配置上要簡單很多。另外，grunt，gulp只是作為打包工具，如果要做模塊化開發，還必須引入requirejs或者seajs。而用了dbl，你完全不用考慮那些麻煩的配置問題，一切都幫你配置好了，你可以像寫node一樣寫js了。
- 模塊化開發，一個完整模塊應該包含html，css，js。在傳統工具中，我們很難維護模塊css和js保持同步。而dbl，可以用做到在開發過程中直接這樣使用：
/**這是文件 component/list.js**/ require('component/list.less') 工具會自動把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服務作為數據提供方。 ~~~js dbl server -p 3001 ~~~ 此命令運行后，mock服務自動啟動。默認端口是8001——注意server和mock是兩個獨立服務。mock服務可以可視化編輯接口，會自動生成接口文檔，方便前后端合作。而且只要項目在，理論上這個文檔一定是最新的。比記錄在doc文檔系統方便多了。你可以通過:http://localhost:8001 訪問，界面長這樣：
- dbl deploy 命令會把資源進行打包壓縮，並且在當前目錄下生成build文件夾。到這里，你就可以愉快的把此目錄上傳到cdn上了。
項目地址：https://github.com/cc17/dbl
交流請加qq：375856344