このブログに載せるWebアプリを，最近はVue.jsでつくることが多い。
簡単なWebアプリなら単一のHTMLファイルでサクッとつくってしまうのだが，コードが非常に長くなる場合もあって，そんなときはvue-cliを使って複数ファイル構成でつくったりする。
当然，ビルドするとindex.htmlを始め，色々なファイル（CSS，JavaScript）が生成される。
そんなときに思うのが
「生成されたこれらのファイルの相対パスを保ったままブログサーバに載せても動くんだろうけど，後で記事を削除したり編集したりした場合にCSSファイルやJavaScriptファイルがゴミとして残らないようにしたい」
ということ。
要は、できるだけブログの記事内でソースコード全体（HTML/CSS/JavaScript）が完結して欲しいのだ。
単一HTMLで作成したツールの場合はこれが簡単にできるけれど，複数ファイル構成の場合は単一HTMLに変換する必要がある。
良さげなツールがあった
複数のファイルを１つのHTMLファイルにまとめる手段として使えそうだと思って試したのがnpmモジュールの html-inline。
使うには以下の手順を行う。
次のコマンドでグローバル環境にインストールする。
npm i -g html-inlinevue-cliなどの開発環境でソースコードをビルドし，index.htmlやCSS，JavaScriptを生成する。
index.htmlファイルが生成されたフォルダ内をコンソール（コマンドプロンプトなど）で開き，次のコマンドを実行する。
html-inline -i index.html -o output.html上手くいけばindex.htmlファイルと同じフォルダにoutput.htmlファイルができているはず。このoutput.htmlファイル内に，必要なCSSやJavaScriptやPNG画像がまとめて記載されているはずだ。
しかし問題が
生成されたoutput.htmlファイルのみをデスクトップとかどこかテケトーな場所に移動してブラウザで確認してみると・・・
おそらく上手く動かない場合が多いのではないか。
html-inlineモジュールの動作を調べて分かったけれど，どうやらこのnpmモジュールはサイト表示の高速化でよく使われるlink要素の rel=”preload” に対応していないようだ。
対策
preloadが付いているlinkタグをHTMLから削除してからhtml-inlineモジュールを実行すると上手くいく。
こういう手作業が面倒なときは，gulpなどで一連の作業をタスクとして登録して後からワンタッチで実行できるようにしておくとよいかも。