カテゴリー
サイズの大きいhtmlファイルをminifyするときに便利なSedコマンドの使い道
※ 当ページには【広告/PR】を含む場合があります。
2020/04/15
2022/09/30
sedコマンドの基本的なオプション
sedBusybox--help
-e [script] / --expression=[script]:
実行するコマンドとして script を追加する
-f [script-file] / --file=[script-file]:
実行するコマンドとして script-file の内容を追加する
-i[SUFFIX] / --in-place[=SUFFIX]:
ファイルをインプレース処理で編集する (SUFFIX 指定時はバックアップを取る)
-eminify後のhtmlファイルでもsedを使うというモチベーション
外部のリソースをindex.htmlに埋め込んでコードにインライン化することで、ウェブページの読み込みオーバーヘッド時間を軽減させるAngular/Vuejs/Reactjsなどでビルドしてindex.html生成 --> minifyでhtmlを最適化・軽量化 --> sedで必要なリソースをインライン化ビルド後のindex.htmlをコマンドでminifyしてくれるライブラリ ~ html-minifier
index.html
<!DOCTYPE html>
<!-- 互換性とアクセシビリティのために<html>タグの「lang=""」属性をセット。
HTMLタグのほかの属性については下記ページを参考に。
参考: http://www.w3.org/TR/html-markup/global-attributes.html -->
<html>
<head>
<!-- IE8+に対して「IE=edge」と指定することで、
利用できる最も互換性の高い最新のエンジンを使用するよう指示できます。
参考: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- パフォーマンスのために使用する文字のエンコーディングを記述。
最初のオプションとしてHTTPヘッダで指定し、
HTTPヘッダとmetaタグでの指定が同じであることを確認。
参考: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->
<meta charset="utf-8">
<!-- ページのタイトルを記述 -->
<title></title>
<!-- Scontent属性にページの紹介文を記述 -->
<meta name="description" content="">
<!-- content属性にページの著者情報を記述 -->
<meta name="author" content="">
<!-- モバイル端末への対応、
ページをビューポートの幅に合わせてレンダリング（Android, iOS6以降）
ズームを許可しない設定「user-scalable=no」は加えない -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- スタイルシートはできるだけ早くレンダリングされるため、
HTMLドキュメントの上の方に記述
href属性にスタイルシートファイルのURIを記述 -->
<link rel="stylesheet" href="">
<!-- IE8以下用に2つのスクリプトを記述
html5shiv.js: IE8以下にHTML5の要素を認識するようにさせる
respond.js: IE8以下にMedia Queriesの代替え機能を提供 -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- href属性にファビコンファイルのURIを記述 -->
<link rel="shortcut icon" href="">
<!-- コメントアウトしてあるコードは、iOS/Android用のアイコン指定 -->
<!--
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
-->
<!-- スクリプトでブロッキングを起こさないものはここに記述
可能であれば「async（文書の読み込みが完了した時点でスクリプトを実行）」を使用
例: <script src="" async></script> -->
</head>
<body>
<!-- コンテンツを配置 -->
<!-- スクリプトでブロッキングを起こすものはここに記述
ブロッキングを起こす原因としては、
CSSのセレクタ操作（IE）、負荷の高いDOM操作、多数のスクリプトなど -->
<!-- SCRIPTS -->
<!-- 例: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
</body>
</html>
<!doctypehtml><meta content="IE=edge"http-equiv=X-UA-Compatible><meta charset=utf-8><title></title><meta content=""name=description><meta content=""name=author><meta content="width=device-width,initial-scale=1"name=viewport><link href=""rel=stylesheet><!--[if lt IE 9]><script src=//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js></script><script src=//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js></script><![endif]--><link href=""rel="shortcut icon">
Original size: 2,084. Minified size: 487. Savings: 1,597 (76.63%).
<link rel="stylesheet" href="/styles.css">styles.csssedsedコマンドを利用したリソースファイルのインライン化
htmlファイルをsedで書き換える際の注意点
-e{任意文字}****{任意文字}****{任意文字}
#tacosをtomatoに置換
$ echo 'tacos tacos tacos' | sed -e 's/tacos/tomato/g'
tomato tomato tomato
$ echo 'tacos tacos tacos' | sed -e 's+tacos+tomato+g'
tomato tomato tomato
$ echo 'tacos tacos tacos' | sed -e 'sxtacosxtomatoxg'
tomato tomato tomato
$ echo 'tacos tacos tacos' | sed -e 's%tacos%tomato%g'
tomato tomato tomato
#tacosをスラッシュ文字を含むtomato/で置換
$ echo 'tacos tacos tacos' | sed -e 's/tacos/tomato//g'
sed: -e expression #1, char 16: `s' に対するオプションが不明です
#スラッシュ文字を含むta/cosを置換させている
$ echo 'tacos tacos tacos' | sed -e 's/ta/cos/tomato/g'
sed: -e expression #1, char 10: `s' に対するオプションが不明です
#置換パターンはバックラッシュ(\)を利用すると通常の文字と認識してくれる
$ echo 'tacos tacos tacos' | sed -e 's/tacos/tomato\//g'
tomato/ tomato/ tomato/
/~
$ echo 'tacos tacos tacos' | sed -e 's~tacos~tomato/~g'
tomato/ tomato/ tomato/
~インライン化の実践例
index.htmlstyles.css
.
├── index.html
└── styles.css
index.htmlstyles.cssstyles.cssindex.htmlindex.html
<!doctypehtml><meta content="IE=edge"http-equiv=X-UA-Compatible><meta charset=utf-8><title></title><meta content=""name=description><meta content=""name=author><meta content="width=device-width,initial-scale=1"name=viewport><link href="/styles.css"rel=stylesheet><link href=""rel="shortcut icon">
styles.css
body,html{width:100%;height:100%;margin:0;padding:0;overflow:auto}body{font-size:62.5%}body .wrapper{min-height:100vh;position:relative;padding-top:60px;padding-bottom:270px;box-sizing:border-box}
postbuild.shindex.html
#!/bin/bash
#Read inline Css
css_inline_text=$(cat ./styles.css)
css_inline_text=$(echo "<style>${css_inline_text}</style>")
#Replace a link element into an inline css text
sed -i -e "s~<link href=\"/styles.css\"rel=stylesheet>~$css_inline_text~" ./index.html
$ chmod +x postbuild.sh && ./postbuild.sh
#OR
$ bash postbuild.sh
<!doctypehtml><meta content="IE=edge"http-equiv=X-UA-Compatible><meta charset=utf-8><title></title><meta content=""name=description><meta content=""name=author><meta content="width=device-width,initial-scale=1"name=viewport><style>body,html{width:100%;height:100%;margin:0;padding:0;overflow:auto}body{font-size:62.5%}body .wrapper{min-height:100vh;position:relative;padding-top:60px;padding-bottom:270px;box-sizing:border-box}</style><link href=""rel="shortcut icon">
まとめ
参照サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー