[続]Gulpを使わないPostCSS

以前、postcss-cliを使ってPostCSSをコンパイルする方法を「Gulpを使わないPostCSS」という記事にしたが、現行のpostcss-cliでは設定方法が大幅に変更されている。また、記事に意外とアクセスがあるので現行のバージョン(バージョン3以上)に対応した方法をメモしておく。

サンプルのディレクトリ構成

今回のディレクトリ構成はこんな感じ。
src/style.cssをpostcss-cliでコンパイルしてcss/style.cssに出力する。

├── src
│   └── style.css
├── css
│   └── style.css
├── package.json
└── postcss.config.js

postcss-cliとプラグインをインストール

次にpostcss-cliと、プラグインはここではautoprefixerをインストールすることにする。
言うまでもないがnpm initが終わっている状態で以下のコマンドを実行してインストールする。

npm i -D postcss-cli autoprefixer

npm-scriptsを書く

次にpackage.json内のscriptsを以下のように書く。

 "scripts": {
    "build": "postcss ./src/style.css -o ./css/style.css -w"
  },

postcssコマンドに続けて、コンパイルしたいファイルを指定し、-oオプションに続けてコンパイル結果の出力先を指定する。
-wはwatchオプション。これをつけておけばsrc/style.cssの変更を監視し、変更があればコンパイルしてくれる。

postcss-cliのconfigファイルを作る

postcss-cliの2系まではoptions.jsonというファイルにPostCSSのconfigを書くことになっていたが、
3系からはpostcss.config.jsファイルに書くことになっている。
以下は例としてautoprefixerプラグインを有効にしている。

module.exports = () => ({
  plugins: {
    'autoprefixer': {
      //ここにプラグインのオプション書く
    }
  }
})

コンパイルの実行

ここまで完了したら、以下のコマンドを実行することでsrc/style.cssファイルの監視が開始する。

npm run build

PostCSS CLI