最近在学习https://developers.google.com/web/fundamentals/这里的内容,其中就有一部分是安装Web Starter Kit的教程,我总结一下自己的安装过程。

我的大部分安装步骤都是按照这篇文章的步骤一步一步进行的,唯一遇到的问题就是在gulp serve时出现错误提示—— can not find module 'minimatch',最终的解决办法我是在cmd进入到web-stater-kit-0.4.0目录下面,进行了— npm install。

第一步:首先你应该先从Web Starter Kit 的Github页面下载web-starter-kit的代码包,最新的代码版本链接地址:https://github.com/google/web-starter-kit/releases/latest;

第二步:你想要使用 Web Starter kit tools,那么你必须要先安装好Node,Ruby,Gulp以及Sass gem;

Node —— http://nodejs.org/ ,按照默认安装就好,不需要更好和设置任何东西;

Ruby —— https://www.ruby-lang.org/en/downloads/ ,注意安装过程之中会出现一个单选框窗口,英文内容是"Add Ruby To execute path",中文意思就是将ruby添加启动路径,这里一定要打勾,目的主要在使用cmd的时候,系统会默认将自动去寻找ruby的启动路径,而你可以只需要输入命令就好;

Sass —— Sass是一个依赖于Ruby的安装包,所以你必须要安装好Ruby才可以安装Sass。打开你的cmd,输入ruby -v ,只要你的ruby安装正确,那么就会返回当前你系统中所安装的ruby版本,然后你就可以接着输入命令 gem install sass 进行Sass的安装。如果你不明白可以看这个链接里面的详细教程说明 ,详见链接——http://sass-lang.com/install;

Gulp —— 命令: npm install --global gulp 执行gulp的安装

上面的步骤都安装成功之后,你就可以将第一步的压缩包解压到你指定的目录,我是解压到F盘,路径是F:\web-starter-kit-0.4.0。

执行 cd web-starter-kit-0.4.0 ,进入到该目录下,输入并执行命令 npm install 。

上面所有的步骤,你都执行成功之后,那么你就可以执行最后一步了 —— gulp serve ,启动服务器。

你将会在Windows的cmd中看到如下的截图:

没有错误的情况,gulp会自动在Windows自带的IE浏览器打开web-starter-kit-0.4.0/app/index.html页面。

IE8浏览页面截图:

IE7浏览器截图:

Google Chrome/Mozilla Firefox浏览器截图:

MI 3自带浏览器截图:

Web-Starter-Kit的环境搭建到这里就结束了,有问题可以留言进行交流。

Window 64bit环境搭建Web Starter Kit的更多相关文章

  1. 介绍使用Cordova和Web Starter Kit开发Android

    介绍 如今,每个人都想制作移动应用程序,为什么不呢?世界上有更多的移动设备比任何其他用户设备.Android尤其流行,但是为什么不从一个众所周知的跨平台应用的基础开始呢?Android的开发显然比其他 ...

  2. Windows环境搭建Web自动化测试框架Watir

    Windows环境搭建Web自动化测试框架Watir 一.前言     Web自动化测试一直是一个比较迫切的问题,对于现在web开发的敏捷开发,却没有相对应的敏捷测试,故开此主题,一边研究,一边将We ...

  3. Windows环境搭建Web自己主动化測试框架Watir(基于Ruby)

    web自己主动化測试一直是一个比較迫切的问题 图1-1 须要安装的工具 http://railsinstaller.org/ 由于安装Ruby还须要用到其它的一些开发工具集.所以建议从站点http:/ ...

  4. Windows&linux使用集成环境搭建 web 服务器

    文章更新于:2020-02-17 按照惯例,需要的文件附上链接放在文首 文件名:phpStudy_64.7z 文件大小:78.3 M 下载链接https://www.lanzous.com/i9c6l ...

  5. macaca环境搭建(web 和 android)

    一.安装配置JDK 1.1下载JDK地址http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...

  6. Unix/Linux环境C编程入门教程(1) Solaris 11 64bit环境搭建

    Unix/Linux版本众多,我们推荐Unix/Linux初学者选用几款典型的Unix/Linux操作系统进行学习. 本文就带大家来安装Solaris 11 64位并且配置好C/C++开发环境 本文所 ...

  7. python在window下环境搭建

    1.Python安装包下载 地址:https://www.python.org/downloads/windows/ 然后找到对应系统版本的安装包 下载完成后,直接运行exe安装.在安装的时候开业勾选 ...

  8. [环境搭建]-Web Api搭建到IIS服务器后PUT请求返回HTTP Error 405.0 - Method Not Allowed 解决方法 转摘:http://blog.csdn.net/qiujuer/article/details/23827531

    尝试使用微软的Web Api,他的确是一个很有意思的东西. 让我体会到了许多的方便,但是我发现部署到IIS服务器上去了后PUT和Delete请求将返回405. 原因是IIS的默认处理程序默认情况下只允 ...

  9. Ionic2 window开发环境搭建

    1.软件安装 Node.jsCordova & Ionic CLIJava SDK (一定要安装jre1.8)Android SDK 可根据链接http://www.jianshu.com/p ...

随机推荐

  1. 【Java】JVM(一)、Java内存区域

    一.程序计数器(Program Counter Register) 当前执行字节码的行号指示器,可以通过修改该计数器的值来实现字节码指令(分支,循环,跳转等), 每个线程都都有一个程序计数器, 属于线 ...

  2. dubbo hessian+dubbo协议

    Dubbo缺省协议采用单一长连接和NIO异步通讯,适合于小数据量大并发的服务调用,以及服务消费者机器数远大于服务提供者机器数的情况 Hessian协议用于集成Hessian的服务,Hessian底层采 ...

  3. spring 每个jar的作用

    spring.jar 是包含有完整发布模块的单个jar 包.但是不包括mock.jar, aspects.jar, spring-portlet.jar, and spring-hibernate2. ...

  4. 元素的定位tag_name,link_text,class_name

    tag_name 就是根据HTML的标签的名称来定位的: 案例:打开我要自学网,会有用户名和密码的输入框 例如:拿51zxw.net为例 from time import sleep #加载浏览器驱动 ...

  5. 如何快速实现一个command

    新建一个类,实现icoomand接口 定义一个委托,为测试方便,先不考虑CanExecute的情况. 越简单越好. 代码如下: public class ExitHandler : ICommand ...

  6. mongo通信协议

    先是一个包头: struct MsgHeader { int32 messageLength; // total message size, including this int32 requestI ...

  7. 转)Ubuntu安装mysql5.7

    主要参考http://blog.csdn.net/q894523017/article/details/50705392 包去官网下载,解压,安装步骤如下: 上文中有错误,正确如下: sudo dpk ...

  8. css3阴影效果

    http://blog.csdn.net/freshlover/article/details/7610269

  9. LINQ to Entities 不支持 LINQ 表达式节点类型“ArrayIndex”。

    错误原因: bool res1 = S_ROLE_MENU_PURVIEWCODE_Manage.Delete(c => c.MPC_CODE == strs[0]); linq不能写strs[ ...

  10. PAT 1070 结绳(25)(代码)

    1070 结绳(25 分) 给定一段一段的绳子,你需要把它们串成一条绳.每次串连的时候,是把两段绳子对折,再如下图所示套接在一起.这样得到的绳子又被当成是另一段绳子,可以再次对折去跟另一段绳子串连.每 ...