框架:AngularJS、Foundation,
构建工具:Gulp,
开发环境:node.js。
操作系统:windows
(一)环境准备
1 安装node.js
1.1 安装最新版本(0.12.7),安装时请选中“add to path” 选项
1.2 设置淘宝镜像,打开 cmd窗口,输入以下命令
npm config set registry=http://registry.npm.taobao.org/
npm config set loglevel=http
如果安装不成功,可安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
1.3 打开cmd,窗口,输入npm -v 检查是否安装成功
2 安装Git
2.1 设置Git环境变量,右击“我的电脑”->“属性”->"高级系统设置"->“环境变量”->“系统变量” 下找到path,加入git的安装目录
C:\Program Files (x86)\Git\bin;
2.2 打开cmd,窗口,输入git --version 检查是否安装成功
3 安装Python
3.1 必须是2.7-3.0 之间的版本(本人安装的是python-2.7.10.amd64),安装时选中“add to path” 选项
3.2 打开cmd,窗口,输入python 检查是否安装成功
4 安装Ruby(可选)
(二)创建项目
(1) 安装所需要的工具:yo,gulp和bower,
npm install -g yo gulp bower
(2) 安装generator-gulp-angular:
npm install -g generator-gulp-angular
(3) 在项目根目录下安装node-sass
npm install node-sass
如果报错Error : ”msbuild” failed with exit code:1...
则安装VS Express 2013 for Desktop,
网址为:http://www.yalewoo.com/vs_2013_express.html
重复安装node-sass,若不行则全局安装:npm install -g node-sass
如果全局安装失败,node-sass -v找到全局安装目录,可以把bode-sass文件拷在全局安装目录下
(4) 如果已经取得完整项目,可直接在项目根目录下运行。
gulp serve
以启动网站
(5) 创建项目,如果不需要指定项目名称,app-name可以不写,默认使用当前目录名作为项目名称
yo gulp-angular [app-name]
(6) 项目创建过程中会要求选择配置项,如是否需要jquery,sass,bootstrap,foundation等,根据实际需要选择。一般情况下选择:
Version of Angular: 1.5.x(stable)
Angular Modules: angualr-animate.js
jQuery or perhaps Zepto: jQuery 2.x
Use a REST resource library: ngResource
Router: UI Router
UI framework: Foundation
Foundation components: The official jQuery implementation of Foundation
CSS preprocessor: Sass(Node)
JS preprocessor: None
HTML template engine: None
(7) 运行项目
gulp serve
如果运行的时候报错:
Error:Missing binding D:\workspace\ABC\node_modules\node-sass\vendor\win32-64-48
\binding.node
其中ABC为项目文件夹
直接在该目录下放置binding.node,再运行即可