postcss、autoprefixerをコマンドラインで使う方法

npmでpostcssとautoprefixerをインストール。んで普通ならpackage.jsonにスクリプトを書いて実行したりwatchしたりするんだろうな、と思います。

ただこのpackage.jsonのスクリプトはスクリプト実行中のディレクトリを参照することができないっぽいんですよね。どうやってもこのpackage.jsonの置かれている場所がカレントディレクトになっちゃう。

てことでバッチファイルを作成し、実行中のディレクトリに対してpostcss、autoprefixerを使うことにしたのでした。

はい、前置きが長くなりましたが、コマンドライン（コマンドプロンプト、バッチファイル）でpostcss、autoprefixerを使う方法を紹介していきますね。ちなみにwindowsです。

1. これで動く
2. postcss.config.js
3. npmで入れたプログラムの本体
4. バッチファイルにする場合
1. callについて
2. バッチファイルが途中終了する場合
5. browserslistは？
6. まとめ

これで動く

..\node_modules\.bin\postcss -c ..\postcss.config.js style_ori.css -o style.css

バッチファイルから見て一個上の階層にある「node_modules」の中のpostcssをたたいて、それにこれまた一つ上の階層にある「postcss.config.js」を読み込ませ、んでstyle_ori.cssにベンダープレフィックスを付けてstyle.cssとして出力しています。

postcss.config.jsの中身は次項。

postcss.config.js

いきなりpostcss.config.jsとか出てきて意味わからないですよね。スミマセン。

postcss.config.jsというファイル名のファイルを自分で作るだけです。場所はどこでもOK。上で紹介した読み込ますところでその相対パスを記載するだけ。たぶんnode_modulesと同じ階層がわかりやすい…はず。

んで中身はこんな感じ。

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

今回はpostcssの機能でautoprefixerしか使ってないんで一個だけですが、ほかにもcssの圧縮やらそういう機能も使うならココにどんどん追加してく感じ。

とりあえずベンダープレフィックス自動でつけるだけならこのままコピペでやってもらえればOK。

npmで入れたプログラムの本体

npmでインストールしたプログラムの本体は「node_modules/.bin/」の下に全部入っています。

なのでここを自分で叩いてやればその機能を使える、というわけ。

バッチファイルにする場合

watchして適時動いてくれればそれが一番だと思うんですが、そんな保存ごとに何度も動いてくれる必要ないし、ラスト1回だけ動いてくれればいいなーと思っていたんで、バッチファイルにしちゃいました。

バッチファイルダブルクリックするくらい別にOKかなーと。

cd /d %~dp0
del style_ori.css
del style.css
call ..\node_modules\.bin\sass sass\style.scss style_ori.css
call ..\node_modules\.bin\postcss -c ..\postcss.config.js style_ori.css -o style.css