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