HTML ファイル内に CSS や JS をインライン挿入する「html-inline」

普段は <link href="styles.css"> とか <script src="scripts.js"></script> とか書いて、HTML から外部ファイルを読み込んでいるけど、とある理由でインラインに CSS や JS のコードを置きたかった。

そんな時に使えるのが html-inline という npm パッケージ。

• html-inline

これを使うと、CSS や JS ファイルの他、画像ファイルなども DataURL に変換して HTML ファイル中にインライン展開してくれる。

# パッケージをローカルインストール
$ npm install -D html-inline

# ローカルインストールした html-inline コマンドを叩く
# index.html のコードをインライン化して index-inline.html を生成する
$ npm run html-inline index.html -o index-inline.html

コレで、

• <link href="styles.css"> は <style>body { color: red; }</style> のように、
• <script src="scripts.js"></script> は <script>console.log('hoge');</script> のように、

HTML 中に CSS・JS ファイルの内容が展開される。

サクッとコードをインライン化できるのでオススメ。