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

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

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

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

? 但這還不夠完美。

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

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

第一步：安裝nodejs

在Mac中，我們可以使用brew來安裝。在其它系統(tǒng)下，請使用相應(yīng)的工具或直接到官網(wǎng)下載。

brew install node

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

brew upgrade node

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

npm -v

接下來新建一個(gè)目錄grunt_bower，然后運(yùn)行npm init，根據(jù)提示，最后會產(chǎn)生一個(gè)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）安裝到全局環(huán)境中。安裝時(shí)可能需要使用sudo:

npm install -g grunt-cli

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

注意，安裝grunt-cli并不等于安裝了 Grunt！Grunt CLI的任務(wù)很簡單：調(diào)用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，允許你在同一個(gè)系統(tǒng)上同時(shí)安裝多個(gè)版本的 Grunt。

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

{"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" }

下面，我們需要一個(gè)gruntfile，gruntfile中定義了package的功能，并且可以自定義一些任務(wù)來管理我們Javascript代碼。通過執(zhí)行下面命令生成一個(gè)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來幫我們運(yùn)行，管理我們的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'] }

接下來就是我們見證奇跡的時(shí)刻：

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

我們就可以看到angular和JQuery已經(jīng)被下載到本地。同時(shí)bower.json中多了兩個(gè)依賴：

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

而且，我們的目錄里，兩個(gè)版本的js文件也被下載到了本地。如果你覺得現(xiàn)在已經(jīng)大功告成了，那么你就錯(cuò)了，bower只負(fù)責(zé)把依賴下載到本地的?bower_components?目錄，并不負(fù)責(zé)把它們拷貝到我們項(xiàng)目中實(shí)際使用的地方，比如?public/js/lib?目錄下。

為了實(shí)現(xiàn)這樣的功能，我們還需要另一個(gè)package的幫助：

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

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

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

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

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

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

grunt bower

最后

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

再次感謝大家讀到這里。

?

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/Alex--Yang/p/4217577.html

總結(jié)

以上是生活随笔為你收集整理的Grunt + Bower—前端构建利器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。