IT技术

Grunt + Bower—前端构建利器

目前比较流行的WEB开发的趋势是前后端分离。前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行数据交互。

对于后端服务语言来说,不论是Ruby的rake,Java中的Maven或Gradle,或是Scala中的SBT,他们都能够提供编译运行、运行测 试、打包部署、依赖管理等功能。再加上强大的package系统,让它可以插拔式的使用很多强大的功能,像数据迁移工具(liquibase),测试覆盖 率package以及一些代码样式检查的工具。

但是对于前段Javascript和CSS而言,很少有工具可以做到前面所述功能的集合。那么我们怎么样才能达到前面所说的说有功能呢?——Grunt + Bower

Grunt号称自己是 JavaScript世界的构建工具,它提供了强大的自动化功能。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、 linting等,自动化工具可以减轻我们的劳动。Grunt同样拥有强大的package系统,你所需要的大多数task都已经作为 Gruntpackage被开发了出来,并且每天都有更多的package诞生。

但这还不够完美。

我们知道,在JavaScript开发当中,我们经常需要引入大量的开源工具。不可避免的会遇到不同版本之间的兼容性问题,例如Bootstrap所依赖 的JQuery不是1.10,而是2.03。如果你正在做JS版本升级,那么我想你一定会到各个网站上把他们最新的包下载下来,然后小心翼翼的替换它的版 本。但是这些功能在Gradle和其他后端的版本管理工具里已经不再是问题。Bower的出现,完美的解决了这一难题。

在javascript的世界里,很多东西都是由社区提供的,所以每一种工具都相当独立。比如,工具都有着自己独立的配置文件,自己的命令行参 数,有时候还需要有一些额外的package把两个工具结合起来。所以下面将会有很多命令,我们需要一一了解。不过好在我们了解之后,下次就可以使用已经 配置好的文件,通过几条命令将把有的东西都准备好,很方便。

第一步:安装nodejs

在Mac中,我们可以使用brew来安装。在其它系统下,请使用相应的工具或直接到官网下载。

brew install node

Nodejs可以让我们在服务器端使用javascript编程,它是很多js工具的基础。请确保它是最新的:

brew upgrade node

Npm是node官方提供的包依赖管理工具。我们下面使用的Grunt,Bower等,都是以package形式下载安装的。当我们安装好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常用的package,比如 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中定义了package的功能,并且可以自定义一些任务来管理我们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中的package通过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 目录下。

为了实现这样的功能,我们还需要另一个package的帮助:

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完美结合起来:

最后

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

http://www.cnblogs.com/Alex–Yang/p/4217577.html

发表评论