用grunt搭建angularJS项目

写在前面：从小白一丁点grunt知识不懂，四处翻阅资料，总结的一篇很杂的知识，认真读完下面这大篇，希望能帮到你了解grunt、bowe

1 安装node

111

2 安装配置grunt

Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt。

2.1 安装grunt-cli

第一步安装的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意，Grunt-cli 只是一个命令行工具，用来执行，而不是 Grunt 这个工具本身。

安装 Grunt-cli 需要使用 NPM，使用下面一行即可在全局范围安装 Grunt-cli ，换句话说，就是你可以在任何地方执行 grunt 命令：

npm install -g grunt-cli （注：windows系统下请使用管理员权限打开）

要grunt命令执行，是需要当前目录中包括：

• package.json：是npm项目配置文件
• Gruntfile.js：是专门用来配置grunt的配置文件

2.2 初始化

这个 package.json 文件其实是 Node.js 来描述一个项目的文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据），JSON 格式。生成这个文件超级简单，推荐使用命令来生成 package.json ：

npm init

生成的文件内容如下：

{
 "name": "Demo",
 "version": "1.0.0",
 "description": "一个例子",
 "main": "index.js",
 "scripts": {
 "test": "echo "Error: no test specified" && exit 1"
 },s
 "author": "",
 "license": "ISC"
}

2.3 安装 grunt 

npm install grunt --save-dev 

表示通过 npm 安装了 grunt 到当前项目，同时加上了 —save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。不信你打开 package.json 文件看下，是不是多了

"devDependencies": {

"grunt": "^0.4.5"

} 

2.4 创建grunt配置文件

创建一个Grunt的配置文件  Gruntfile.js，内容如下：

module.exports = function(grunt) {
 grunt.initConfig({
 });
};

2.5 常用grunt插件的安装

2.5.1 安装goncat插件

concat插件用来将多个文件合并成一个文件。安装该插件的命令如下：

npm install grunt-contrib-concat --save-dev

安装成功后，可以看到package.json里面多了grunt-contrib-concat，接下来在 Gruntfile.js对该插件进行配置：

module.exports = function(grunt) {
 grunt.initConfig({
  //读取package.json文件
 pkg: grunt.file.readJSON('package.json'),
  //concat用来合并js文件
 concat: {
 options: {
  // 定义一个用于插入合并输出文件之间的字符
 separator: ';'
 },
 dist: {
  // 将要被合并的文件
 src: ['app/src/**/*.js'],
  // 合并后的JS文件的存放位置
 dest: 'app/dist/<%= pkg.name %>.js'
 }
 },
 });
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.registerTask('test', ['concat']);
};

 

接下来在 app/src/目录下创建两个js文件， a.js 和 b.js  。

在命令行执行 grunt test 之后，会发生在 app/dist/文件夹下多个一个Demo.js文件，该文件合并了 a.js和b.js 。

grunt test

2.5.2 安装uglify插件

uglify 插件用来对文件进行压缩。安装该插件的命令如下：

npm install grunt-contrib-uglify --save-dev

安装成功后，可以查看package.json里面是否多了grunt-contrib-uglify，接下来对 uglify进行配置。配置文件如下：

module.exports = function(grunt) {
 grunt.initConfig({
  //读取package.json文件
 pkg: grunt.file.readJSON('package.json'),
 //concat用来合并js文件
 concat: {
 options: {
 // 定义一个用于插入合并输出文件之间的字符
 separator: ';'
 },
 dist: {
  // 将要被合并的文件
 src: ['app/src/**/*.js'],
  // 合并后的JS文件的存放位置
 dest: 'app/dist/<%= pkg.name %>.js'
 }
 },
 //uglify用来压缩js文件
 uglify: {
 options: {
 // 此处定义的banner注释将插入到输出文件的顶部
 banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */n'
 },
 dist: {
 files: {
 //uglify会自动压缩concat任务中生成的文件
 'app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
 }
 }
 },
 });
 
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.registerTask('test', ['concat','uglify']);
};

在命令行执行   grunt test ，可以看到 app/dist文件下多了Demo.min.js，该文件对Demo.js进行了压缩。

2.5.3 安装jshint插件

jshint插件用来对js的代码规范进行检查。安装该插件的命令为

npm install grunt-contrib-jshint --save-dev

然后对jshint进行配置。配置文件如下（下面只贴部分代码，整体的配置文件在最后会给出）

 //jshint用来检查js代码规范
  jshint: { 
 files: ['Gruntfile.js', 'app/src/**/*.js'], //要进行js检查的文件
 options: {
 //这里是覆盖JSHint默认配置的选项
 globals: {
 jQuery: true,
 console: true,
 module: true,
 document: true
 }
 }
 }
 grunt.loadNpmTasks('grunt-contrib-jshint');
 grunt.registerTask('test', ['jshint']);

 

此时，输入 grunt test ， jshint便会对文件进行检查，并在控制台输出检查的结果

2.5.4 安装watch插件

watch用来监听文件，当文件发生变化时会执行tasks中指定的任务。安装该插件的命令为

npm install grunt-contrib-watch --save-dev

然后对该插件进行配置

 //watch用来监听文件，当文件发生变化时会执行tasks中指定的任务
  watch: {
  //监听的文件
 files: ['<%= jshint.files %>','app/index.html'],
 tasks: ['jshint']
 },
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.registerTask('test', ['watch']);

在命令行输入 grunt test之后，会发现watch启动，一直在监听文件的变化，当监听的文件发生变化时，会执行jshint命令来进行检查

2.5.5 安装wiredep插件

wiredep插件用来自动将bower_components中的包加入到index.html中 。安装该插件的命令为

npm install grunt-wiredep --save-dev

在配置文件中，对wiredep进行配置

 //watch用来监听文件，当文件发生变化时会执行tasks中指定的任务
  watch: {
  //监听的文件
 files: ['<%= jshint.files %>','app/index.html'],
 tasks: ['jshint']
 },
grunt.loadNpmTasks('grunt-wiredep');
grunt.registerTask('test', ['wiredep']);

对于该命令的测试，在使用bower安装AngualrJS和Bootstrap时进行

2.5.6 安装connect插件

connect插件可以让前端project开启connect服务，安装命令如下：

npm install grunt-contrib-connect --save-dev

在grunt配置文件中对connnect进行配置

//服务器连接服务
 connect: { 
 options: {
 port: 9000,
 hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名
 livereload: 35729 ,//声明给 watch 监听的端口
 keepalive:true, //保持连接
 },
 server: {
 options: {
 open: true, //自动打开网页 http://
 base: [
 ''  //主目录
 ]
 }
 }
 
 }
 grunt.loadNpmTasks('grunt-contrib-connect');
 grunt.registerTask('test', ['connect']);

通过grunt test 启动之后，会自动开启浏览器，打开app/index.html

2.5.7 完整的gruntfile.js

module.exports = function(grunt) {
 grunt.initConfig({
  //读取package.json文件
 pkg: grunt.file.readJSON('package.json'),
  //concat用来合并js文件
 concat: {
 options: {
 // 定义一个用于插入合并输出文件之间的字符
 separator: ';'
 },
 dist: {
  // 将要被合并的文件
 src: ['app/src/**/*.js'],
 // 合并后的JS文件的存放位置
 dest: 'app/dist/<%= pkg.name %>.js'
 }
 },
 //uglify用来压缩js文件
 uglify: {
 options: {
 // 此处定义的banner注释将插入到输出文件的顶部
 banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */n'
 },
 dist: {
 files: {
  //uglify会自动压缩concat任务中生成的文件
 'app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
 }
 }
 },
 //jshint用来检查js代码规范
 jshint: { 
 files: ['Gruntfile.js', 'app/src/**/*.js'], //要进行js检查的文件
 options: {
  //这里是覆盖JSHint默认配置的选项
 globals: {
 jQuery: true,
 console: true,
 module: true,
 document: true
 }
 }
 },
 //watch用来监听文件，当文件发生变化时会执行tasks中指定的任务
 watch: {
  //监听的文件
 files: ['<%= jshint.files %>','app/index.html'],
 tasks: ['jshint']
 },
 //wiredep自动将bower_components中的包加入到index.html中
 wiredep: {
 task: {
 src: ['app/index.html']
 }
 },
  //服务器连接服务
 connect: { 
 options: {
 port: 9000,
 hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名
 livereload: 35729 //声明给 watch 监听的端口
 },
 server: {
 options: {
 open: true, //自动打开网页 http://
 base: [
 'app' //主目录
 ]
 }
 }
 
 }
 });
 
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-jshint');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.loadNpmTasks('grunt-wiredep');
 grunt.loadNpmTasks('grunt-contrib-connect');
 grunt.registerTask('test', ['concat','connect','wiredep','uglify','jshint','watch']);
};

 

 

需要注意，因为使用 －g 命令会安装到全局，可能会涉及到系统敏感目录，如果用 Windows 的话，可能需要你用管理员权限。

2.6 gruntfile.js文件详解

2.6.1 任务配置和目标

当运行一个任务时，Grunt会自动查找配置对象中的同名属性。多任务（multi-task）可以通过任意命名的“目标（target）”来定义多个配置。在下面的案例中，concat任务有名为foo和bar两个目标，而uglify任务仅仅只有一个名为bar目标。

grunt.initConfig({ concat: { foo: { // concat task "foo" target options and files go here. }, bar: { // concat task "bar" target options and files go here. }, }, uglify: { bar: { // uglify task "bar" target options and files go here. }, }, });

同时指定任务（task）和目标（target），例如grunt concat:foo或者grunt concat:bar，将只会处理指定目标（target）的配置，而运行grunt concat将遍历所有目标（target）并依次处理。

2.6.2 options属性

在一个任务配置中，options属性可以用来指定覆盖内置属性的默认值。此外，每一个目标（target）中还可以拥有一个专门针对此目标（target）的options属性。目标（target）级的平options将会覆盖任务级的options。

options对象是可选的，如果不需要，可以忽略。

grunt.initConfig({ 
concat: { 
　　options: { 
　　// 这里是任务级的Options，覆盖默认值 
　　}, 
foo: { 
　　options: { 
　　// "foo" target options may go here, overriding task-level options. 
　　}, 
}, 
bar: { 
　　// No options specified; this target will use task-level options. 
　　}, 
}, 
});

2.6.3 文件

由于大多的任务都是执行文件操作，Grunt有一个强大的抽象层用于声明任务应该操作哪些文件。这里有好几种定义src-dest(源文件-目标文件)文件映射的方式，均提供了不同程度的描述和控制操作方式。任何一种多任务（multi-task）都能理解下面的格式，所以你只需要选择满足你需求的格式就行。

2.6.3.1 简洁格式

这种形式允许每个目标对应一个src-dest文件映射。通常情况下它用于只读任务，比如grunt-contrib-jshint，它就只需要一个单一的src属性，而不需要关联的dest选项. 这种格式还支给每个src-dest文件映射指定额外的属性。

 grunt.initConfig({ 
jshint: { 
    foo: { src: ['src/aa.js', 'src/aaa.js'] }, }, 
    concat: { 
        bar: {
        // 将要被合并的文件 
        src: ['src/bb.js', 'src/bbb.js'],
       // 合并后的JS文件的存放位置 
        dest: 'dest/b.js', 
                }, 
            }, 
});            

2.6.3.1.2 文件对象格式

这种形式支持每个目标对应多个src-dest形式的文件映射，属性名就是目标文件，源文件就是它的值(源文件列表则使用数组格式声明)。可以使用这种方式指定数个src-dest文件映射， 但是不能够给每个映射指定附加的属性。

grunt.initConfig({
  concat: {
    foo: {
      files: {
        'dest/a.js': ['src/aa.js', 'src/aaa.js'],
        'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
      },
    },
    bar: {
//对象
      files: {
        'dest/b.js': ['src/bb.js', 'src/bbb.js'],
        'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
      },
    },
  },
});

 

2.6.3.3 文件数组格式

这种形式支持每个目标对应多个src-dest文件映射，同时也允许每个映射拥有额外属性：

grunt.initConfig({
  concat: {
    foo: {
      files: [
        {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
        {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
      ],
    },
    bar: {
//数组
      files: [
        {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
        {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
      ],
    },
  },
});

 

2.6.4 通配符模式

通常分别指定所有源文件路径是不切实际的，因此Grunt通过内置支持node-glob 和 minimatch 库来匹配文件名(又叫作globbing)。

然这并不是一个综合的匹配模式方面的教程，你只需要知道如何在文件路径匹配过程中使用它们即可：

• * 匹配任意数量的字符，但不匹配 /
• ? 匹配单个字符，但不匹配 /
• ** 匹配任意数量的字符，包括 /，只要它是路径中唯一的一部分
• {} 允许使用一个逗号分割的“或”表达式列表
• ! 在模式的开头用于排除一个匹配模式所匹配的任何文件

每个人都需要知道的是：foo/*.js将匹配位于foo/目录下的所有的.js结尾的文件；而foo/**/*js将匹配foo/目录以及其子目录中所有以.js结尾的文件。

2.6.5 动态构建文件对象

当你希望处理大量的单个文件时，这里有一些附加的属性可以用来动态的构建一个文件列表。这些属性都可以用于Compact和Files Array文件映射格式。

expand 设置为true用于启用下面的选项：

• cwd 所有src指定的匹配都将相对于此处指定的路径（但不包括此路径） 。
• src 相对于cwd路径的匹配模式。
• dest 目标文件路径前缀。
• ext 对于生成的dest路径中所有实际存在文件，均使用这个属性值替换扩展名。
• extDot 用于指定标记扩展名的英文点号的所在位置。可以赋值 'first' （扩展名从文件名中的第一个英文点号开始） 或 'last' （扩展名从最后一个英文点号开始），默认值为 'first' [添加于 0.4.3 版本]
• flatten 从生成的dest路径中移除所有的路径部分。
• rename 对每个匹配的src文件调用这个函数(在重命名后缀和移除路径之后)。dest和匹配的src路径将被作为参数传入，此函数应该返回一个新的dest值。 如果相同的dest返回不止一次，那么，每个返回此值的src来源都将被添加到一个数组中作为源列表。

在下面的例子中，uglify 任务中的static_mappings和dynamic_mappings两个目标具有相同的src-dest文件映射列表, 这是因为任务运行时Grunt会自动展开dynamic_mappings文件对象为4个单独的静态src-dest文件映射--假设这4个文件能够找到。

可以指定任意静态src-dest和动态的src-dest文件映射相互结合。

grunt.initConfig({
  uglify: {
    static_mappings: {
      // Because these src-dest file mappings are manually specified, every
      // time a new file is added or removed, the Gruntfile has to be updated.
      files: [
        {src: 'lib/a.js', dest: 'build/a.min.js'},
        {src: 'lib/b.js', dest: 'build/b.min.js'},
        {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
        {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},
      ],
    },
    dynamic_mappings: {
      // Grunt will search for "**/*.js" under "lib/" when the "uglify" task
      // runs and build the appropriate src-dest file mappings then, so you
      // don't need to update the Gruntfile when files are added or removed.
      files: [
        {
          expand: true,     // Enable dynamic expansion.
          cwd: 'lib/',      //所有src指定的匹配都将相对于此处指定的路径（但不包括此路径） 。
          src: ['**/*.js'], // Actual pattern(s) to match.
          dest: 'build/',   // Destination path prefix.
          ext: '.min.js',   // 对于生成的dest路径中所有实际存在文件，均使用这个属性值替换扩展名
          extDot: 'first'   // 用于指定标记扩展名的英文点号的所在位置。可以赋值 'first' （扩展名从文件名中的第一//个英文点号开始） 或 'last' （扩展名从最后一个英文点号开始），默认值为 'first' [添加于 0.4.3 版本]
        },
      ],
    },
  },
});

 

2.6.6 模板

使用<% %>分隔符指定的模板会在任务从它们的配置中读取相应的数据时将自动扩展扫描。模板会被递归的展开，直到配置中不再存在遗留的模板相关的信息(与模板匹配的)。

整个配置对象决定了属性上下文(模板中的属性)。此外，在模板中使用grunt以及它的方法都是有效的，例如： <%= grunt.template.today('yyyy-mm-dd') %>。

<%= prop.subprop %> 将会自动展开配置信息中的prop.subprop的值，不管是什么类型。像这样的模板不仅可以用来引用字符串值，还可以引用数组或者其他对象类型的值。

<% %> 执行任意内联的JavaScript代码。对于控制流或者循环来说是非常有用的。

下面以concat任务配置为例，运行grunt concat:sample时将通过banner中的/* abcde */连同foo/*.js+bar/*.js+bar/*.js匹配的所有文件来生成一个名为build/abcde.js的文件。

grunt.initConfig({
  concat: {
    sample: {
      options: {
        banner: '/* <%= baz %> */n',   // '/*abcde*/n'
      },
      src: ['<%= qux %>', 'baz/*.js'],  // ['foo/*.js','bar/*.js','baz/*.js']
      dest: 'build/<%= baz %>.js',      //[build/abcde.js]
    },
  },
  //用于任务配置模板的任意属性
  foo: 'c',
  bar: 'b<%= foo %>d', //'bcd'
  baz: 'a<%= bar %>e', // 'abcde'
  qux: ['foo/*.js', 'bar/*.js'],
});

 

2.6.7 导入外部数据

在下面的Gruntfile中，项目的元数据是从package.json文件中导入到Grunt配置中的，并且grunt-contrib-uglify 插件中的 uglify 任务被配置用于压缩一个源文件以及使用该元数据动态的生成一个banner注释。

Grunt有grunt.file.readJSON和grunt.file.readYAML两个方法分别用于引入JSON和YAML数据。

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
    },
    dist: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'dist/<%= pkg.name %>.min.js'
    }
  }
});

 

3 安装配置bower

3.1 bower简介（Bower是什么，Bower的优点）

富客户端要求的前端开发，少不了大量的前端库文件引用，于是就可能遇到如下问题：

• 逐个下载、复制到期望位置嫌麻烦
• 库之间的依赖/版本依赖不清楚，总是出问题
• 版本升级时重复性的操作，还易搞错
• …

使用 bower 这样的包管理工具，可以很好的处理类似如上描述的问题。其实各种包管理工具的主要职责均类似如此。

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

节省时间。为什么要学习Bower的第一个原因，就是它会为你节省寻找客户端的依赖关系的时间。每次我需要安装jQuery的时候，我都需要去jQuery网站下载包或使用CDN版本。但是有了Bower，你只需要输入一个命令，jquery就会安装在本地计算机上，你不需要去记版本号之类的东西，你也可以通过Bower的info命令去查看任意库的信息。

脱机工作。Bower会在用户主目录下创建一个.bower的文件夹，这个文件夹会下载所有的资源、并安装一个软件包使它们可以离线使用。如果你熟悉Java，Bower即是一个类似于现在流行的Maven构建系统的.m2仓库。每次你下载任何资源库都将被安装在两个文件夹中 —— 一个在的应用程序文件夹，另一个在用户主目录下的.bower文件夹。因此，下一次你需要这个仓库时，就会用那个用户主目录下.bower中的版本。 可以很容易地展现客户端的依赖关系。你可以创建一个名为bower.json的文件，在这个文件里你可以指定所有客户端的依赖关系，任何时候你需要弄清楚你正在使用哪些库，你可以参考这个文件。

让升级变得简单。假设某个库的新版本发布了一个重要的安全修补程序，为了安装新版本，你只需要运行一个命令，bower会自动更新所有有关新版本的依赖关系。

3.2 前期准备

为了安装bower，你首先需要安装如下文件：

• Node：下载最新版本的node.js
• NPM：NPM是node程序包管理器。它是捆绑在nodejs的安装程序上的，所以一旦你已经安装了node，NPM也就安装好了。
• Git：你需要从git仓库获取一些代码包。

3.3 安装bower

一旦你已经安装了上面所说的所有必要文件，键入以下命令安装Bower：

$ npm install -g bower

3.4 bower命令

执行 bower help 命令，可以查看其所有命令及参数介绍：

cache: bower 缓存管理

help: 显示 Bower 命令的帮助信息

home: 通过浏览器打开一个包的 github 发布页

info: 查看包的信息（注：1、bower info 包名：这个命令可以查看一个包的所有版本(所以也能知道最新版本号)，并显示最新版本的包信息(bower.json)，并下载最新版本的包到本地缓存（如果之前没下载）。2、bower info 包名#版本号：查看包的某个版本的详细信息。）

init: 创建 bower.json 文件

install: 安装包到项目

link: 在本地 bower 库建立一个项目链接

list: 列出项目已安装的包

lookup: 根据包名查询包的 URL

prune: 删除项目无关的包

register: 注册一个包

search: 搜索包

update: 更新项目的包

uninstall: 删除项目的包（注：不支持一次卸载所有的包，只能手动全部删除。卸载包并不从缓存中删除，只是安装目录移除，下次安装会优先从本地缓存中复制安装。）

3.4.1 缓存

Bower在安装包的时候，会先下载包到本地缓存，然后再复制到安装位置。缓存位置默认：

Win：C:Users用户名AppDataLocalbowercachepackages

Linux：~/.bower/packages

浏览列表：

bower cace list [package...]

删除缓存

bower cache clean

删除除所有本地缓存

bower cache clean <package>#<version> 

删除除指定包的缓存，还可以指定版本。

3.5 初始化

bower init

通过问答向导的方式在当前目录生成一个bower.json文件。生成的文件如下：

{
 "name": "Demo",
 "description": "一个例子",
 "main": "index.js",
 "authors": [
 "geminiyu <geminiyu233@163.com>"
 ],
 "license": "ISC",
 "moduleType": [],
 "homepage": "",
 "ignore": [
 "**/.*",
 "node_modules",
 "bower_components",
 "test",
 "tests"
 ]
}

 

 

3.5.1 bower.json

作用：如果已经下载了很多必要的js，然后又不小心bower_components文件夹删了，或者说另一个项目也需要类似的配置，难道还要一个一个输入命令吗？为了方便我们还要再加一个bower.json配置文件，接下来删了app/bower_components下的所有内容，然后bower install，他会把bower.json中的dependencies重新下载

{
 "name":"", //必须，如果需要注册包，则该包名唯一。
 
 "description":"", //可选，包描述 
 
 "main":[], //可选，入口文件，bower本身不使用，供第三方构建工具会使用
 //每种文件类型只能有一个。
 
 "ignore":[], //可选，文件或目录列表。bower安装的时候将忽略该列表中的文件。
 //bower是从git仓库或压缩包下载一个包，里面的文件并不一定全部需要。
 
 "dependencies":[], //依赖包，name:value，value可以是包的semver 
 //range(版本号范围)，也可以直接是一个包的git地址或压缩包地址。
 
 "devDependencies":[], //开发依赖包，仅仅在开发过程中测试或者编译文档用，部署生产环境是不需要。
 //格式和dependencies 相同
 
 "resolutions":[], //包引用冲突自动使用该模块指定的包版本
 //格式和dependencies 相同
 
 "overrides" :[ //这个也很关键，可以覆盖一个包中的默认设置，比如main里面设定的入口文件
 "package-name":{ //这样可以根据需要，让第三方工具只打包需要的文件。
 "main":[]
 }
 ],
 
 "moduleType":"", //可选，指定包采用那种模块化方式(globals,amd,node,es6,yui)
 
 "private":Boolean, //是否公开发布当前包,如果只是使用bower来管理项目的包，设置为true.
 
 "license":"", //授权方式(GPL-3.0,CC-BY-4.0.....)
 
 "keywords":[], //可选，方便注册后容易被其他人搜索到。
 
 "authors":[], //作者列表
 
 "homepage":[], //主页，包介绍页
 
 "repository":{ //包所在仓库。
 "type": "git",
 "url": "git://github.com/foo/bar.git"
 },
｝

 

 

3.6 使用bower

bower install

安装当前目录下bower.json中的指定所有包。生产环境部署时建议使用 -p 或 --production参数，这种情况不会安装devDependencies。（devDependencies  里面的插件只用于开发环境，不用于生产环境，而 dependencies  是需要发布到生产环境的。）

bower install 包名 --save

安装指定的包。

• 如果使用参数 -S 或 --save 则安装完后，会把包名及版本号添加到bower.json的dependecies配置项数组中(方便以后重新安装)。
• 如果使用参数 -D 或 --save-dev 则安装完后，会把包名及版本号添加到bower.json的devDependecies配置项数组中。
• 如果不使用参数，则只安装包到bower_components目录，不修改bower.json文件。

3.7 例子：使用bower安装angularjs和bootstrap

使用bower安装AngularJS：

bower install angularjs --save grunt

安装成功后，在bower.json会看到读了 grunt 和 angularjs

 

 "dependencies": {
 "angular": "angularjs#~1.4.8",
 "grunt": "~0.4.5"
 }

 

然后在命令行运行grunt插件 wiredep ，该插件会自动将angularjs加入到index.html中。运行前的index.html内容如下：

 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>How to use Grunt Wirdep</title>
 <!-- bower:css -->
 <!-- endbower -->
</head>
<body>
 indexasdf123123
 <!-- bower:js -->
 <!-- endbower -->
</body>
</html>
运行后的index.htm如下：
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>How to use Grunt Wirdep</title>
 <!-- bower:css -->
 <!-- endbower -->
</head>
<body>
 indexasdf123123
 <!-- bower:js -->
 <script src="../bower_components/angular/angular.js"></script>
 <!-- endbower -->
</body>
</html>

 

 

接下来按相同的方式安装 bootstrap命令如下：

bower install bootstrap -save

在此运行 grunt命令后 ，发现 index.html内容为：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>How to use Grunt Wirdep</title>
 <!-- bower:css -->
 <!-- endbower -->
</head>
<body>
 indexasdf123123
 <!-- bower:js -->
 <script src="../bower_components/jquery/dist/jquery.js"></script>
 <script src="../bower_components/angular/angular.js"></script>
 <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
 <!-- endbower -->
</body>
</html>

 

 

bootstrap.js导入了，但bootstrap.css并未导入。不用担心，这是由 bootstrap的bower.json文件错误导致的，打开自己的bower.json文件，添加如下内容：

 "overrides": {
 "bootstrap": {
 "main": [
 "dist/js/bootstrap.js",
 "dist/css/bootstrap.css",
 "less/bootstrap.less"
 ]
 }
 }

 

重新运行 grunt 命令后，bootstrap.css被正确注入：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>How to use Grunt Wirdep</title>
 <!-- bower:css -->
 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
 <!-- endbower -->
</head>
<body>
 indexasdf123123
 <!-- bower:js -->
 <script src="../bower_components/jquery/dist/jquery.js"></script>
 <script src="../bower_components/angular/angular.js"></script>
 <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
 <!-- endbower -->
</body>
</html>

 

 

安装成功后，在对应的bower_components文件夹目录下会多出相应的文件夹，like this：

3.8 .bowerrc文件

好吧！你不喜欢使用它们的命名 bower_components，那么需要你在你需要的目录下创建一个文件“.bowerrc”并且写入如下信息。（注：如果你无法创建“.bowerrc”文件，可以试着先创建一个文件，然后在dos使用ren 创建的文件名 .bowerrc，将文件重命名）这个文件主要用来配置安装路径，如果不指定则默认安装到当前目录下的bower_components目录中。

{
 "directory": "app/bower_components"， //包安装位置
 "storage": {
 "packages" : "~/.bower/packages" //包本地缓存位置
 }
}