Window下搭建foundation apps环境

Window下搭建foundation apps环境

框架：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，再运行即可