最近在学习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. 关于关闭TAB,IFRAME占用的内存不能释放问题

    资料来源:http://jxd-zxf.iteye.com/blog/1440611 使用TAB时注意,如果TAB是引用IFRAME,关闭TAB时IFRAME不会被销毁从而导致内存不能释放,大量使用T ...

  2. 如何在java中发起http和https请求

    一般调用外部接口会需要用到http和https请求. 一.发起http请求 1.写http请求方法 //处理http请求 requestUrl为请求地址 requestMethod请求方式,值为&qu ...

  3. Cookie进行会话管理

    一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...

  4. 奇偶数判断1(if,else if语句)

    public class 奇偶数判断 { public static void main(String [] args){ float s = 9f; //取单浮点型变量s,可为任意值 float h ...

  5. (动态规划)有 n 个学生站成一排,每个学生有一个能力值,从这 n 个学生中按照顺序选取kk 名学生,要求相邻两个学生的位置编号的差不超过 d,使得这 kk 个学生的能力值的乘积最大,返回最大的乘积

    第2关:最强战队 挑战任务 绿盟和各大名企合作,举办编程能力大赛,需要选拔一支参赛队伍.队伍成员全部来自“绿盟杯”中表现优秀的同学,每个同学都根据在比赛中的表现被赋予了一个能力值.现在被召集的N个同学 ...

  6. 6-Qt给父widget加上styleSheet(添加背景图)而不改变子widget的styleSheet的方法

    Qt给父widget加上styleSheet(添加背景图)而不改变子widget的styleSheet的方法 比如用stylesheet给widget加背景图,可以用qt designer修改ui文件 ...

  7. 并发编程(四)TaskFuture

    并发编程(四)TaskFuture ExecutorService executorService = Executors.newSingleThreadExecutor(); Future<O ...

  8. Windows10 Virtualization Technology虚拟化技术功能

    为什么要开启VT功能,做机器学习环境搭建.运用Docker容器等等,所以首先要确认一下机器是否已经开启了VT技术功能,以此记录一下经历而已. VT是什么?为什么要开启VT?VT是一种虚拟化技术,可以扩 ...

  9. msys2 命令行添加镜像地址

    sed -i "1iServer = https://mirrors.tuna.tsinghua.edu.cn/msys2/mingw/i686" /etc/pacman.d/mi ...

  10. linux下集成开发环境之ECLIPSE--在线调试、编译程序

    裸机开发流程 1.编写裸机程序:2.调试裸机程序:3.生成2进制映象(编译.链接.格式转换):4.烧写/运行2进制映象. 注意:我们自己开发的程序等等需要下载到开发板的Nandflash(类似于硬盘功 ...