# 未完待续 http://div.io/topic/1332 思索：我们使用bower下载了3个库，每次下载后，都需要将其引入到index.html中。这导致，我们重复了3次大概相同的操作。是不是可以有一种方法，而使用这个方法，我们只需要一个加入简单的几行代码呢？ JS的大牛们何尝没有看到这一点。有一个工具，叫做grunt。是的，就是我常说的那个牛头。 下面，让我们共同来体现下grunt自动处理的神奇。 # 安装grunt-cli grunt-cli是一个grunt的控制台。打个比喻，grunt如果是mysql的话,grunt-cli就是navicat. 要想使用grunt，grunt-cli是必不可少的。 `npm install grunt-cli -g` > MAC下可能需要输入: `sudo npm install grunt-cli -g` # grunt初始化 和bower相同的是，grunt也需要一个配置文件。 和angularjs相同的是：grunt只是一个主要的程序，这个程序还有很多个插件，比如我们即将使用的grunt-bower-concat。grunt与grunt-wiredep的关系 和 angularjs与angular-route的关系是相同的。 所以，我们可以这样理解：grunt和grunt-bower-concat和bower都是npm管理的软件。 bower是一个包管理器，它管理了bootstrap,angularjs,angular-route. npm也是一个包管理器，它管理了bower, grunt, grunt-bower-concat，http-server。 那么：当我们需要使用angularjs、angular-route时，需要配置bower;当我们需要使用grunt、grunt-bower-concat的时候，我们需要配置的npm。 ## 配置npm. 关于npm的命令，我们可以使用`npm --help`来查看。 我们使用`npm init`来创建一个npm的配置文件。 ~~~ name: (angularjs) version: (1.0.0) description: the guide of angularjs entry point: (app.moudle.js) test command: git repository: (https://github.com/yunzhiclub/angularjsguide.git) keywords: yunzhiclub angularjs guide author: panjie@yunzhiclub.com license: (ISC) ... ~~~ 查看生成的文件 `package.json` ~~~ { "name": "angularjs", "version": "1.0.0", "description": "the guide of angularjs ", "main": "app.moudle.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/yunzhiclub/angularjsguide.git" }, "keywords": [ "yunzhiclub", "angularjs", "guide" ], "author": "panjie@yunzhiclub.com", "license": "ISC", "bugs": { "url": "https://github.com/yunzhiclub/angularjsguide/issues" }, "homepage": "https://github.com/yunzhiclub/angularjsguide#readme" } ~~~ > sublime还需要配置一下文件格式哟。ctrl+shif+p -> grunt json ## 添加grunt 配置完npm后，我们将grunt添加到npm的配置文件中。说明，我们需要在这个项目中使用grunt. 在上一节中，我们是手工的加入了依赖的代码。在这，我们使用一个`--save-dev`参数来实现这个目标： `npm install grunt --save-dev` 安装完毕后，我们可以使用`grunt --version`来查看版本信息。 ~~~ panjiedeMacBook-Pro:angularjs panjie$ grunt --version grunt-cli v1.2.0 grunt v1.0.1 ~~~ 此时，在package.json文件中，还增加了以下几行代码： ~~~ "devDependencies": { "grunt": "^1.0.1" } ~~~ 我们说，这样有什么好处呢？好处之一就是：我在本地的开发环境，依赖的插件，都可以通过这一个文件传递给团队的其它成员了。 如果没有这个文件，真的想不出我们可以使用什么方法来保障团队开发工具的一致性。 ## 添加grunt-bower-concat grunt-bower-concat可以实现自动为我们添加JS,CSS的引用。下面，我们来添加这个软件。 `npm install grunt-bower-concat --save-dev` # 使用grunt-wiredep 和运行bower npm一样，我们的grunt也需要一个配置文件 -- Gruntfile.js。但我并没有找到初始化这个文件的命令，所以只好手动建立一个了。 和前面一样，建立后，我们更改下这个文件的格式，让sublime来自动为我们查找拼写方面的错误。  ## Gruntfile.js 简单说下 Gruntfilejs 它由以下几部分构成： "wrapper" 函数 项目与任务配置 加载grunt插件和任务 自定义任务 ### "wrapper" 函数 wrapper我们在HTML\CSS的学习中应该已经接触过了，如果非要译成中文，可以译为：包装，容器的意思。 每一份 Gruntfile （和grunt插件）都遵循同样的格式，你所书写的Grunt代码必须放在此函数内： 它的格式是这样： ~~~ module.exports = function(grunt) { } ~~~ 上面定义了一个`grunt`的wrapper，所有关于grunt的配置，需要写在这个函数中. ### 项目和任务配置 大部分的Grunt任务都依赖某些配置数据，这些数据被定义在一个object中，并传递给grunt.initConfig方法。