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のところを確認する。
- Update gulp-postcss to >= 9.0.
- 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