npm-scriptとAutoprefixerでvendor prefixの付与を自動化する

スポンサーリンク
広告

vendor-prefixをいちいちCan I useで調べて付与するのは当たり前のように面倒なので、npm scriptを使ってできないか調べて見て、できました。

 

postcssとAutoprefixerをインストー

npm i -D postcss-cli autoprefixer

-Dは、package.jsonファイルの「devDependencies」に追加してね、というオプションなので、その通り追加されているか確認します。

f:id:TACOSVilledge:20170617164422p:plain

追加されました。

package.jsonにnpm-scriptを書きます

f:id:TACOSVilledge:20170617164539p:plain

package.jsonファイルのscriptsのところに、

"postcss": "postcss <インプットファイル> --use autoprefixer -o <アウトプットファイル>

と書きます。

-oはアウトプット指定するよ、のオプションです。

 

コマンドを叩いてvendor prefixがついたか確認します

 

SublimeTextで差異をとると、確かに、box-sizing, box-shadow, rotateに-webkitのvendor prefixがついていました!

 

 

その他の参考資料:

Gulpを使わないPostCSS - funxion

インストールや、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記述は必要なしとのこと。 

 

 

以上。