PythonでCSS, JavaScript, HTMLの圧縮ツールを作る

Pythonのcss_html_js_minifyパッケージを使うと、簡単にCSS、JavaScript、HTMLの圧縮ツールが作成できます。

サンプルコードを使って作成してみましょう。

（本来、自分で作るもんじゃありません。こうやってPythonは作っていきますよという一例です。）

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

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() です。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

前の投稿

Python, Windows環境でUTF-8のファイルを読み込む

Python,「SyntaxError: Non-ASCII character」日本語対応の方法

次の投稿

css_html_js_minifyのダウンロード

ソースコードは簡単 ！

新着記事

ソースコードは簡単！