Google推出了Web Starter Kit：一个多设备样板和工具包

Google announced a big surprise just a few days ahead of the Google I/O Conference in San Francisco. They have launched a brand new tool called Web Starter Kit, a boilerplate with powerful tools to quickly start your web development projects.

在旧金山举行的Google I / O会议召开前几天，Google宣布了一个重大惊喜。 他们已经推出了一个名为Web Starter Kit的全新工具，该模板具有强大的工具，可以快速启动您的Web开发项目。

Maybe Google wants the Google I/O attendees to familiarize themselves with the tool before the event starts. Whatever the case, the Web Starter Kit is a powerful tool packed with many modern third-party tools to help you start writing powerful code in minutes.

也许Google希望Google I / O参与者在活动开始之前熟悉该工具。 无论如何，Web Starter Kit是一个功能强大的工具，其中包含许多现代的第三方工具，可帮助您在几分钟内开始编写功能强大的代码。

Google has previously released many web foundation tutorials showcasing some of the best practices in modern web development. With this release, they have given away a set of boilerplate templates and tools that focuses more on performance issues and multi-screen development. Google seems to fill the void that most of today’s front-end frameworks have long ignored — web app performance and optimization!

Google先前已发布了许多Web基础教程，展示了现代Web开发中的一些最佳实践 。 在此版本中，他们提供了一组样板模板和工具，这些样板和工具集中于性能问题和多屏开发。 Google似乎填补了当今大多数前端框架长期以来所忽略的空白-Web应用程序的性能和优化 ！

Web Starter Kit, though in beta, comes with features that include:

Web Starter Kit虽然处于beta版，但具有以下功能：

• Multi-device responsive boilerplate
  多设备响应样板
• Cross-device synchronisation
  跨设备同步
• Live browser reload
  实时浏览器重新加载
• Code minification
  代码缩小
• Built-in HTTP Server
  内置HTTP服务器
• PageSpeed Insights
  PageSpeed见解
• Sass support
  Sass支持

… and more. To make the kit work, your system should have NodeJS, Ruby, and Ruby Sass Gem installed. Installing Gulp is optional.

… 和更多。 为了使该工具包正常工作，您的系统应安装NodeJS，Ruby和Ruby Sass Gem。 安装Gulp是可选的。

The kit also includes a multi-screen grid system inspired by frameworks like Bootstrap and Zurb’s Foundation. But unlike such frameworks, this kit doesn’t offer any UI elements and components. Google engineer Addy Osmani said on Hacker news that they don’t intend to compete with Bootstrap in terms of UI components.

该套件还包括一个受Bootstrap和Zurb's Foundation等框架启发的多屏网格系统。 但是，与此类框架不同，该工具包不提供任何UI元素和组件。 Google工程师Addy Osmani 在Hacker新闻中表示，他们不打算在UI组件方面与Bootstrap竞争。

The kit comes with two basic templates: index.html and basic.html. The first one, index.html, is the default starting point for the app. It contains responsive design and a slide-out navigation bar.

该工具包带有两个基本模板：index.html和basic.html。 第一个index.html是应用程序的默认起点。 它包含响应式设计和滑出式导航栏。

The second template, basic.html, can be used as a basic starting point with no slide-out menu. You have to replace this with index.html if you want to keep this as a starting point.

第二个模板basic.html可以用作没有滑出菜单的基本起点。 如果要将其作为起点，则必须用index.html替换它。

Working with Google’s Web Starter Kit becomes even easier when Gulp is integrated. All Gulp tasks are pre-configured inside the gulpfile.js file found in the root directory. Running the command gulp inside the project folder will generate a distribution-ready folder called /dist. This folder contains minified CSS, JS files, optimized images, and compressed HTML files.

集成Gulp后，使用Google的Web Starter Kit变得更加容易。 所有Gulp任务都是在根目录下的gulpfile.js文件中预先配置的。 在项目文件夹中运行命令gulp将生成一个名为/dist的可分发的文件夹。 此文件夹包含缩小CSS，JS文件，优化的图像和压缩HTML文件。

Running gulp serve loads the build version of the app in the browser. It uses Live Browser Reloading to refresh the browser when you make any changes to the code.

运行gulp serve将在浏览器中加载该应用程序的构建版本。 当您对代码进行任何更改时，它将使用“实时浏览器重新加载”来刷新浏览器。

The Gulp tool also comes pre-configured for the PageSpeed feature too. Once you have started developing applications using the kit, running gulp pagespeed will show the particular page’s performance score.

Gulp工具也已针对PageSpeed功能进行了预配置。 使用该工具包开始开发应用程序后，运行gulp pagespeed将显示特定页面的性能得分。

One of the best features of the Web Starter Kit is the out-of-the-box, UX Style Guide. It shows basic typography styles, font icons, and CSS classes for the grid system.

Web Starter Kit的最佳功能之一是现成的UX样式指南。 它显示了网格系统的基本字体样式，字体图标和CSS类。

Web Starter Kit looks like a promising boilerplate starter kit for any developers of all skill levels. Checking performance, on-the-go optimization, and a responsive grid system are some of the best features it offers.

对于所有技能水平的开发人员而言，Web Starter Kit看起来都是很有希望的样板入门工具包。 它提供了一些最好的功能，包括检查性能，进行中的优化以及响应式网格系统。

Be sure to check it out and let us know your views. Will you try Google Starter Kit in your next project?

请务必检查一下，并让我们知道您的意见。 您会在下一个项目中尝试使用Google Starter Kit吗？

翻译自: https://www.sitepoint.com/google-launches-web-starter-kit/