案件に取り掛かるときに一番めんどくさいのが開発環境の構築です。
いつも過去案件の流用ばかりでしたが、ちゃんとしたベースがあった方が良いかなと思い作ってみました。
一般的なペライチのLPを想定しているので、無駄がないシンプルな開発環境になっているかと思います。
「さくっとWebサイトを作りたいけど、環境構築がめんどくさい！」という方はぜひ使っていただけると嬉しいです。
※画像の圧縮やテンプレートエンジンを使いたい場合は、別途カスタマイズが必要になります。
Gulp + webpack
僕は今までずっとGulpを使っていたのですが、最近webpackの方が人気らしいとのことで、最初はwebpackのみで作ろうとしていました。
しかし、webpackはあくまでJavaScriptのモジュールバンドラーですので、これでSassのコンパイルなどの機能も持たせようとすると、一旦jsを噛ましてやらないといけなかったり、コードが複雑（やっていることはシンプルなのに！）になってしまったり、と何かと制限が多くなってしまいました。
そこで、SassはGulp、JavaScriptはwebpack、といった具合に役割を分けた構成にした方が結果シンプルになり、今後カスタマイズするにしても汎用性が高そうだったので、「Gulp + webpack」という構成に落ち着きました。
Reset CSS について
今回 Reset CSS には Eric Meyerさんのものを採用しています。
古いから使えない、という声もありますが、正直個人的には他のどの Reset CSS よりも一番使い勝手が良いと思っています。
何故かというと、実は完全にスタイルをリセットしてくれる Reset CSS が他にほとんど無いからです。
destyle.css とか sanitize.css とかいろんな Reset CSS がありますが、どれも微妙にスタイルを残しているものばかり。
すべてのスタイルをリセットすることを謳っているものでさえ、
h1〜h6タグの太字は残していたり……
line-heightを1.5にしてたり……
正直デザインによってはh1でも細字にすることはあるし、line-heightもその都度調整することがほとんどです。
よって、記述自体は古いですが一番汎用性が高いという意味で、Eric Meyerさんの Reset CSS を入れています。
（もし新しいやつでおすすめがあれば教えてほしいです笑）
コメント