Jump to the content

autoprefixerはCLIで使う

npm

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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×