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

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

? 但是對(duì)于前段Javascript和CSS而言，很少有工具可以做到前面所述功能的集合。那么我們?cè)趺礃硬拍苓_(dá)到前面所說(shuō)的說(shuō)有功能呢？——Grunt + Bower

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

? 但這還不夠完美。

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

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

第一步：安裝nodejs

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

brew install node

Nodejs可以讓我們?cè)诜?wù)器端使用javascript編程，它是很多js工具的基礎(chǔ)。請(qǐng)確保它是最新的：

brew upgrade node

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

npm -v

接下來(lái)新建一個(gè)目錄grunt_bower，然后運(yùn)行npm init，根據(jù)提示，最后會(huì)產(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ù)很簡(jiǎn)單：調(diào)用與Gruntfile在同一目錄中 Grunt。這樣帶來(lái)的好處是，允許你在同一個(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)該長(zhǎ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ù)來(lái)管理我們Javascript代碼。通過(guò)執(zhí)行下面命令生成一個(gè)gruntfile：

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

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

第三步：安裝Bower

Bower跟npm在某種意義上相似，它是用來(lái)管理常用的js庫(kù)的依賴的，比如jquery, underscore, angularjs等。同樣我們可以通過(guò)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'] }

接下來(lái)就是我們見證奇跡的時(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庫(kù)拷貝到?public/js/lib?下：

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

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

grunt bower

最后

有了這樣兩大利器，我們已經(jīng)達(dá)到了從管理依賴，編譯部署，壓縮打包，運(yùn)行測(cè)試的所有功能，并且非常清晰的配置，讓項(xiàng)目上的人都擁有同一份配置，這種方式，大大的簡(jiǎn)化了團(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—前端构建利器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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