#設定ファイルの内容を定義
##整形方法
こちらのジェネレーターでファイルの整形方法を定義できます。
(例)カラーコードの表記方法(小文字 or 大文字)
#aaa or #AAA
##プロパティ記述順序
これにはジェネレーターはないので、自分で定義することになります。以下を参考にしました。
・記述順序の参考
https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json
https://github.com/csscomb/csscomb.js/blob/master/config/yandex.json
https://github.com/csscomb/csscomb.js/blob/master/config/zen.json
#.csscomb.jsonを作成
gulpfile.jsと同じ階層、もしくはプロジェクトのルートフォルダに「.csscomb.json」を置けばできます。
・整形方法
ジェネレーターで適当に作成
・記述順序
sort-orderのところに自分の好きなプロパティ順序をどんどん書いていく形になります。ここではposition関係のものだけ書いてみました。
.csscomb.json
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": false,
"element-case": "upper",
"eof-newline": true,
"leading-zero": false,
"quotes": "single",
"sort-order-fallback": "abc",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": "",
"space-after-combinator": " ",
"space-between-declarations": " ",
"space-before-opening-brace": "",
"space-after-opening-brace": " ",
"space-after-selector-delimiter": "",
"space-before-selector-delimiter": " ",
"space-before-closing-brace": " ",
"strip-spaces": true,
"tab-size": true,
"unitless-zero": true,
"vendor-prefix-align": true,
"sort-order": [ [
"position",
"top",
"right",
"bottom",
"left"
]]
}
#gulpfile.jsの書き方
var gulp = require('gulp');
var csscomb = require('gulp-csscomb');
gulp.task('styles', function() {
return gulp.src('src/styles/main.css')
.pipe(csscomb())
.pipe(gulp.dest('./build/css'));
});
特別な書き方はありません。普通にcsscombを実行するだけです。
・参考
http://increment-log.com/csscomb-setting/