前端构建利器：AngularJS + Bower + Grunt

第一步：

1.1 安装nodejs

brew install node

1.2 更新

brew upgrade node

1.3 查看版本信息

npm -v

1.4 生成一个新的pakage.json文件

npm init

第二步

2.1 安装Grunt

npm install -g grunt-cli

注意，安装到全局变量中可能需要sudo命令

2.2 生成gruntfile

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

第三步：

3.1 安装Bower

npm install bower -g

3.2 安装angularJS

bower install angularjs --save

bower只负责把依赖下载到本地的 bower_components 目录，并不负责把它们拷贝到我们项目中实际使用的地方，比如 public/js/lib 目录下。

为了实现这样的功能，我们还需要另一个插件的帮助。

3.3 安装插件

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

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

原文链接：http://doc.okbase.net/Alex–Yang/archive/123625.html