GIG inc のフロントエンド用テンプレートです。
- 必要最低限の構成
- css, jsファイルはページごとに管理・出力
- eslintによるコード矯正
- webpack
- babel
- scss
- eslint(airbnb)
- gulp.js
publicディレクトリ配下のindex.htmlを起点にローカルサーバが立ち上がります。
localhost:3000でアクセスすることができ、ライブリロード&js, scssファイルの自動コンパイルが有効になります。
$ npm run dev
public/assets配下のcss, jsファイルを圧縮してdist/assetsへ出力します。
$ npm run build
Q. HTMLファイルの名前を変更したり追加したい！
A. public配下に.htmlを追加・編集してください。
Q. JSファイルの名前を変更したり追加したい！
A. src/js/entries配下のjsファイルを編集・追加した後、
npm run devし直してローカルサーバーを再起動させてください。
Q. CSSファイルの名前を変更したり追加したい！
A. src/scss/entries配下のscssファイルを編集・追加してください。
Q. JSライブラリってどうするの？
A. 複数のJSライブラリを共通して使用する場合は、CDNから<script>タグで配置してください。ページでしか使わない場合はimportして使ってください。
Q. 画像ファイルってどこに配置するの？
A. public/assets/img配下に設置してください。
Q. なんで一つにバンドルせずページごとにCSSやJSを読み込むようにしたの？
A. HTTP/2の登場で1つにまとめたバンドルファイルよりも細かく機能ごとに分割して読み込ませたほうが高速化を見込めるからです。