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

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
python image

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

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

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() になります。

 

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!