autoprefixerはCLIで使う

スポンサーリンク

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-cliautoprefixer をインストールします。

$ 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オプションもあるので、外部に出しておくとメンテナンスしやすいですね。


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。