web-starter-kit README

The project's README from github.com/google/web-starter-kit. As one markdown file: README.md.

Web Starter Kit

Overview

Web Starter Kit is an opinionated boilerplate for web development. Tools for building a great experience across many devices and performance oriented. Helping you to stay productive following the best practices outlined in Google's Web Fundamentals. A solid starting point for both professionals and newcomers to the industry.

Features

Feature Summary
Responsive boilerplate A responsive boilerplate optimized for the multi-screen web. Powered by Material Design Lite. You're free to use either this or a completely clean-slate via basic.html.
Sass support Compile Sass into CSS with ease, bringing support for variables, mixins and more. (Run gulp serve or gulp for production)
Performance optimization Minify and concatenate JavaScript, CSS, HTML and images to help keep your pages lean. (Run gulp to create an optimised version of your project to /dist)
Code Linting JavaScript code linting is done using ESLint - a pluggable linter tool for identifying and reporting on patterns in JavaScript. Web Starter Kit uses ESLint with eslint-config-google, which tries to follow the Google JavaScript style guide.
ES2015 via Babel 6.0 Optional ES2015 support using Babel. To enable ES2015 support remove the line "only": "gulpfile.babel.js", in the .babelrc file. ES2015 source code will be automatically transpiled to ES5 for wide browser support.
Built-in HTTP Server A built-in server for previewing your site locally while you develop and iterate
Live Browser Reloading Reload the browser in real-time anytime an edit is made without the need for an extension. (Run gulp serve and edit your files)
Cross-device Synchronization Synchronize clicks, scrolls, forms and live-reload across multiple devices as you edit your project. Powered by BrowserSync. (Run gulp serve and open up the IP provided on other devices on your network)
Offline support Thanks to our baked in Service Worker pre-caching, sites deploying dist to a HTTPS domain will enjoy offline support. This is made possible by sw-precache.
PageSpeed Insights Web performance metrics showing how well your site performs on mobile and desktop (Run gulp pagespeed)

Quickstart

Download the kit or clone this repository and build on what is included in the app directory.

There are two HTML starting points, from which you can choose:

Be sure to look over the installation docs to verify your environment is prepared to run WSK. Once you have verified that your system can run WSK, check out the commands available to get started.

Web Performance

Web Starter Kit strives to give you a high performance starting point out of the box. Our median Web Page Test scores for the default template have a Speed Index of ~1100 (1000 is ideal) and a repeat-visit Speed Index of ~550 thanks to Service Worker precaching.

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

This is not to say that Web Starter Kit cannot be used in browsers older than those reflected, but merely that our focus will be on ensuring our layouts work great in the above.

Troubleshooting

If you find yourself running into issues during installation or running the tools, please check our Troubleshooting guide and then open an issue. We would be happy to discuss how they can be solved.

A Boilerplate-only Option

If you would prefer not to use any of our tooling, delete the following files from the project: package.json, gulpfile.babel.js and .travis.yml. You can now safely use the boilerplate with an alternative build-system or no build-system at all if you choose.

Docs and Recipes

Inspiration

Web Starter Kit is inspired by Mobile HTML5 Boilerplate and Yeoman's generator-gulp-webapp, having taken input from contributors to both projects during development. Our FAQs attempt to answer commonly asked questions about the project.

Contributing

Contributions, questions and comments are all welcome and encouraged. For code contributions to Web Starter Kit, please see our Contribution guide before submitting a pull request. Website related issues should be filed on the Web Fundamentals issue tracker.

License

Apache 2.0
Copyright 2015 Google Inc

web-starter-kit (google/web-starter-kit)

Searching Database…

18.3K ·GitHub
Web-starter-kit
archived
这是什么？Google 的 Web Starter Kit 是一套带有明确规范的项目模板和基于 Gulp 的工作流，用于构建多设备网站，并遵循 Google Web Fundamentals 的最佳实践。无论你是专业开发者还是新手都适用。
那它是我在上面开发的框架，还是我要运行的工具？都不是——它是一个项目起步模板：一个响应式的脚手架，外面套着一套 Gulp 构建工具链。页面布局来自 Material Design Lite,另外还附带一个空白起步的版本。
我怎么用它开始建一个网站？下载或克隆这个仓库，在 app 目录的基础上开发，选择 index.html(Material Design 布局)或 basic.html(空白起步)。然后运行 gulp serve,就能在本地预览并支持实时刷新。
运行之前我需要装好什么？需要 Node.js 和 Gulp——README 里指向了安装文档，可以用来核对你的环境；项目的包元数据要求 Node 0.12 或更高版本。
这个项目现在还在积极维护吗？不在了——GitHub 仓库已经归档为只读，不会再有更新。当作起步模板或参考资料没问题，但它不会再演进。
我做完的网站能支持哪些浏览器？这套工具官方支持 Chrome、Edge、Firefox、Safari、Opera 和 Internet Explorer 各自最近两个版本(IE 为 9 及以上)；更老的浏览器不在考虑范围内。
Gulp 工作流到底能帮我做什么？gulp serve 会启动一个内置 HTTP 服务器，浏览器实时刷新，还能通过 BrowserSync 在多台设备间同步(点击、滚动和表单操作会在各设备上同步显示)；gulp 会构建出优化过的 /dist 目录，里面的 JS、CSS、HTML 和图片都经过压缩与合并；gulp pagespeed 则能报告移动端和桌面端的性能指标。
index.html 和 basic.html 有什么区别？index.html 是默认的起点，带有 Material Design 布局；basic.html 没有布局，但仍然包含最基本的移动端最佳实践。
我的网站开箱就能支持离线访问吗？可以，但有一个前提：内置的 Service Worker 预缓存(通过 sw-precache 实现)只有在你把生成的 dist 文件夹部署到 HTTPS 域名上时才会生效。
我可以不要那些工具链，只留下模板吗？可以——删掉 package.json、gulpfile.babel.js 和 .travis.yml,这套模板就能配合任何其他构建系统使用，或者完全不用构建系统。
What are similar projects?Skeleton, material-design-lite, material-components-web, mdb-ui-kit, material, simplefolio, open-saas, LearnCS8-Resume
Which topics is it in?sass, boilerplate, responsive, material-design, google, offline, beginner-friendly, css, html, web-development, performance, frontend
Creator
google
Size
9.9 MB
Stars
18.3K
Updated
CommitJan 09Releasev0.6.5Dec 13
Age
12y
Commits · 90 Days