Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりGulpが動かなくなることがないのが最大の理由。

最近、個人用のWebコンテンツを3つ立ち上げようと思い、せっかくなので久しぶりに環境を最新にしてみようと思ったのが、この記事を書くに至る経緯。

ちなみに、ぼくのマシーンは、macOS Catalina バージョン 10.15.6。
node.js、npm、globalのgulpはインストール済み。

案の定というか、エラーが出てしまいました。

エンジニアにとっては基本的なことかもですが、デザイナーからちょっと手を伸ばしたぼくには、ターミナルのコマンド入力は何をしているのか分からなく、結構なストレス作業だったりします（苦笑）。

さて。それでは解決に至った経緯を成功部分にフォーカスして紹介。

結局、Xcodeをインストールして、npm で PostCSS をインストールして解決

ググるといろんな情報が検索ヒットして大変助かります。そしてそれぞに微妙に状況や対応策も違うようだったので、改めて「ぼくの場合」についても備忘録がてら、誰かのピンポイントになればと記載しておきます。

$ npm init -y

これは問題なし。

$ npm install --save-dev gulp

いきなり、ERR発生（たくさん表示されていたので、最初と最後を抜粋）。

gyp: No Xcode or CLT version detected!
・・・
gyp ERR! not ok 

Xcodeはインストールしてないから、インストールを試みる。

$ xcode-select --install

すると、エラー（後半省略）。

xcode-select: error: command line tools are already installed, ・・・

え？インストール済み？！でもアプリケーションフォルダで確認してもXcodeはない。ということで、App StoreからXcodeを検索してダウンロードする。ダウンロードが終わったら、Xcodeを起動する。利用規約などに同意してXcodeが起動されたことを確認したら、Xcodeを終了する。

改めて、ローカルのgulpをインストールしてみる

$ npm install --save-dev gulp

無事にインストールできた！
続いて、他のプラグインもインストール。ちなみにぼくのインストールしたプラグインはこれ。
ちなみに、「i」は「install」、「-D」は「--save-dev」と同等。

$ npm i -D gulp-concat
$ npm i -D gulp-merge-media-queries
$ npm i -D gulp-notify
$ npm i -D gulp-plumber
$ npm i -D gulp-postcss
$ npm i -D gulp-rename
$ npm i -D gulp-sass
$ npm i -D gulp-sass-glob
$ npm i -D gulp-uglify
$ npm i -D autoprefixer
$ npm i -D css-declaration-sorter
$ npm i -D gulp-babel
$ npm i -D @babel/core
$ npm i -D @babel/preset-env

ワンライナーでまとめると下記。

$ npm i -D gulp-concat gulp-merge-media-queries gulp-notify gulp-plumber gulp-postcss gulp-rename gulp-sass gulp-sass-glob gulp-uglify autoprefixer css-declaration-sorter gulp-babel @babel/core @babel/preset-env

無事にエラーなくインストール完了！

ところが、実際にGulpを動かしたところ、PostCSS のところでエラー。

Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

エラーにある、https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users を開く。リンク先のGulpのところを確認する。

1. Update gulp-postcss to >= 9.0.
2. Add postcss dependency to your project.

まずは、1。package-lock.jsonで、gulp-postcss のバージョンを確認する。9.0以上で問題ない。
次に、2。postcss はインストールしていない。そこで、インストールしてみる。

$ npm install --save-dev postcss

インストールが無事終わり、もう一度Gulpを実行してみる。

できた！

引き続き、インストールしたすべてのプラグインが動くことを無事確認！

いやぁ、成功フローだけであれば、なんてことはないのですが、トライ＆エラーの繰り返しでした（汗）。

というわけで、最後に忘れずに、インストールフローに、postcss を追加しました。

$ npm i -D postcss