Pythonのcss_html_js_minifyパッケージを使うと、簡単にCSS、JavaScript、HTMLの圧縮ツールが作成できます。
サンプルコードを使って作成してみましょう。
（本来、自分で作るもんじゃありません。こうやってPythonは作っていきますよという一例です。）
css_html_js_minifyのダウンロード
pipコマンドを使って、Python環境にcss_html_js_minifyパッケージをダウンロードします。
コマンドはスーパーユーザで実行してください。
pip install –U css_html_js_minifyソースコードは簡単 ！
いきなりですが、ソースコードを見てましょう。
サンプルコードは、WordPressのパフォーマンス向上のために、CSSの遅延読み込みを行うためのcssファイルを作成し、それを圧縮しています。
#!/usr/bin/env python
import os
import requests
from css_html_js_minify import process_single_html_file, process_single_js_file, process_single_css_file, html_minify, js_minify, css_minify
encoding = 'utf-8'
url_base = 'https://●●●/wp-content/'
url_plugins = url_base + 'plugins/'
url_theme_parent = url_base + 'themes/xeory_base/'
url_theme_custom = url_base + 'themes/xeory_base_child/'
out_file = './late-read.css'
list = [ \
url_theme_parent + 'base.css', \
url_theme_parent + 'style.css?ver=4.8', \
url_theme_custom + 'style.css?ver=4.8', \
url_plugins + 'contact-form-7/includes/css/styles.css', \
url_plugins + 'wp-external-links/public/css/wpel.css?ver=2.1.3', \
url_theme_custom + 'js/prism.css?ver=4.8', \
url_plugins + 'easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.css?ver=1.6', \
url_plugins + 'jetpack/css/jetpack.css?ver=5.1'
]
if os.path.exists(out_file):
os.remove(out_file)
f_add = open(out_file + '.tmp', 'a', encoding=encoding)
for css in list:
res = requests.get(css)
res.encoding = res.apparent_encoding
# fw = open(css)
# f_add.write(fw.read())
f_add.write(res.text)
# fw.close()
f_add.close()
os.rename(out_file + '.tmp', out_file)
process_single_css_file(out_file, overwrite=False)3行目
import requests は、httpリクエストのパッケージです。ここでは、WebサイトにアップされているCSSファイルをhttpリクエストで取得、収集するのに使います。
4行目
ダウンロードしたcss_js_html_minifyパッケージをインポートします。
6行目
encoding = 'utf-8' は、Windows環境のための文字コードエンコーディングです。Windows環境で無理やりutf-8にすることで、LinuxやMac環境と同じ結果になるようにします。
8行目から23行目
取得するcssファイルのリストを定義しています。ここでは、WordPressで作成したWebサイトのCSSファイルを集めます。
このリスト定義を丸ごと外部ファイルから読み込むようにしてもいいでしょう。ツールでの外部ファイル化をするメリットがないのでここでは直接書き込んでいます。
25、26行目
結果ファイルのクリーンアップです。
30行目から40行目
httpリクエストでcssファイルの内容を取得してtmpファイルに書き込みます。それを、定義したすべてのcssファイルについて行い、1つのtmpファイルに集約して、最後にtmpファイルを結果ファイルに反映させます。
実際は、tmpファイル名を出力ファイル名に変更しているだけです。
for文処理内のコメント化された部分は、httpリクエストではなく、ローカルファイルからcssファイルを読み込んで取得する場合の処理です。一応残しています。
42行目
process_single_css_file(out_file, overwrite=False) でcssファイルの圧縮を行います。
ファイル圧縮はこの1行だけです。かんたんですね？
結果ファイルは、***.min.cssになります。
JavaScriptファイルだったら process_single_js_file()、htmlファイルだったら process_single_html_file() です。
