2016-04-19

Grunt 和 Bower 自动化管理项目依赖库

bower

初探 Grunt 自动化构建工具中已经简单的介绍 Grunt 的使用,其中也提到了 Bower。其实 Bower 和 npm 从某种意义上来说很相似,Bower 可以用来管理常用的 JS 库,比如:jQuery、Backbone 等等。

全局安装 Bower :npm install bower -g
初始化 Bower :bower init
更新某个库 :bower update jquery
搜索关键词 :bower search jquery
查看 Bower 当前的版本 :bower -v

初始化 Bower 可以根据提示创建 bower.json 配置文件,类似于 npm init 生成的 package.json 配置文件。

Bower 安装成功后,通过它下载项目中所需要的 JS 库

  1. bower install jquery --save
  2. bower install backbone --save

之后你会发现在项目的根目录下生成了一个名为 bower_components 的文件夹,这里存放的是通过 Bower 下载下来的 JS 项目库。细心的你肯定会发现,它还会识别 JS 库之间的依赖关系,当你下载 Backbone 的时候 Bower 会自动帮你下载好 underscore。

通过 Bower 下载的 JS 库都是整个项目的,而我们其实只需要这个项目的 1-2 个 JS 文件即可,要实现自动化就不能人工去查找提取,所以就有了 grunt-bower-task

通过 npm 安装 grunt-bower-task

安装 grunt-bower-task :npm install grunt-bower-task --save-dev

之后需要在 Gruntfile.js 配置 grunt-bower-task 达到自动提取 JS 库文件到指定目录下的目的。

  1. module.exports = function (grunt) {
  2.   // 项目配置
  3.   grunt.initConfig({
  4.     //bower
  5.     bower:{
  6.       install:{
  7.         options:{
  8.           targetDir: './assets', //cmd 运行 grunt 或 grunt bower 时,会将JS项目库文件提取到指定的目录下
  9.           layout: 'byComponent'  //设置 byType 或 byComponent 会改变目录结构
  10.         }
  11.       }
  12.     }
  13.   });
  14.   //加载插件
  15.   grunt.loadNpmTasks('grunt-bower-task');
  16.  
  17.   //默认执行任务(数组中依次执行默认任务)
  18.   grunt.registerTask('default', ['bower:install']);
  19. };

当在 cmd 下运行 grunt 或 grunt bower 时,会将JS项目库文件提取到指定的目录下。在这之前你还需要配置一下 bower.json 文件,明确需要提取哪些文件和要将提取出来的文件放到哪里。

设置 layout 的 Value:byType 或 byComponent 会改变目录结构,grunt-bower-task 的相关配置请参考:点这里

  1. {
  2.   "exportsOverride": {
  3.     "bootstrap": {
  4.       "js": "js/*.js",
  5.       "css": "dist/css/*.css",
  6.       "fonts": "dist/fonts/*.*"
  7.     },
  8.     "backbone": {
  9.       "js": "*min.js"
  10.     },
  11.     "underscore": {
  12.       "js": "*min.js"
  13.     },
  14.     "jquery": {
  15.       "js": "dist/jquery.min.js"
  16.     }
  17.   }
  18. }

如何删除 npm 和 Bower 下载安装的模块?

npm :npm uninstall grunt-bower-task
Bower :bower uninstall jquery

如果你要删除 underscore 它还会提示你:它与 Backbone 之间是有依赖关系的,是否继续删除?这样会避免一些有依赖关系的库误删的情况。