Window下搭建foundation apps环境

Window下搭建foundation apps环境

框架:AngularJSFoundation

构建工具: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) 安装所需要的工具:yogulpbower

   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) 项目创建过程中会要求选择配置项,如是否需要jquerysassbootstrapfoundation等,根据实际需要选择。一般情况下选择:

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,再运行即可

转载于:https://www.cnblogs.com/karila/p/7417789.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值