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)Gitin;

     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:workspaceABC ode_modules ode-sassvendorwin32-64-48

inding.node

其中ABC为项目文件夹

直接在该目录下放置binding.node，再运行即可