Grunt + Bower—前端構建利器

? 目前比較流行的WEB開發的趨勢是前后端分離。前端采用重量級的Javascript框架，比如Angular，Ember等，后端采用restful API的Web Service服務，通過JSON格式進行數據交互。

? 對于后端服務語言來說，不論是Ruby的rake，Java中的Maven或Gradle，或是Scala中的SBT，他們都能夠提供編譯運行、運行測試、打包部署、依賴管理等功能。再加上強大的package系統，讓它可以插拔式的使用很多強大的功能，像數據遷移工具(liquibase)，測試覆蓋率package以及一些代碼樣式檢查的工具。

? 但是對于前段Javascript和CSS而言，很少有工具可以做到前面所述功能的集合。那么我們怎么樣才能達到前面所說的說有功能呢？——Grunt + Bower

? Grunt號稱自己是JavaScript世界的構建工具，它提供了強大的自動化功能。對于需要反復重復的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具可以減輕我們的勞動。Grunt同樣擁有強大的package系統，你所需要的大多數task都已經作為Gruntpackage被開發了出來，并且每天都有更多的package誕生。

? 但這還不夠完美。

? 我們知道，在JavaScript開發當中，我們經常需要引入大量的開源工具。不可避免的會遇到不同版本之間的兼容性問題，例如Bootstrap所依賴的JQuery不是1.10，而是2.03。如果你正在做JS版本升級，那么我想你一定會到各個網站上把他們最新的包下載下來，然后小心翼翼的替換它的版本。但是這些功能在Gradle和其他后端的版本管理工具里已經不再是問題。Bower的出現，完美的解決了這一難題。

??在javascript的世界里，很多東西都是由社區提供的，所以每一種工具都相當獨立。比如，工具都有著自己獨立的配置文件，自己的命令行參數，有時候還需要有一些額外的package把兩個工具結合起來。所以下面將會有很多命令，我們需要一一了解。不過好在我們了解之后，下次就可以使用已經配置好的文件，通過幾條命令將把有的東西都準備好，很方便。

第一步：安裝nodejs

在Mac中，我們可以使用brew來安裝。在其它系統下，請使用相應的工具或直接到官網下載。

brew install node

Nodejs可以讓我們在服務器端使用javascript編程，它是很多js工具的基礎。請確保它是最新的：

brew upgrade node

Npm是node官方提供的包依賴管理工具。我們下面使用的Grunt，Bower等，都是以package形式下載安裝的。當我們安裝好nodejs后，?npm?就自動可用了。查看版本：

npm -v

接下來新建一個目錄grunt_bower，然后運行npm init，根據提示，最后會產生一個package.json如下：

{"name": "grunt_bower","version": "1.0.0","description": "This is for grunt and bower","main": "index.js",  "repository": {"type": "git","url": "https://github.com/yeahyangliu/grunt_bower.git"}
}

第二步：安裝Grunt

你需要先將Grunt命令行（CLI）安裝到全局環境中。安裝時可能需要使用sudo:

npm install -g grunt-cli

上述命令執行完后，grunt?命令就被加入到你的系統路徑中了，以后就可以在任何目錄下執行此命令了。

注意，安裝grunt-cli并不等于安裝了 Grunt！Grunt CLI的任務很簡單：調用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，允許你在同一個系統上同時安裝多個版本的 Grunt。

在Grunt項目里一般需要在你的項目中添加兩份文件：package.json?和?Gruntfile。其中package.json中里面已經包含了一些Grunt常用的package，比如?grunt-contrib-jshint?等，我們可根據需要刪減一些用不上的。那么現在我們的文件應該長成這樣：

{"name": "grunt_bower","version": "1.0.0","description": "This is for grunt and bower","main": "index.js","engines": {"node": ">= 0.10.0"},"devDependencies": {"grunt": "~0.4.5","grunt-contrib-jshint": "~0.10.0","grunt-contrib-watch": "~0.6.1","grunt-contrib-qunit": "~0.5.2","grunt-contrib-concat": "~0.4.0","grunt-contrib-uglify": "~0.5.0"}"repository": {"type": "git","url": "https://github.com/yeahyangliu/grunt_bower.git"},"author": "Yang Liu"  
}

下面，我們需要一個gruntfile，gruntfile中定義了package的功能，并且可以自定義一些任務來管理我們Javascript代碼。通過執行下面命令生成一個gruntfile：

npm install grunt-init -g
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile

接下來只需要把所有package.json中的package通過npm裝在本目錄，我們就可以使用Grunt來幫我們運行，管理我們的Javascript代碼了。

第三步：安裝Bower

Bower跟npm在某種意義上相似，它是用來管理常用的js庫的依賴的，比如jquery, underscore, angularjs等。同樣我們可以通過npm安裝它：

npm install bower -g

同樣，Bower也有自己的配置文件bower.json

{name: 'grunt_bower',version: '0.0.0',authors: ['YANG Liu <yeah_yangliu@163.com>'],license: 'MIT',ignore: ['**/.*','node_modules','bower_components','test','tests']
}

接下來就是我們見證奇跡的時刻：

bower install angularjs --save
bower insall jquery --save

我們就可以看到angular和JQuery已經被下載到本地。同時bower.json中多了兩個依賴：

"dependencies": {  "angularjs": "~1.2.20",  "jquery": "~2.1.1"
}        

而且，我們的目錄里，兩個版本的js文件也被下載到了本地。如果你覺得現在已經大功告成了，那么你就錯了，bower只負責把依賴下載到本地的?bower_components?目錄，并不負責把它們拷貝到我們項目中實際使用的地方，比如?public/js/lib?目錄下。

為了實現這樣的功能，我們還需要另一個package的幫助：

npm install grunt-bower-task --save-dev

然后打開其文檔，按照上面的提示進行配置。首先在?Gruntfile?中合適位置添加：

grunt.loadNpmTasks('grunt-bower-task');

然后在?grunt.initConfig({...})?參數中，添加相應的配置項，把bower下載的js庫拷貝到?public/js/lib?下：

{"bower": {   "install": { "options": {"targetDir": "./public/js/lib","layout": "byComponent","install": true,"verbose": false,"cleanTargetDir": false}}}
}

最后我們只需要運行一行簡單的命令，就可以講grunt和bower完美結合起來：

grunt bower

最后

有了這樣兩大利器，我們已經達到了從管理依賴，編譯部署，壓縮打包，運行測試的所有功能，并且非常清晰的配置，讓項目上的人都擁有同一份配置，這種方式，大大的簡化了團體的管理效率和維護成本，非常值得推崇！

再次感謝大家讀到這里。

?

本文github地址:https://github.com/yeahyangliu/grunt_bower.git

?