最近在学习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. 列表中语句 python

    找到两个列表中相同元素: list1 = [1,2,3,4,5] list2 = [4,5,6,7,8] print ([l for l in list1 if l in list2]) 输出: [4 ...

  2. js indexOf within Switch

    https://stackoverflow.com/questions/22277447/indexof-within-switch switch (true) { case (msgRes.inde ...

  3. 问题解决Android studio遇到 java.lang.OutOfMemoryError: GC app:transformClassesWithDexForDebug解决方法 以及gradle优化

    http://blog.csdn.net/xiaoxing0828/article/details/52242090

  4. Unicode、UTF8与UTF16

    1 概念 Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案 UTF是“Unicode Transformation Format”的缩写,可以翻译成Unicode字符集转换格式 ...

  5. 使用git提交代码到GitHub

    0.下载Git Bash,在Windows系统可以用Git Bash通过简单的命令将代码提交到GitHub1.打开项目所在的文件夹,右键,"Git Bash Here"2.初次使用 ...

  6. JS中如何处理多个ajax并发请求?

    js中的多并发处理. 通常 为了减少页面加载时间,先把核心内容显示处理,页面加载完成后再发送ajax请求获取其他数据 这时就可能产生多个ajax请求,为了用户体验,最好是发送并行请求,这就产生了并发问 ...

  7. Python3 enumerate() 函数

    Python3 enumerate() 函数  Python3 内置函数 描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标 ...

  8. focal

    focal 美 ['foʊk(ə)l]   英 ['fəʊk(ə)l]   adj.中心的:很重要的:焦点的:有焦点的 网络劲浪:在焦点上的:局部

  9. css学习-css引入&css选择

    一.引入css的方式,一共有4种,我们只需要掌握三种就可以了,@import的方法我们不做掌握 1.第一种引入的方法 <!--1.第一种引入css的方法--> <h1 style=& ...

  10. swift中UITextView的使用

    https://blog.csdn.net/potato512/article/details/52692604