目前比較流行的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