CSSのプロパティ順を並び替えたり、特定のコーディング規約に則ったソースコードに整形してくれるCSScombはとても便利です。自分はこれをGruntで動かしてるのですが、しかしデフォルトの整形結果が好ましくない。
じゃあ自分で好きなように整形方法を設定しようということでメモします。
Gruntの使い方そのものは既に分かりやすい記事が沢山あるので触れません。動画ではドットインストールが分かりやすいかなと思います。
GruntのCSScombのオプションで設定ファイルを指定
まず、grunt-csscombのページを参考にオプションで設定ファイルを指定しておきます。
module.exports = function (grunt) {
//CSScombの読み込み
grunt.loadNpmTasks('grunt-csscomb');
//初期化処理
grunt.initConfig({
csscomb: {
options: {
config: 'csscomb-config.json' //設定ファイルのパスを指定
},
main: {
files: {
'style.css': ['style.css']
}
}
}
});
//タスクの登録
grunt.registerTask('css-comb', ['csscomb']);
}CSSCombの設定ファイルはjsonで記述します。ファイル名は好きな名前で大丈夫で、上の指定はルートに「csscomb-config.json」という設定ファイルを置いた場合になります。例えば”config”というフォルダに設定ファイルを置いた場合は「config: ‘config/csscomb-config.json’」になります。
任意の設定ファイルを使う
CSScombで任意の設定ファイルを用意する方法は主に3つあります。
- 既に作られた設定ファイルを使う
- ドキュメントを見て一から記述していく
- ジェネレータを使う
既に作られたファイルを使う
CSScombには既に3つの設定ファイルが用意されていますので、これを使えばすぐに別の整形方法に変えられます。「csscomb.json」「yandex.json」「zen.json」とあるので、それぞれを試して希望の整形になっていたらそのまま使っちゃいましょう。
ドキュメントを見て一から記述してく
大変ですが、こちらのドキュメントを見ながら設定ファイルを一から記述していく方法です。上で挙げた設定ファイルを参考にしながら作ると良いかもしれません。
ただ、もっと簡単に設定ファイルを作成する方法が用意されています。せっかくなのでこちらを使ってみましょう。
ジェネレータを使う
CSScombの公式ページには設定ファイルのジェネレータがあります。整形方法を1つずつ選んでいく方式です。
例えばこんな感じでどちらかをクリックして選択していきます。（2014年9月現在、選択は全部で24個です）
（上の画像では「Remove empty rulesets」と書いてありますが、正しくは「Add empty rulesets」だと思います…、スペースが追加されたので。一つ目の選択肢だけ単語間違いがあるようです）
黄色くハイライトされた部分が手を加える箇所で、「Leave code untouched」はコードに手を加えないという意味になります。
そして全て選択し終わるとソースコードが吐出されるので、これを先ほど用意した設定ファイルに貼り付けましょう。
CSSプロパティの並び順とかその他の設定はジェネレータで生成できない点に注意です。
CSScombを実行
Gruntfile.jsで指定した設定ファイルのパスが間違っていなければ、実行するとこのように表示されます。
D:\Web\projects>grunt css-comb
Running "csscomb:main" (csscomb) task
>> Using custom config file "csscomb-config.json"...
>> Sorting file "style.css"...
Done, without errors.3行目の部分で「Using custom config file」と出ていますね。このようにカスタムファイルを使ってるよ～とメッセージが出ていれば成功です。
最後におまけで、自分が今暫定的に使っている設定ファイルを載せておきます。ジェネレータで生成した結果に、公式の整形ファイルからプロパティの並び順をコピーした内容です。