StyleStats＋αでCSSを継続的にチェックする（4/6追記あり）

2015/04/03: atsuko.a

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)
春ですね！新年度ですね！一年が過ぎるのがどんどん早くなっていく気がします…

今回はStyleStatsというツールを使ってCSSの健康チェックをしたいと思います。
それだけではつまらないので、＋αとして健康状態のデータを継続的にJSONファイルに溜めるようにしてみましょう。

ついでに出てきたファイルを使ってD3.jsでグラフを書きます。

StyleStatsってなに？

CSSとは実は非常に脆いものです。
複数人での開発や、大規模案件など、CSSは常に汚染の危機に晒されています。
似たような色をいくつも使っていたり、!importantが乱発されていたり、Sassのネストが深すぎてセレクタ祭だったり……
考えるだけで辛くなりますね。

そこで、CSSの健康チェックが簡単にできるようになるツールを導入してみたいと思います。
こちら！

Node.js謹製のStyleStatsという、CSSの状態チェックツールです。
CUIツールなので黒い画面で動きます。

インストールして、チェックしたいファイルのパスを指定しつつ実行すると↓のようなことがわかります。

ファイルのサイズ
セレクタの数
使用してる色
宣言の数
使用しているフォントのサイズ
IDセレクタの数
!important宣言の数
gzip後のサイズ

など……。
（詳しくは前述の記事を参考にしてください）

クリーンなCSSを保つ為の指標として利用できそうな数値が詰まっていますね٩(๑❛ᴗ❛๑)۶
さっそく導入してみましょう。

使ってみる

Node.jsということで、Node.jsがインストールされている前提です。（npmも）

インストールして

$ npm install -g stylestats

1	$ npm install -g stylestats

コマンドを叩くと

$ stylestats /hoge/fuga/style.css

1	$ stylestats /hoge/fuga/style.css

こんな感じにつらつらと返してくれます。
150403_02
かんたーん！
オプションで、項目を取捨選択したり、表示形式を変えたりできます。↑はテーブル形式ですね。

タスクランナー用にプラグインもあるようなので、Grunt/gulpへの導入もラクラクです。

せっかくなのでgulpのタスクに組み込んでみましょう。

ファイルに吐き出してみよう

さて、便利なStyleStatsなのですが、基本的にコマンドラインへの出力しかできません。
gulp-stylestats-report
このような、JSONファイルで書き出してくれるプラグインがあるようですが健康チェックには継続性がほしいので、
↓のようなタスクをどうにか書いてみることにしました。

StyleStatsを実行する
項目はとりあえず全部乗せ
JSON形式で取得する
ファイルに保存する
すでにファイルが存在すれば、後ろに追加する

使用したモジュール

いろいろ使います。

gulp	ないと話にならない
stylestats	ないと話にならない、その２
stylestats/lib/format	stylestatsに同梱されているデータ成形用モジュール
fs	File System ファイルを書き出したり、取得したり、いろいろ操作できる
mkdirp	mkdir -pコマンドと同じ動きをするディレクトリを作成する
path	ファイルのパスを取得したり、書き換えたり、いろいろ操作できる

基本的に全部npmで落としてきますが、「stylestats/lib/format」はstylestatsに含まれるものなので個別に操作する必要はありません。

タスクを書く

ざざざっと、こんな感じ。

// モジュール読み込み
var gulp = require('gulp');
var stylestats = require('stylestats');
var format = require('stylestats/lib/format');
var fs = require('fs');
var mkdirp = require('mkdirp');
var path = require("path");

gulp.task('stylestats', function(){
    var stylestatsConfig = { // オプションの指定もできるよ
        // size: false
    };

    // 1.StyleStatsを実行してデータを変数に入れる
    var stats = new stylestats('./hoge/fuga/style.css', stylestatsConfig);

    // 2.取得したデータを出力用に整形
    stats.parse(function(error, result) {
        if(error) console.log(chalk.red(' [ERROR] ' + error.message));

        // 3.整形したデータを更にJSON形式にする
        var dataFormat = new format(result);
        dataFormat.toJSON(function(json) {

            var fileDir = 'stylestats'; // ファイルを吐き出したいディレクトリ
            var fileName = 'stats.json'; // ファイルの名前
            var nameData = path.join(process.cwd(), fileDir, fileName); // ディレクトリとファイル名を連結しておく

            // 4.ディレクトリ作るよ
            mkdirp(fileDir, function (error) {
                var data = []; // データ保存用変数

                // 5.すでにファイルがあれば、データを取得してオブジェクトに変換しつつdataに入れる
                if(path.existsSync(nameData)) {
                    data = JSON.parse(fs.readFileSync(nameData, {
                        encoding: 'utf8'
                    }));
                }

                data.push(JSON.parse(json)); // JSONに整形したデータをdataに連結

                // 6.指定のファイル名でファイルを書き出す
                fs.writeFileSync(nameData, JSON.stringify(data));
            });
        });
    });
});

// モジュール読み込み

var gulp = require('gulp');

var stylestats = require('stylestats');

var format = require('stylestats/lib/format');

var fs = require('fs');

var mkdirp = require('mkdirp');

var path = require("path");

gulp.task('stylestats', function(){

var stylestatsConfig = { // オプションの指定もできるよ

// size: false

};

// 1.StyleStatsを実行してデータを変数に入れる

var stats = new stylestats('./hoge/fuga/style.css', stylestatsConfig);

// 2.取得したデータを出力用に整形

stats.parse(function(error, result) {

if(error) console.log(chalk.red(' [ERROR] ' + error.message));

// 3.整形したデータを更にJSON形式にする

var dataFormat = new format(result);

dataFormat.toJSON(function(json) {

var fileDir = 'stylestats'; // ファイルを吐き出したいディレクトリ

var fileName = 'stats.json'; // ファイルの名前

var nameData = path.join(process.cwd(), fileDir, fileName); // ディレクトリとファイル名を連結しておく

// 4.ディレクトリ作るよ

mkdirp(fileDir, function (error) {

var data = []; // データ保存用変数

// 5.すでにファイルがあれば、データを取得してオブジェクトに変換しつつdataに入れる

if(path.existsSync(nameData)) {

data = JSON.parse(fs.readFileSync(nameData, {

encoding: 'utf8'

}));

}

data.push(JSON.parse(json)); // JSONに整形したデータをdataに連結

// 6.指定のファイル名でファイルを書き出す

fs.writeFileSync(nameData, JSON.stringify(data));

});

タスクを実行すると、こんな感じのJSONファイルが生成されます。

// ./stylestats/stats.json
    {
        "dataUriSize": 0, 
        "floatProperties": 29, 
        "gzippedSize": 5275, 
        "idSelectors": 0, 
        "importantKeywords": 0, 
        "javascriptSpecificSelectors": 0, 
        "lowestCohesion": 15, 
        "lowestCohesionSelector": [
            ".btn2_medium1"
        ], 
        "mediaQueries": 0, 
        "mostIdentifier": 6, 
        "mostIdentifierSelector": ".accountWrap .accountTabel thead + tbody tr:first-child > *", 
        // ...以下データが続く
    }

// ./stylestats/stats.json

{

"dataUriSize": 0,

"floatProperties": 29,

"gzippedSize": 5275,

"idSelectors": 0,

"importantKeywords": 0,

"javascriptSpecificSelectors": 0,

"lowestCohesion": 15,

"lowestCohesionSelector": [

".btn2_medium1"

"mediaQueries": 0,

"mostIdentifier": 6,

"mostIdentifierSelector": ".accountWrap .accountTabel thead + tbody tr:first-child > *",

// ...以下データが続く

}

タスクを実行するたびに後ろにデータが連結されていきます。やったね！╭( ･ㅂ･)و ̑̑ ｸﾞｯ
今回はgulpのタスクに入れましたが、ほぼNode.jsのモジュールで動いているのでGruntでも動くと思います（多分）

無尽蔵に貯め続けるのもアレなので、上限を設定し古いものから消していく処理も入れるといいかもしれません。

おまけ：D3.jsでグラフをつくろう

最後に生成されたJSONデータを使ってグラフを生成してみます。
グラフ生成にはD3.jsを使います。
D3.jsについてはこのブログでも何度か取り上げているので、そちらを参考に。

今回は、JSONデータから日付といくつかの項目を拾って折れ線グラフを書いてみましょう。
JSONファイルを生成したフォルダに、描画用のHTMLとJSを設置します。

折れ線グラフの書き方はこちらを参考に…

150403_03
横軸がStyleStats実行の日付、縦軸が数値になっています。
全ての項目を一つにまとめたので、下のほうが大変なことになっていますが…

Ajax通信の関係でローカル環境で見るには仮想サーバが必要ですが、それもgulpのタスクに入れておけば問題なさそうです。

まとめ

簡単ではありますが、CSSのメンテナンスに使えそうなグラフを作ることが出来ました！
CSS Lint等と合わせて使うと更によいのではないでしょうか。

繰り返しになりますが、CSSは非情に脆いです。
しかしUI面に関して全面的に責任を持っています。
致命的なエラーが出ることが早々無い分、細かいバッドプラクティスの積み重ねによってCSSはすぐに死にます。

なんでCSSすぐ死んでしまうん

そうならないように、定期的なメンテナンスで健康なCSSを保っていきましょう。
それでは今日はこのへんで！

2015/04/06　追記

この記事の公開後、StyleStats作者の@t32kさんからTwitterでコメントを頂きました。ありがとうございますヽ(=´▽=)ﾉ

おーうれしい。けど、stylestats -f json foo.css > bar.json` で保存できるよ。StyleStats＋αでCSSを継続的にチェックする | アライドアーキテクツのクリエイターブログ http://t.co/aWBZMAO21U

— Koji ISHIMOTO (@t32k) 2015, 4月 4

事前に連絡させていただこうかと思ったのですが、Twitterのアカウントが無いので直接ですみません

今回はgulpのタスクに入れたかったことと、データを追記したかったこともありこのような形にしてみました。
Terminal上で、StyleStatsの実行→ファイルに保存は頂いたコメントの通りが一番楽チンですね。

Category： CSS ,JavaScript ,コーディング ,タスクランナー

CREATOR BLOG

StyleStats＋αでCSSを継続的にチェックする（4/6追記あり）

もくじ

StyleStatsってなに？

使ってみる

ファイルに吐き出してみよう

使用したモジュール

タスクを書く

おまけ：D3.jsでグラフをつくろう

まとめ

2015/04/06　追記

この記事を書いた人

Recent Entry

Category

Archive

Link

もくじ

StyleStatsってなに？

使ってみる

ファイルに吐き出してみよう

使用したモジュール

タスクを書く

おまけ：D3.jsでグラフをつくろう

まとめ

2015/04/06 追記

この記事を書いた人

関連する記事

Recent Entry

Category

Archive

Link

2015/04/06　追記