Gulpを使わないPostCSS

PostCSSについて調べてみるとGulpでPostCSSを使うという記事が多いです。
PostCSSに関する記述をGulpファイルに書くのはとてもシンプルで分かりやすいですが、PostCSSを使ってCSSを書きたい!というだけの場合、わざわざGulpを使わなくてもpostcss-cliで更にシンプルなPostCSSのビルド環境を作ることができます。

現行のpostcss-cliに対応した設定はこちらにまとめました。

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

まずは、postcss-cliと使いたいプラグインのインストールをします。
便利なPostCSSプラグインが多く公開されていますが、今回は

*ベンダープレフィックスの自動付与できる
* CSSファイルをimportできる
* minifyできる

というシンプルな構成を作ることにします。
ベンダープレフィックスの自動付与にはautoprefixerを、
CSSファイルのインポートにはpostcss-importを、
minifyには
csswringを使います。(cssnanoでもminifyは出来ますが、副作用がありそうなのでcsswringを使うことにしました。cssnanoを通したらベンダープレフィックスが消えて困った時のメモ)

npm initが終わっている状態から、以下のコマンドで
postcss-cli、autoprefixer、postcss-import、csswringをインストールします。

npm i -D postcss-cli autoprefixer postcss-import csswring

postcss-cliはグローバルへのインストールでも良いのですが、
後に完成するpackage.jsonとPostCSSのconfigファイルを配布さえすれば、ビルド環境を作ることができるようしたいので、このようにしています。

npm-scriptsを作る

次にpackage.json内にnpm-scriptsを書いていきます。
と言っても書くのは以下の記述だけです。

"scripts": {
    "postcss": "postcss -c options.json"
}

postcssコマンドに -c オプションをつけてconfigファイルの指定をしています。

PostCSSのconfigファイルを作る

options.jsonというJSONファイルを作成します。
記述は以下のようにしました。

{
  "use": ["postcss-import", "autoprefixer",  "csswring"],
  "local-plugins": true,
  "output": "css/style.css",
  "input": "src/style.css",
  "watch": true
}

“use”にはプラグインを指定します。

“local-plugins”をtrueにすると、このconfigファイルがあるディレクトリからプラグインを探します。グローバルにpostcss-cliがインストールされている場合、”local-plugins”がtrueになっていないと、グローバルにインストールされているnpm パッケージからプラグインを探すようです。

“output”にはPostCSSで生成されるCSSを、
“input”にはPostCSSでビルド前のCSSを指定します。

“watch”をtrueにしておけば、”input”で指定したCSSファイルや、そのファイル内でimportを指定しているCSSファイルの変更を監視して、変更があれば自動でビルドしてくれます。

ここまで完了したら、

npm run postcss

を実行すればwatchが始まります。
configファイルに設定を書くこちらのやり方のほうが、Gulpを使うよりもシンプルでよいなと感じています。

今回作ったファイルはこちらのリポジトリで確認できます。postcss_template