runt + 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 下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
{ "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