下载新手开发包：https://developers.google.com/web/starter-kit/，解压进入该目录，执行：

npm install

结果显示Error: ENOENT, stat 'C:\Users\Administrator\AppData\Roaming\npm。解决方法：在C:\Users\Administrator\AppData\Roaming\ 在这个目录建立npm文件夹就行了。然后再执行还是抱一堆错，貌似是git问题。于是在电脑上又装了git并配置了git的环境变量，最后终于install 成功了。

npm install -g gulp

然后再执行：

npm serve

如果在浏览器能访问http://localhost:3000说明配置成功了。

这个任务启动了一个本地 HTTP 服务器，让你可以在浏览器中查看你的站点，但幕后其实有一些其他工具在运作：

传统的刷新过程是，编辑器中修改，切换到浏览器，按 CTRL-R，等待页面重载，实时刷新则消去这一步。
有了实时刷新，你可以一边在编辑器中修改，一边看它们在打开的浏览器中即时生效。

Browser Sync 帮你跨设备测试站点。任何的滚动，轻拍，或按键都将同步给所有连接着的浏览器。本人在iPad和PC上同时打开测试网页，发现对页面的响应是同步的，但是对于浏览器的响应并不同步。比如点击iPad上的浏览器的后退按钮，PC端并未同步，所以这里的同步是指页面响应同步。

在面向诸多浏览器时，你需要使用浏览器厂商前缀来确保你能够使用它们的特性。Web 新手开发包为你自动化所有的添加前缀的工作。构建过程会让 autoprefixer 过一遍 CSS，自动添加浏览器厂商前缀。

JSHint 是一个扫描 JavaScript 代码的工具，用于检查你 JavaScript 逻辑中的可能问题，而且能强化编码的最佳实践。
在你构建项目时，或是你运行 gulp server 然后对一个 JavaScript 文件做了修改，JSHint 都会运行。

在你运行 serve 命令后，项目中任何针对 Sass 文件的修改都会被编译成 CSS 并且添加浏览器厂商前缀，随后页面由实时刷新功能来重载。
给不知道 Sass 的介绍一下，Sass 项目把自身描述为一种“CSS 扩展语言”。基本上它就是 CSS 加一些额外特性。比如，它添加了变量和函数的支持，可以帮你模块化、复用 CSS，更好地组织 CSS。

2.2 gulp 构建网站的生产版本

只要 gulp 命令，你就可以给你的网站构建一个可立即部署的版本。这个命令运行一些我们前面已经见过的任务，以及其它致力于让你的网站加载更快、更高效的任务。

构建生产版本执行的主要任务有：

构建样式

构建首先会先编译项目中的 Sass。Sass 编译完成后，Autoprefixer 过一遍所有的 CSS。

检查 JavaScript 中的问题

第二步运行 JSHint 检查 JavaScript。

构建 HTML 页面

下一步就是检查你的 HTML 文件，查找构建块，合并、压缩 JavaScript。处理完 JavaScript 后，构建会压缩 HTML 页面。
通过移除并非真正需要的注释或空格符，配合其它技术，压缩减小了最终 JavaScript 文件的字符数。这就减小了最终的文件大小，加快站点加载时间。
合并意味着把多个文件的内容并成一个。之所以这样做是因为浏览器可以因此只发送一个请求给服务器，而不是多个，对你的用户来说，这会更快。
关于哪些 JavaScript 文件需要我们合并、压缩到一起，构建块中都有。且让我们看一个构建块示例：

<!-- build:js scripts/main.min.js -->
<script src="scripts/example-1.js"></script>
<script src="scripts/example-2.js"></script>
<!-- endbuild -->

如你所见，一个构建块不过是一个格式特殊的注释，第一行表示该构建块是针对 JavaScript 的，最终文件的名称及路径应该是 scripts/main.min.js。最后一行关闭了块。两行之间则是我们要压缩、合并的 JavaScript 文件，在这个例子中是指 example-1.js 和 example-2.js。

优化图片资源

JPEGs 和 PNGs 格式的图片的元数据被剔除；对渲染图片来说这些是多余的。元数据包括了诸如拍照所用的相机等信息。
至于 SVGs，构建会移除所有不需要的属性或空白，以及存在的注释。

拷贝字体

这个简单工作就是把我们的字体从 app 目录拷贝到最终的构建目录里。

拷贝根目录下所有文件

如果项目根目录下存在任何文件，则构建也会将它们拷入最终的构建目录中。

2.3 测试你的网站

Web 新手包附带一个样式指南，能够快速、便捷地查看你站点使用的所有样式。从组件的角度思考你的 CSS，然后相应地拆分样式与类，你就得到清晰结构的样式，也能看到所有组件放在一起是什么样子。

查看样式指南 HTML

要查看添加页面元素所需的 HTML 和类名，点击样式指南顶部的 ’Toggle Code Snippets’ 按钮。一旦启用，你会在每个元素下看到一段带有适当标记的代码示例，你可以拷贝、粘贴到你的页面。

扩展样式指南

不管你什么时候创建一个会在网站的许多地方上使用的新元素，请考虑添加该元素到你的样式指南中。

添加一个新的组件

打开 app/styleguide/index.html，在最后一个元素后面给你的新元素添加 HTML。
在 app/styles/components/ 中，给你的组件创建一个名称合适的新 Sass 文件。
打开 app/styles/components.scss，在文件底部，以如下方式导入新 Sass 文件。

 // New Styles
 @import "_components/_<My Component Name>";

别忘了在文件名中添加下划线；它指明该文件的目的是用于合并到其他 Sass 文件。
访问 http://localhost:/styleguide/，在本地测试它的外观情况，确保构建成功。
最后，在你的页面中使用新组件。

示范如何添加组件

下面是一个简单的添加组件到样式指南中的步骤。
首先我们在 app/styleguide/index.html 底部添加 <footer> 标签，给它一个类名 Footer。
接着创建我们的 Sass 文件。这里我们会创建 app/styles/components/_footer.scss 文件然后添加一些非常基本的样式以便开始。

 .Footer {
   height: 180px;
   background-color: #404040;
 }

在 components.css 底部，添加我们的 footer sass 文件。

 // New Styles
 @import "_components/_footer";

现在，运行 gulp serve 并检查样式指南，我们应该能看到赏心悦目的 footer。
添加多一点样式：

 .Footer {
   height: 180px;


   color: white;
   background-color: #404040;


   a {
       text-decoration: none;
       color: white;
   }
 }

让我们在 styleguide.html 中添加一个标题，这样它看起来跟其他样式指南元素就很像，也许还可以在页面顶部添加一个链接。

 // Footer Link at top of styleguide.html
 <li class="summary-header__anchors-item">
   <a href="#footer">Footer</a>
 </li>


 .......


 // Footer Title
 <div class="container">
   <a name="footer"></a>
     <h2 class="subsection-title">
       <strong class="subsection-number">#21</strong> Footer
     </h2>
   </div>


   <!-- Input Component HTML Here -->
 </div>

最后，再充实下 HTML。

 <footer class="Footer">
   <div class="container">
     <p>
       <a href="#">
         <i class="icon icon-chevron-up"></i> Back to top
       </a>
     </p>
   </div>
 </footer>

最后结果如下：


你现在可以在引入 components.scss 文件的任意页面中使用 footer 组件 (比如 app/styles/main.scss 文件)。

/*
 * Visual Style Guide styles
 * Remove if you prefer to use a CSS library, like Bootstrap
 */
@import "components/components";