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