npm-scriptとAutoprefixerでvendor prefixの付与を自動化する
vendor-prefixをいちいちCan I useで調べて付与するのは当たり前のように面倒なので、npm scriptを使ってできないか調べて見て、できました。
postcssとAutoprefixerをインストール
npm i -D postcss-cli autoprefixer
-Dは、package.jsonファイルの「devDependencies」に追加してね、というオプションなので、その通り追加されているか確認します。
追加されました。
package.jsonにnpm-scriptを書きます
package.jsonファイルのscriptsのところに、
"postcss": "postcss <インプットファイル> --use autoprefixer -o ＜アウトプットファイル＞
と書きます。
-oはアウトプット指定するよ、のオプションです。
コマンドを叩いてvendor prefixがついたか確認します
SublimeTextで差異をとると、確かに、box-sizing, box-shadow, rotateに-webkitのvendor prefixがついていました！
その他の参考資料：
インストールや、postcssのconfigの書き方など、わかりやすく書かれており、途中まではこの通り進めたのですが、最後に、Input Error: Did not receive any STDINというエラーが出てしまいましたので注意です。
postcssのconfigファイル（この記事では「options.json」というファイル）を書く工程は丸っと必要ありませんでした。
（2016年の記事だからかも？）
これは、調べたところ、inputとなるファイルが見当たらない場合、キーボード入力を待つ仕様になっているため、「STDIN（キーボード入力）を受けていません！」とエラーを出してくるようです。
そして、それについて、postcssの開発者のメイン担当の方々がディスカッションしているのが、こちらのスレッド。
https://github.com/postcss/postcss-cli/issues/93
これによると、outputとinputをconfigに書くのはNGらしい。
あと、root直下にpostcssのconfigファイルを置いておけば-cコマンドはなくても勝手に見に行ってくれるので、-c記述は必要なしとのこと。
以上。
