Jun 15, 2016

Web Starter Kit 介绍

概述

Web Starter Kit 是一套前端开发工具，它不仅有一套响应式的前端模板，提供了夸设备和屏幕的工具，他还可以帮助你快速高效的架构前端项目，能够让前端开发者快速启动或加入开发项目。

特点	简介
强大的模板	Material Design Lite 的一套强大的响应式模板，你可以选择使用默认模板开始，也可以选择basic.html从零开始
支持Sass	更方便的通过sass编写css，你可以自由使用变量、函数等。（运行 gulp serve 或者 gulp）
代码优化	压缩合并js,css,html,图片来保持页面整洁（使用gulp来将优化版本产出到/dist目录）
代码检测	Javascript 代码检测是通过ESlint——一个可拓展的JavaScript代码检测工具。Web Starter Kit 使用了 eslint-config-google 代码检测配置，根据Google Javascript 代码规范检测
支持ES2015	可以选择通过Babel 6.0来支持ES2015，删除掉.babelrc文件中的 “only”: “gulpfile.babel.js” 这一行，可以将ES2015代码转换为ES5
内置HTTP服务	为了开发中在本地预览网页效果，内置了HTTP服务
浏览器即时刷新	新内容产生后刷即时新浏览器，不需要安装其他插件。（需要gulp serve 支持）
跨设备同步	同步点击、滚动、表单以及即使刷新。通过BrowserSync 进行支持，（运行gulp serve 需要让设备访问到你的ip）
离线支持	感谢Service Worker pre-caching 。需要将dist放到https协议下才能使用离线支持。使用sw-precache 实现
页面速度分析	展示出你的页面在手机或桌面应用的性能指标。(运行 gulp pagespeed)

下载代码包或者clone这个githsub库，并且在app目录内开发。这里有两个初始文件可供你选择：

index.html - 默认开始文件，含有已经设计好的页面
basic.html - 没有页面内容，但是仍然含有移动端简洁而又实用的元信息一定要仔细看一下安装文档来确认你的开发环境是否支持WSK（Web Starter Kit），如果你的开发环境可以运行WSK，那么请查看命令来开始使用Web Starter Kit吧！

Web Starter Kit 全力给你创建一个高效的执行体验，我们默认页面的Speed Index的测试成绩是小于1100的（1000是最佳效果），重复加载的成绩小于550，这要感谢 Service Worker precaching。

目前，我们官方支持一下浏览器的最后两个版本：

Chrome
Edge
Firefox
Safari
Opera
Internet Explorer 9+ 并不是说Web Starter Kit不能支持更早的版本，但是我们保证在这些版本下Web Starter Kit将会运行的更好。

如果你在使用Web Starter Kit时遇到问题，请查看我们的疑难解答规则，并且开启一个issue。我们很乐意探讨如何这些问题。

如果你不想使用任何我们提供的工具，请在项目中删除以以文件 package.json、gulpfile.babel.js、.jshintrc 和 .travis.yml。你可以安全的使用我们提供的模板以及新的构建系统或者不使用任何构建系统了。

##灵感 Web Starter Kit 的灵感来自于Mobile HTML5 Boilerplate和 Yeoman的 generator-gulp-webapp，这两个项目是促成Web Starter Kit 主要原因，我们的FAQs 讲解了使用WSK通常会问的问题。

##捐献我们欢迎和鼓励大家对我们的项目进行捐献、提问和讨论，如果想为WSK贡献代码，在Pull Request之前请阅读我们的贡献向导，网站相关问题请到 Web Fundamentals 跟进。