谷歌Web Starter Kit 起步套件
阿新 • • 發佈:2017-05-17
all int 新的 ble lin sync doc pty bus
Web Starter kit是一個來自Google的構建響應式網站的模板。支持不同的設備,並且由gulp.js 構建,同時支持跨設備同步測試.
多設備同步測試采用了 BrowserSync 。BrowserSync 是一個基於socket.io 的Node 應用,當你更改文件的時候,它可以自動的改變頁面。它 ( 指BrowserSync ) 還有 gulp.js 模塊 ,你可以在你的項目中使用它。
倉庫地址
https://github.com/google/web-starter-kit
內置特效
- 響應式模板
- SASS支持 通過gulp serve或者 在生成環境中使用gulp
- 性能優化 壓縮JSS、CSS、HTML、圖片文件
- 代碼檢查 ESLINT
- 內置的HTTP Server 通過gulp serve
- 實時的頁面刷新 使用browser-sync
- 可以使用ES2015 To enable ES2015 support remove the line
"only": "gulpfile.babel.js",
in the .babelrc file. - 頁面性能分析 run gulp pagespeed
- 內置的service worker 在Https的域名下面自動使能
發布到你的Github Pages
參考文檔 https://github.com/yeoman/generator-webapp/blob/master/docs/recipes/gh-pages.md
1. 創建一個新的倉庫
2. git remote add origin https://github.com/you/webapp.git
3. npm install --save-dev gulp-gh-pages
創建一個gulp task
// deploy to github pages gulp.task(‘deploy‘, () => { return gulp.src(‘dist/**/*‘) .pipe($.ghPages()); });
4. git checkout --orphan gh-pages
5. git commit -m ‘initial commit‘ --allow-empty
6. git push origin gh-pages
7. 最後 RUN gulp deploy
如果失敗了,運行下面的命令
rm -rf .publish
然後重新gulp deploy
谷歌Web Starter Kit 起步套件