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

製作 プログラム

最終更新日:2021/04/17

ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

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と同じ階層がわかりやすい…はず。

んで中身はこんな感じ。

postcss.config.js

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
  1. バッチファイルと同じ階層にあるstyle_ori.css、style.cssを削除
  2. dart-sassを使ってsassフォルダの下にあるstyle.scssからstyle_ori.cssにコンパイル
  3. postcssを使ってstyle_ori.cssにベンダープレフィックスをつけてstyle.cssで出力

となってます。単にベンダープレフィックス付けるだけなら4行目消してください。

callについて

バッチファイルにする場合、の4,5行目の先頭にcallというのがあります。

callは外部バッチファイルやプログラムを起動するためのコマンド。ただcallがなくていきなり「postcss」でも動きます。

callがナイト呼び出したプログラムから戻ってきてくれないんですよね。なので2行目3行目の処理が実行されない。

今回の例だと、callをつけない場合、最初のsassを実行したあとバッチファイルに戻ってきてくれないから、5行目のpostcssが実行されない、ということになります。

バッチファイルが途中終了する場合

自分で作ったバッチファイル、いざ実行とダブルクリックするも、なんか途中で終わっちゃってなんのエラーかわからない。よくあると思います。というか自分が今回これで悩まされた。

バッチファイルのエラーの見方はは、コマンドプロンプト(cmd)でバッチファイルを起動すること。

これでバッチファイル終了後もウィンドウが残るし、どんなエラーが出てるのか見ることができます。ググって知ったけど盲点だったな…。言われてみればそうだよな、と。

browserslistは?

こっちにくわしく→.browserslistrcの書き方とbrowserslistについて

まとめ

コマンドラインやらバッチファイルやらでpostcssとautoprefiexerおまけにdart-sassを実行する方法を紹介しました。

といってもnpmでインストールしたプロジェクト(プログラム)はぜんぶ「node_modules/.bin/」の下に入ってるんでそれを直に叩けばいいだけ。シンプルでした。

むしろふだんバッチファイルを書かないんで、callがないと複数処理できないとか、そういう部分でつまづきました。

参考にしてみてくださいね。

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: アジアという語感 / 精神的食パン限界値 / 続・マーガリン問題 /