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

在Windows中，咱们能够到官网下载安装包：https://nodejs.org/dist/v4.4.7/node-v4.4.7-x64.msi

在Mac中，咱们可使用brew来安装。

brew install node

Nodejs可让咱们在服务器端使用javascript编程，它是不少js工具的基础。请确保它是最新的：

brew upgrade node

Npm是node官方提供的包依赖管理工具。咱们下面使用的Grunt，Bower等，都是以插件形式下载安装的。当咱们安装好nodejs后， npm 就自动可用了。查看版本：

npm -v

接下来新建一个目录cos-form，而后运行npm init，根据提示，最后会产生一个package.json以下：

{
  "name": "cos-form",
  "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": "cos-form",
  "version": "1.0.0",
  "description": "This is for grunt and bower",
  "main": "index.js",
  "engines": {
    "node": ">= 0.10.0"
  },

  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-bower-task": "^0.4.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-jshint": "^1.0.0",
    "grunt-contrib-qunit": "^1.2.0",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-contrib-watch": "^1.0.0"
  }
}

下面，咱们须要一个gruntfile，gruntfile中定义了插件的功能，而且能够自定义一些任务来管理咱们Javascript代码。经过执行下面命令生成一个gruntfile：

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

接下来只须要把全部package.json中的插件经过npm装在本目录，咱们就可使用Grunt来帮咱们运行，管理咱们的Javascript代码了。

第三步：安装Bower

Bower跟npm在某种意义上类似，它是用来管理经常使用的js库的依赖的，好比jquery, underscore, angularjs等。一样咱们能够经过npm安装它：

npm install bower -g

一样，Bower也有本身的配置文件bower.json

{
  "name": "cos-form",
  "version": "1.0.0",
  "authors": [
    "shencq <shencq@g-soft.com.cn>"
  ],
  "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

最后

有了这样两大利器，咱们已经达到了从管理依赖，编译部署，压缩打包，运行测试的全部功能，而且很是清晰的配置，让项目上的人都拥有同一份配置，这种方式，大大的简化了团体的管理效率和维护成本，很是值得推崇！

再次感谢你们读到这里。