一つのHTMLファイルに画像とCSSを統合する
はじめに
一時的に使うペライチのページなのに、画像ファイルやCSS,JSファイルなんかもセットで管理しなきゃいけないのが面倒なときってありますよね。
通常はそれぞれのファイルを別々のほうが管理しやすいというメリットがありますが、
メンテナンスページなどの一時的につかうペライチのページなんかは、全部統合しちゃったほうが取り回しがいいときがあります。
そんなときに便利なのがNodeパッケージの「Inliner」です。
HTMLファイル、CSSファイル、JSファイル、画像ファイルを、一つのHTMLファイルに統合してくれます。
結論からいうと
- nodeパッケージのinlinerを使う
- *.min.jsや*.min.cssの外部読込がある場合は「-m」オプションをつける
インストール方法
- Node.jsをインストールしていない場合はインストールする。
- npmコマンドでグローバル領域にinlinerをインストールします。
> npm install -g inliner
使い方
ヘルプをみる
> inliner --help
変換する
> inliner 変換前のHTMLファイルパス > 変換後のHTMLファイルパス
例）
> inliner target.html > result.html
デフォルトでは圧縮が行われます。
それから、
-mをつけないとmin.jsやmin.cssファイルがhtmlファイルに統合されないので注意が必要です。
（１５分くらいハマりました。デフォルトで有効になっていてほしいです。）
例） HTML非圧縮＆圧縮外部ファイル読込
> inliner -nm target.html > result.html
まとめ
- inlinerが便利です
以上、参考になりましたら幸いです。
y.t
