Windows下Yeoman+Grunt+Bower快速搭建AngularJS开发环境

1.下载最新版NodeJS 官方链接

注：Windows Installer默认nodejs的安装路径为C:\Program Files\nodejs，npm的缓存目录在C:\Users\用户\AppData\Roaming\npm-cache，npm全局包安装在C:\Program Files\nodejs\node_modules

如需修改默认路径，以便灵活管理，参照如下步骤：

a) 以管理员身份运行cmd，运行：

npm config set prefix "C:\Program Files\nodejs\npm-global" (全局包安装路径)

npm config set cache "C:\Program Files\nodejs\npm-cache” (npm包缓存路径)

b) 添加系统环境变量NODE_PATH,值为"C:\Program Files\nodejs\npm-global"  (npm全局包安装路径)

2.安装bower,grunt-cli,yo

以管理员身份运行cmd，查看node,npm版本以检查是否安装成功:

node -v
npm -v

目前，node稳定的版本是0.10.x ，自带的npm版本是1.4.x，需要升级npm，否则后面的安装过程可能会报错，步骤如下：

a) 运行npm install -g npm@next     (next表示最新的稳定版本，也可以@指定版本号，推荐@next) 

b) 删除C:\Program Files\nodejs目录下的npm和npm.cmd文件 (否则系统会根据环境变量优先选择原来的npm)

c) 再次运行 npm -v  查看npm版本，以确认是否安装成功

接下来开始安装bower,grunt-cli,yo 步骤如下：

npm install -g bower grunt-cli yo

如果中途报错或速度很慢，请尝试以下方法：

a) 添加--registry参数，用国内的npm镜像下载

npm install -g bower grunt-cli yo --registy=https://registry.npm.taobao.org

b) 使用代理

npm config set proxy http://server:port
npm install -g bower grunt-cli yo

c) 使用上述两种方法之前需先清除npm缓存，否则可能报错

npm cache clean

由于bower包管理工具需要用到git,，没有安装 git 的请自行安装，否则会报错 Windows的链接

接下来安装yeoman的angular脚手架文件：

npm install -g generator-angular

然后新建一个工程文件的目录，运行以下命令就可以搭好整个AngularJS的开发环境了

mkdir workspace
cd workspace
yo angular

安装过程中会提示项目是否使用Sass，Bootstrap以及一些angularjs的扩展，按照提示选择即可，如果一次性未能安装成功，再手动运行

bower install

安装配置成功后，可以看到整个工程的目录如下：

运行以下命令就可以在浏览器中查看网站效果了，grunt会实时监控html/css/js代码，一经改动，浏览器上会立即显示效果，无需刷新，大大提高了前端的开发效率

grunt serve

由于本文涉及的工具还不是特别成熟，无法涵盖所有的问题，其他bug在stackoverflow和github上一般都有解决，欢迎指正。