シンプルなCSS整形ツールのまとめ (調査中)

Sass/LESS/Stylusのメリットとして、ベンダープリフィクスを付けてくれるというのがあります。ただ、それだけをしたいならちょっと大仰なので、もう少しシンプルなツールを探しています。それこそ、正規表現で置換するだけでも構わないのですが、日々変わるベンダー対応を追い続けるのは、かなり面倒。今、気づいているものを、ひとまず並べてみます。

他にもオススメあれば、ぜひコメント下さい!

※追記 (2014/5/6) : gulp-autoprefixerを追加。これが決定版かと思います。

gulpjsで

gulp-autoprefixerというプラグインを使うと、

gulp.src('./css/*.css')
  .pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"))
  .pipe(gulp.dest('./dist/'));

みたいに書くだけで、よしなに計らってくれます。すばらしい。

ブラウザ上でJavaScriptを使って

cssFx

cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers.
http://imsky.github.io/cssFx/

###Prefix free
Break free from CSS vendor prefix hell!
http://leaverou.github.io/prefixfree/

Webサービス

prefixr

http://prefixr.com
コマンドラインから (API経由)
https://github.com/js-coder/Prefixr-CL
※node.jsのバージョンが0.8じゃないとインストールに失敗する...

Pythonで

###cssprefixer
https://github.com/myfreeweb/cssprefixer

インストール方法

$ brew install python
$ easy_install pip
$ sudo pip install cssutils
$ sudo pip install cssprefixer

使い方

$ cssprefixer my1.css my2.css --minify > result.css