首页 > 代码库 > 使用Yeoman，Grunt和Bower开发AngularJS（译）

使用Yeoman，Grunt和Bower开发AngularJS（译）

2024-07-06 06:50:40   217人阅读

  • 使用Yeoman产生AngularJS的主要骨架
  • 使用Grunt加速开发和帮助执行
  • 使用Bower来加入第三方插件和框架——third party plugins/frameworks

一、准备工作

安装好NodeJS和NPM（读者可自己去google）

二、安装Yeoman, Grunt and Bower，产生AngularJS的主要骨架

2.1 新建一个目录，并进入该目录，执行

npm install -g yo grunt-cli bower

此时Yeoman,grunt和Bower就被一次性安装好了，说明： -g  表明是全局安装

2.2 执行

npm install -g generator-angular
安装AngularJS generator
yo angular 
产生AngularJS application的文件框架脚手架（scaffolding）


此时你的目录中就已经有了一个静态的AngularJS App的基本框架文件了
  • package.json —— 管理工程的所有dependencies
  • Gruntfile.js —— 配置工程所需要的task和plugins
  • component.json —— 将你工程所用的dependencies通知Bower package manager，在最新的Bower版本中命名为bower.json
  • .bowerrc —— 将你工程所用的配置选项通知Bower
  • test —— 使用的是Karma测试

打开.bowerrc文件，并加入——告诉Bower按bower.json的定义安装package

{
      "directory": "app/components",
      "json": "bower.json" // Add this line
  }

使用bower安装Angular UI—— 可按照你的需要安装那个library

bower install angular-bootstrap --save
说明：
  • --save表明将该library加入bower.json配置文件中
  • 在我的操作中，如何修改了.bowerrc,该步骤就会出错，可能是旧版本才必须修改吧？？？？？？
  • 如果出现 Bower : ENOGIT git is not installed or not in the PATH错误，则需要配置你的Git到path，具体如下

  • 假如你的git安装目录是"C:\Program Files (x86)\Git"，在path中加入git的bin和cmd目录，如C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

二、修改AngularJS，开发App

 2.1 打开App目录

  

其中bower_components中就是bower.json中设置的需要安装的模块

2.2 执行

grunt serve

Grunt会自动执行Javascript，包括自动编译coffeescript、压缩minifying css、编译SASS为css、代码验证等等。

说明： 到这一步我总是出错： Grunt  Fatal error: listen EACCES，继续研究中。。。

2.3 测试

grunt test

参考：http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/


联系
我们