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

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

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

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

postcss-cliとautoprefixerについて

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

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

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

package.jsonを作成

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

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

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

npm init

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ファイルを指定します。

オプション

オプション 内容
--use 使用するプラグインを指定
--dir アウトプットするディレクトリを指定
--watch ディレクトリ内・ファイルを監視し、更新されたらコンパイル

まとめ

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

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

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。