Help us understand the problem. What is going on with this article?

標準的なウェブページ作成用のボイラープレート最終版

まえがき

ウェブページを構成する要素や機能は複雑化の一途をたどっていますが、フロントエンド視点からすると最終的には HTML/CSS/JavaScript/画像ファイルが生成できれば良いわけです。

React.js や Vue.js などで SPA/SSR 作るよーとなると、素の環境で作るのはつらみがあるので専用の開発環境が必要になりますが、世のウェブサイトはそこまでオーバースペックな要件は不要な、キャンペーン用の LP とか、静的な構成メインのウェブサイトなどがあります。

こういうのを作るとき、毎回一から準備するのは面倒だし、また、素の HTML、CSS、VanillaJS を書くのはモダンな環境に慣れすぎた身にとってしんどいものです。

そんなで 自分の手間を省くための Boilerplate を gulp.js で作ったり、npm-scripts で CLI 頑張ってみたりしてみたのですが、最終的に Node.js を書くことになりました。

static-web-boilerplate

https://github.com/okamoai/static-website-boilerplate

構成

ファイルタイプ ジェネレータ 採用理由
HTML Pug テンプレートやコンポーネント単位でファイル分割して管理できる。閉じタグ不要ですっきり書ける
CSS Stylus, PostCSS コンポーネント単位でファイル分割して管理できる。ほぼ Sass と同じ書式で書ける上、高機能で実質 Sass の上位互換。node-gyp 不要なのもうれしい。
JavaScript Webpack, Babel JS Bundler としては機能・パフォーマンス共に一番安定してる
Image imagemin オリジナルデータと圧縮データは分けてやっぱり管理したい
Web Font postcss-webfont(forked) Web Font 自体が CSS 主体の仕組みなので、独立したジェネレータではなく CSS の管轄としたかったので PostCSS プラグインで対応
Sprite postcss-lazysprite Web Font 同様、CSS 主体の仕組みなので CSS の管轄としたかったので spritesmith ではなく PostCSS プラグインで対応
その他ファイル cpx ジェネレータでなく、dist へファイルコピーするだけなので必要十分

特徴

Win/Mac 両方で使える

案外、世のボイラープレートは Mac 環境しか対応してないことが多いのです。

imagemin がディレクトリ階層を保持して圧縮ファイルを出力する

npm-scripts で直接 imagemin が実行できる imagemin-cli は実はディレクトリ階層を保持しないので、imagemin-cli が使えず、結局 node.js で階層処理書く必要があります。(gulp-imagemin はその辺上手くやってくれましたね)

CSS をビルドすると自動的に Web Font と CSS スプライト画像も生成する

従来の gulp.js の gulp-iconfontgulp.spritesmith は CSS 生成とリソースファイル生成を行うため、Web Font や CSS Sprite のタスクを実行してからでないと CSS のビルドが正しく処理されません。つまり gulp のタスクに依存関係が発生していました。

このボイラープレートは PostCSS のプラグインで動作しているため、CSS をビルドすると自動的に Web Font と CSS スプライト画像も生成します。
Web Font や CSS Sprite の手法は元々 CSS 側のテクニックなので、管轄を CSS の中で完結させたかった意図があります。

Watch 時に Pug の extends/include や Stylus の import 対象を検知してビルドする

例えば Pug の extends 対象が複数あり、そのうち片方のファイルでしか include されていないファイルがあるとします。
Watch 時に そのファイルをを更新したとき、include や extends の対象となっているファイルのみがビルドされることを期待します。

関係ないページまでビルドすると当然処理が重たくなり、ローカルサーバへの反応が悪くなるからです。

できれば更新が必要なファイルだけビルド対象としたいところですが、このファイルの依存状態を判断してビルドするのに emitty を使って実現しています。

最後に

この手のベーシックな HTML/CSS/JavaScript/リソースファイルの構成のボイラープレートを今まで gulp.js, npm-scripts ベースでいろいろ作ってきましたが、行き着くとまで来た感があって、自分の中ではこれが最終系かなくらいに思ってます。

もし良かったら使ってみてください。IssuePull Request も歓迎してます!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした