ベンダープレフィックスを自動で追加する方法｜autoprefixer・postcss-cli【npm】

今回は、プロジェクト内でnpmのパッケージ「postcss-cli」と「autoprefixer」を利用し、CSSにベンダープレフィックスを自動で付与する例となります。

また、npmはすでにインストールされている前提としています。npmのインストールやコマンドについては以下のリンク先を参考にしてみてください。

npmのコマンドまとめ｜パッケージのインストール・削除・確認など【Node.js】

【npm】postcss-cli・autoprefixerを利用しベンダープレフィックスを自動で追加する例

postcss-cliとautoprefixerについて

「postcss-cli」は、CSSを変換できるツール「PostCSS」をコマンドから利用できるパッケージとなり、「autoprefixer」は、そのPostCSSでベンダープレフィックスを追加できるプラグインとなります。

プロジェクト内にpostcss-cliとautoprefixerをインストール

postcss-cliとautoprefixerをインストールする方法となります。

package.jsonを作成

※すでにプロジェクト内でnpmを利用しpackage.jsonがある場合には、この手順は飛ばします。

まず、プロジェクト内でnpmを配置するディレクトリ（npmのルート）にcdコマンドで移動します。

そして、以下のコマンドでpackage.jsonを作成します。

npm init -y

postcss-cliとautoprefixerをインストール

次に、プロジェクト内のnpmのルートディレクトリで、以下のコマンドを実行しpostcss-cliとautoprefixerをインストールします。

npm install postcss-cli autoprefixer -D

CSSにベンダープレフィックスを自動で付与

今回の例では、CSSディレクトリ内にあるstyle.cssファイルが更新されたら、buildディレクトリ内にベンダープレフィックスを追加したstyle.cssファイルを出力します。

また、例のCSS・buildディレクトリは、プロジェクト内のnpmのルート直下にあるディレクトリとなります。

以下、インストールしたpostcss-cliとautoprefixerを利用し、CSSにベンダープレフィックスを自動付与する例となります。

ベンダープレフィックスの設定

まずは、ベンダープレフィックスの設定を行うためpackage.jsonファイル内に、以下のようにキー"browserslist"を追加し値を配列で指定します。

"browserslist": [
	"last 2 versions",
    "> 1% in JP"
]

今回の例では、「各ブラウザの最新の2バージョンまで（last 2 versions）」または、「日本でのシェア1％以上のブラウザ（> 1% in JP）」で必要なベンダープレフィックスを付与する設定としています。

browserslisについて

ベンダープレフィックスの設定にはbrowserslistというツールを利用しています。browserslistの設定方法の詳細については、以下のリンク先を参考にしてみてください。

GitHub - browserslist/browserslist

browserslistで指定した条件にあてはまるブラウザは以下のリンク先で確認できます。なお、以下のリンク先では今回の例で使用した条件を指定しています。

last 2 versions, > 1% in JP｜browserl.ist

npm-scriptsを利用しコマンドを実行

npmでは、コマンドをnpm-scriptsとして定義して実行できます。

例では、そのnpm-scriptsを利用しpostcss-cliコマンドを実行するため、次のようにpackage.jsonファイル内の"scripts"の値を追加します。

"scripts"の値はオブジェクトとなり、キーに任意のコマンド名を指定し、値に実行するコマンドを指定します。

"scripts": {
	"postcss": "postcss css/style.css --use autoprefixer --dir build/ --watch"
}

そして、定義したnpm-scriptsを、以下のコマンドで実行します。

npm run postcss

それにより、CSSディレクトリ内にあるstyle.cssファイルを監視をスタートし、そのファイルが更新されたら、buildディレクトリ内にベンダープレフィックスを追加したstyle.cssファイルを出力します。

postcss-cliコマンドの引数とオプションについて

上記例で利用したpostcss-cliコマンドの引数とオプションは以下となります。

引数

postcss-cliコマンドの引数には、cssファイルを配置するディレクトリまたは、cssファイルを指定します。

オプション

まとめ

以上がnpmのpostcss-cliとautoprefixerを利用し、CSSにベンダープレフィックスを自動で付与する例となります。

postcss-cliとautoprefixerの利用方法の詳細ついては、文末の参考サイト内を確認してみてください。