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

来源：互联网发布：中日韩影响力知乎编辑：程序博客网时间：2024/05/22 07:53

第一步：

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 -ggit clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfilegrunt -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

0 0