Web Starter Kitとは
静的Webサイトを制作する開発環境のボイラープレートです。
これだけあればとりあえず開発環境には困らないようなものです。
※名前はGoogleのWeb Starter Kitから拝借。
Repository
作った目的
- 周りにタスクランナーを採用している人がおらず、タスクランナーの便利さを広めたかった。
- 他のメンバーに手軽に環境を共有したかった。
- 多くの人に自分のタスクランナーを見ていただき、ツッコミやアドバイスなどがほしい。
基本構成
Task Runner : Gulp
Webpackやnpm scriptsなどもありますが、可読性・拡張性を重視すると、Gulpが一番しっくりきたので、Gulpを採用しました。
そのうち、Parcelか自作タスクランナーに乗り換え予定です。
HTML : handlebars + Front-matter
HTMLテンプレートエンジンは、handlebarsを採用しました。pug(Jade)は独特の記法の学習コストがかかり、ejsはテンプレート機能がないため不採用となりました。
また、ページ毎に変数が設定しやすいように、Front-matterも採用しました。
CSS : node-sass + PostCSS (Autoprefixer)
無難に今の所一番スタンダードなSass(scss)を採用しました。また、Autoprefixerなどの自動修正ツールも使いたかったので、PostCSSも採用しました。
JavaScript : Webpack + Babel (@babel/preset-env)
ES6以降の構文を使いたいので、トランスパイラとして、babelを採用しました。また、モジュールバンドラは実績のあるWebpackを採用。
現在、rollup.jsに切り替えようか迷ってます。
Server : Browsersync
Gulpのタスクの中でブラウザをリロードさせることができ、また他にも多くのオプションがあるため採用しました。
Linter : stylelint + ESLint
CSS(scss)用のリンターとしてstylelint、JavaScriptのリンターとしてESLintを採用しました。
いずれもオプションが多く、自動修正機能もあります。
また、コードフォーマッターとして、prettierも導入してあります。
実際に導入してみて
- 随時更新予定
まとめ
構成などを長々と書いてみましたが、興味ある方は実際に使ってみていただくのが一番かと思います。
アドバイスなどあれば、どんどんご連絡くださいませ！