npmパッケージのAPIを学ぶメモ第2弾。
今回は「autoprefixer」です！
autoprefixer
CSSに自動的にベンダープレフィックスをつけるモジュールです。
知ってる人にはもうおなじみですね！ gulpなどのタスクランナーで使ってるひとが多いのではないでしょうか。
autoprefixerの例をあげてみましょう。
a {
display: flex;
}
flexboxも、autoprefixerを通すと、
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
各ベンダープレフィックスを付与してくれます。
使い方
さて、今回はautoprefixerをCLIで実行します。
ちょっと前まで単独で使えたんですけど、今は postcss のプラグインとしての位置づけとされていて、
postcss-cli と一緒に使います。
※poscss-cliは、postcssをCLIで動かすパッケージです。
まず、postcss-cli とautoprefixer をインストールします。
$ npm install --global postcss-cli autoprefixer
で、基本は次のように postcss コマンドで実行します。
$ postcss [options] -o output-file input-file
この時、autoprefixerをプラグインとして使うようにオプションを指定します。
$ postcss --use autoprefixer *.css -d build/
-d オプションはディレクトリの指定です。
これでautoprefixerを実行することが出来ます。
もちろん、autoprefixerのオプション設定もできます。
ぼくはこんな感じで使ってます。
$ postcss --use autoprefixer --autoprefixer.browsers 'last 2 versions' dist/css/style.css -d dist/css/
postcssの設定をjsonに記述できるconfigオプションもあるので、外部に出しておくとメンテナンスしやすいですね。