使用Google的Web Starter Kit创建新项目[指南]

Google刚刚发布了一个名为Google Web Starter Kit的样板。 Web Starter Kit旨在帮助Web开发人员快速启动新的Web开发项目 。

它包含强大的工具，例如Br​​owserSync，LiveReload，HTTP Server，PageSpeed，ImageMin，Sass编译器，JSHint，以及几个模板， 我们可以使用这些模板来开发可在多种设备上使用的Web应用程序 。 让我们看一下如何开始使用Web Starter Kit。

入门

可以从Google Web Starter Page下载Google Web Starter Kit，您可以立即使用它。 但是，要使用其随附的工具，您将必须安装以下工具。

首先， 确保已安装NodeJS ，这是运行许多Gulp任务（包括PageSpeed，ImageMin和JSHint）所必需的。

由于Web Starter Kit使用Sass编写CSS，因此您还需要安装Ruby和Sass 。

最后，您还需要安装Gulp。 Web Starter Kit还附带了许多Gulp插件，可以自动执行开发任务。 所有Gulp插件都在gulpfile.js中进行了预配置，可以在Web Starter Kit根目录中找到该插件。

要安装Gulp，请使用以下命令。

npm install gulp

设置完所有这些工具后，我们就可以开始使用Web Starter Kit。

使用Web入门套件

如前所述，您可以从Google Web Starter Page下载Web Starter Kit并将其解压缩到所需的文件夹中。 获得该套件的另一种方法是使用git命令从Github存储库下载该套件。 跑：

git clone https://github.com/google/web-starter-kit.git

此命令会将所有Web Starter Kit复制到您的计算机。 这还将带来一个名为“ web-starter-kit”的新文件夹，其中包含许多文件夹，包括app文件夹，Gulpfile.js，package.json等。 接下来，我们将安装Web Starter Kit依赖项（开发所需的文件和库）。 只需运行以下命令即可安装依赖项：

npm install

一旦安装了依赖项，我们就准备就绪，可以开始构建我们的Web应用程序。 此时，所有文件和文件夹都在我们的项目目录中。

使用Gulp构建Web入门套件

Web Starter Kit配备了Gulp插件，以减轻我们开发任务的负担。 以下是您可以记住的一些有用命令。 在终端或命令提示符中运行它们。

gulp serve 。 此命令通过localhost地址为浏览器中的应用程序提供服务，并运行LiveReload ，只要您对文件进行了更改， LiveReload就会刷新浏览器中的页面。 该命令还将运行BrowserSync。 正如我们在上一教程中讨论的那样，BrowserSync将在编辑文件时同步用户交互，例如单击，滚动并在多个设备上重新加载页面。

在Chrome移动仿真中查看了Web Starter Kit。

gulp pagespeed是另一个有用的命令。 此命令将根据Google拥有的PageSpeed API显示应用程序的页面性能得分。 这是一个方便的工具，可让您深入了解页面的加载性能。

gulp命令又会生成一个名为dist文件夹的新文件夹，其中包含可用于发行的文件。 优化并压缩了该文件夹中的文件，例如HTML，JS，CSS和图像。

一些警告

Web Starter Kit采用了先进的Web技术。 Web Starter Kit 仅适用于最新版本的浏览器，例如Internet Explorer 10，Firefox 30，Chrome 34，Opera 23和Safari23。此外，根据我的测试，Internet Explorer 9和Internet Explorer中会出现一些故障上述浏览器的任何早期版本。 因此，如果您有义务让您的Web应用程序在较旧的浏览器中运行，则可能需要做更多的工作来填补这些浏览器的技术空白。

结论

使用Google Web Starter Kit将有助于开发功能强大且性能良好的多设备Web应用程序。 该工具包包含用于样式指南的模板，并且是预先配置的功能强大的工具，因此我们可以快速开发Web应用程序项目。

翻译自: https://www.hongkiat.com/blog/new-projects-with-google-web-starter-kit/