|
目前比較流行的WEB開發(fā)的趨勢(shì)是前后端分離。前端采用重量級(jí)的Javascript框架，比如Angular，Ember等，后端采用restful API的Web Service服務(wù)，通過JSON格式進(jìn)行數(shù)據(jù)交互。 對(duì)于后端服務(wù)語言來說，不論是Ruby的rack，Java中的Maven或Gradle，或是Scala中的SBT，他們都能夠提供編譯運(yùn)行、運(yùn)行測(cè)試、打包部署、依賴管理等功能。再加上強(qiáng)大的插件系統(tǒng)，讓它可以插拔式的使用很多強(qiáng)大的功能，像數(shù)據(jù)遷移工具(liquibase)，測(cè)試覆蓋率插件以及一些代碼樣式檢查的工具。 但是對(duì)于前段Javascript和CSS而言，很少有工具可以做到前面所述功能的集合。那么我們?cè)趺礃硬拍苓_(dá)到前面所說的說有功能呢？——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)大的插件系統(tǒng)，你所需要的大多數(shù)task都已經(jīng)作為Grunt插件被開發(fā)了出來，并且每天都有更多的插件誕生。 但這還不夠完美。 我們知道，在JavaScript開發(fā)當(dāng)中，我們經(jīng)常需要引入大量的開源工具。不可避免的會(huì)遇到不同版本之間的兼容性問題，例如Bootstrap所依賴的JQuery不是1.10，而是2.03。如果你正在做JS版本升級(jí)，那么我想你一定會(huì)到各個(gè)網(wǎng)站上把他們最新的包下載下來，然后小心翼翼的替換它的版本。但是這些功能在Gradle和其他后端的版本管理工具里已經(jīng)不再是問題。Bower的出現(xiàn)，完美的解決了這一難題。 在javascript的世界里，很多東西都是由社區(qū)提供的，所以每一種工具都相當(dāng)獨(dú)立。比如，工具都有著自己獨(dú)立的配置文件，自己的命令行參數(shù)，有時(shí)候還需要有一些額外的插件把兩個(gè)工具結(jié)合起來。所以下面將會(huì)有很多命令，我們需要一一了解。不過好在我們了解之后，下次就可以使用已經(jīng)配置好的文件，通過幾條命令將把有的東西都準(zhǔn)備好，很方便。 第一步：安裝nodejs在Mac中，我們可以使用brew來安裝。在其它系統(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等，都是以插件形式下載安裝的。當(dāng)我們安裝好nodejs后， npm 就自動(dòng)可用了。查看版本： npm -v 接下來新建一個(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項(xiàng)目里一般需要在你的項(xià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中定義了插件的功能，并且可以自定義一些任務(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中的插件通過npm裝在本目錄，我們就可以使用Grunt來幫我們運(yùn)行，管理我們的Javascript代碼了。 第三步：安裝BowerBower跟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 我們就可以看到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è)插件的幫助： 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 下：
最后我們只需要運(yùn)行一行簡單的命令，就可以講grunt和bower完美結(jié)合起來： grunt bower 最后有了這樣兩大利器，我們已經(jīng)達(dá)到了從管理依賴，編譯部署，壓縮打包，運(yùn)行測(cè)試的所有功能，并且非常清晰的配置，讓項(xiàng)目上的人都擁有同一份配置，這種方式，大大的簡化了團(tuán)體的管理效率和維護(hù)成本，非常值得推崇！ 再次感謝大家讀到這里。
本文github地址:https://github.com/yeahyangliu/grunt_bower.git
|
|
|
