最近在学习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. Genetics in geographically structured populations: defining, estimating and interpreting FST

    摘要:Wright’s F‑statistics, and especially FST, provide important insights into the evolutionary proce ...

  2. java 用volatile和不用volatile的区别

    在当前的Java内存模型下,线程可以把变量保存在本地内存(比如机器的寄存器)中,而不是直接在主存中进行读写.这就可能造成一个线程在主存中修改了一个变量的值,而另外一个线程还继续使用它在寄存器中的变量值 ...

  3. 第十章 泛型程序设计与C++标准模板库 泛型程序设计及STL的结构

  4. 神经网络出现nan原因?以及解决

    之前在TensorFlow中实现不同的神经网络,作为新手,发现经常会出现计算的loss中,出现Nan值的情况,总的来说,TensorFlow中出现Nan值的情况有两种,一种是在loss中计算后得到了N ...

  5. ASP.NET使用ListView数据绑定控件和DataPager实现数据分页显示(二)

    使用ListView控件进行修改,删除与添加操作1.页面代码: <asp:ListView ID="lv2" runat="server" onpagep ...

  6. 动态输出的javascript中alert文本的换行问题

    这个简单<%out.println("<script>alert('姓名:xx\\n性别:女\\n爱好:吃\\n')</script>");%> ...

  7. maven的配置及仓库的配置

    1.maven的配置 1.1.注意:电脑上需要安装jdk. 1.2.配置MAVEN_HOME,再在path中配置到bin这一层. (1)配置MAVEN_HOME:我的电脑--->右击---> ...

  8. sqlserver 日期格式化

    Sql Server 中一个非常强大的日期格式化函数Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect CONVE ...

  9. linq to sql之like

    contains——like '%提交%' StartsWith—— like '条件%' EndWith——like '%条件'

  10. AOP不起作用的原因之一

    在-servlet.xml配置context:component-scan后,Spring在扫描包时,会将所有带 @Service注解的类都扫描到容器中.而-servlet.xml和applicati ...