環境: Ubuntu 16.04.2 LTS
Sphinx の html 文書を用意
使用されている CSS のみ抽出したり、整形したりする対象として、Sphinx の html 文書を用意します。
パッケージインストール
$ sudo apt install python3-sphinx
$ sudo apt install make
Sphinx 文書を作成
$ mkdir sphinx
$ cd sphinx/
$ sphinx-quickstart
$ make html
$ ls -la build/html/
total 40
drwxrwxr-x 4 ubuntu ubuntu 4096 Aug 13 16:47 .
drwxrwxr-x 4 ubuntu ubuntu 4096 Aug 13 16:47 ..
-rw-rw-r-- 1 ubuntu ubuntu 230 Aug 13 16:47 .buildinfo
-rw-rw-r-- 1 ubuntu ubuntu 2541 Aug 13 16:47 genindex.html
-rw-rw-r-- 1 ubuntu ubuntu 3770 Aug 13 16:47 index.html
-rw-rw-r-- 1 ubuntu ubuntu 197 Aug 13 16:47 objects.inv
-rw-rw-r-- 1 ubuntu ubuntu 2943 Aug 13 16:47 search.html
-rw-rw-r-- 1 ubuntu ubuntu 240 Aug 13 16:47 searchindex.js
drwxrwxr-x 2 ubuntu ubuntu 4096 Aug 13 16:47 _sources
drwxrwxr-x 2 ubuntu ubuntu 4096 Aug 13 16:47 _static
作成した Sphinx 文書の index.html ファイルで使用している CSS ファイルを確認
$ head -n 20 build/html/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to aaa’s documentation! — aaa ccc documentation</title>
<link rel="stylesheet" href="_static/alabaster.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: './',
VERSION: 'ccc',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
以下の CSS ファイルを使っていました。
- _static/alabaster.css
- _static/pygments.css
CSS ファイルのサイズを確認
$ ls -l build/html/_static/alabaster.css build/html/_static/pygments.css
-rw-rw-r-- 1 ubuntu ubuntu 9220 Aug 13 16:47 build/html/_static/alabaster.css
-rw-rw-r-- 1 ubuntu ubuntu 4149 Aug 13 16:47 build/html/_static/pygments.css
2つの CSS ファイルをあわせて 13KBytes 程度です。
これらの CSS ファイルには実際には使用されていない CSS やコメントも含まれています。
使用されている CSS のみ抽出
UnCSS を使って、使用されている CSS のみ抽出します。
パッケージインストール
$ sudo apt install nodejs
$ sudo apt install npm
node という名前で nodejs を使えるようにします
$ sudo update-alternatives --install /usr/bin/node node /usr/bin/nodejs 10
$ ls -la /usr/bin/node
lrwxrwxrwx 1 root root 22 Aug 13 17:14 /usr/bin/node -> /etc/alternatives/node
$ ls -la /etc/alternatives/node
lrwxrwxrwx 1 root root 15 Aug 13 17:14 /etc/alternatives/node -> /usr/bin/nodejs
UnCSS インストール
$ sudo npm install -g uncss
使用されている CSS のみ抽出
$ uncss build/html/index.html > build/html/_static/res.css
使用されている CSS のみ抽出され、サイズが 13KBytes 程度から 6KBytes 程度に減りました。
$ ls -l build/html/_static/res.css
-rw-rw-r-- 1 ubuntu ubuntu 5943 Aug 13 18:05 build/html/_static/res.css
CSS ファイルを整形
res.css のファイルの最後は以下のようになっていました。
$ tail build/html/_static/res.css
/* misc. */
/* Make nested-list/multi-paragraph items look better in Releases changelog
* pages. Without this, docutils' magical list fuckery causes inconsistent
* formatting between different release sub-lists.
*/
/* Hide fugly table cell borders in ..bibliography:: directive output */
/*** uncss> filename: build/html/_static/pygments.css ***/ /* Comment */ /* Error */ /* Keyword */ /* Operator */ /* Comment.Hashbang */ /* Comment.Multiline */ /* Comment.Preproc */ /* Comment.PreprocFile */ /* Comment.Single */ /* Comment.Special */ /* Generic.Deleted */ /* Generic.Emph */ /* Generic.Error */ /* Generic.Heading */ /* Generic.Inserted */ /* Generic.Output */ /* Generic.Prompt */ /* Generic.Strong */ /* Generic.Subheading */ /* Generic.Traceback */ /* Keyword.Constant */ /* Keyword.Declaration */ /* Keyword.Namespace */ /* Keyword.Pseudo */ /* Keyword.Reserved */ /* Keyword.Type */ /* Literal.Number */ /* Literal.String */ /* Name.Attribute */ /* Name.Builtin */ /* Name.Class */ /* Name.Constant */ /* Name.Decorator */ /* Name.Entity */ /* Name.Exception */ /* Name.Function */ /* Name.Label */ /* Name.Namespace */ /* Name.Tag */ /* Name.Variable */ /* Operator.Word */ /* Text.Whitespace */ /* Literal.Number.Bin */ /* Literal.Number.Float */ /* Literal.Number.Hex */ /* Literal.Number.Integer */ /* Literal.Number.Oct */ /* Literal.String.Backtick */ /* Literal.String.Char */ /* Literal.String.Doc */ /* Literal.String.Double */ /* Literal.String.Escape */ /* Literal.String.Heredoc */ /* Literal.String.Interpol */ /* Literal.String.Other */ /* Literal.String.Regex */ /* Literal.String.Single */ /* Literal.String.Symbol */ /* Name.Builtin.Pseudo */ /* Name.Variable.Class */ /* Name.Variable.Global */ /* Name.Variable.Instance */ /* Literal.Number.Integer.Long */
改行されておらず、可読性が低いので整形します。
パッケージインストール
$ sudo apt install python3-cssutils
以下のように Python スクリプト作成
$ cat test.py
#!/usr/bin/env python3
import cssutils
sheet = cssutils.parseFile('build/html/_static/res.css')
print(sheet.cssText.decode())
CSS ファイルを整形
$ ./test.py > build/html/_static/res2.css
res2.css の中身を見ると、整形されていることを確認できます。
