1. 程式人生 > >谷歌Web Starter Kit 起步套件

谷歌Web Starter Kit 起步套件

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 起步套件