Grunt + Bower—前端構建利器(轉)

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

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

  可是對於前段Javascript和CSS而言，不多有工具能夠作到前面所述功能的集合。那麼咱們怎麼樣才能達到前面所說的說有功能呢？——Grunt + Bower

  Grunt號稱本身是JavaScript世界的構建工具，它提供了強大的自動化功能。對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具能夠減輕咱們的勞動。Grunt一樣擁有強大的插件系統，你所須要的大多數task都已經做爲Grunt插件被開發了出來，而且天天都有更多的插件誕生。

  但這還不夠完美。

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

  在javascript的世界裏，不少東西都是由社區提供的，因此每一種工具都至關獨立。好比，工具都有着本身獨立的配置文件，本身的命令行參數，有時候還須要有一些額外的插件把兩個工具結合起來。因此下面將會有不少命令，咱們須要一一瞭解。不過好在咱們瞭解以後，下次就可使用已經配置好的文件，經過幾條命令將把有的東西都準備好，很方便。

第一步：安裝nodejs

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

brew install node

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

brew upgrade node

Npm是node官方提供的包依賴管理工具。咱們下面使用的Grunt，Bower等，都是以插件形式下載安裝的。當咱們安裝好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經常使用的插件，好比 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中定義了插件的功能，而且能夠自定義一些任務來管理咱們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中的插件經過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 目錄下。

爲了實現這樣的功能，咱們還須要另外一個插件的幫助：

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

最後

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

再次感謝你們讀到這裏。