Sass2日目です。
結論から言えない思考整理のためのアウトプット。
今日は久しぶりに自室なので画面3枚、深めストロークのキーボードで快適です。
ただただ寒い。足元のセラミックファンヒーターが天国だけど電気代をとにかく気にしています・・。
この前にモニターアームの緩みと格闘したり町内に配りものしたり大幅にタイムロス、さらに血迷ってUdemyでLaravel入門してみたり迷走してきました。
すでに寝る時間＆今日はリアルタイムライティングなので無駄な動き満載で亀速度でお送りします。
これを持ち越すと一生書かない気がする。
①Node.jｓをインストール
次はコマンドプロンプト～
②パッケージ管理マネージャのnpm（Node Packaged Modules）コマンドを使って環境をインストール
本のサンプルフォルダの中にあった「package.json」「gulpfile.js」、あとはサンプルファイルの「.scss」ファイルの中に入る。
でもってnpmコマンドで「gulp.cli」をグローバルにインストール・・・ですって。
コマンドに
をいれて・・
無事に完了！
これでglupが使えるらしいです👀ここまではOK！
次は「npm install」と入力して一括インストールを行いました。本の通りに進んでおります。
たった一行書くだけで一括インストールができるのは「package.json」のおかげとのこと。
ほぅ・・・
おーけーおーけー（テッチャン風）
③gulpタスクを実行してSassをコンパイルする
憧れていたコンパイル。ついにたどり着きました！（大げさ）
⛔そして早速ここで問題発生⛔
本書に書いてある通りに「gulp sass」とコマンド入力するとErrorとでます。
何度やっても出るのです。こんな短い言葉なのでスペルミスもチェックしたし、本の公式サイトに行って正誤表を調べたけれどもどこにもありません・・。
そしてググり、シンプルにアマゾンの私が使用している“Sassの教科書”レビューへとたどり着きました。
原因がわかりました。ここまで1時間はかかったでしょう・・・。
ひとまず原因がわかったので就寝。（深夜にかかっていたので）
3日目：gulp sassと入力した際のErrorを解決
本の通りにやっていたのに躓いたところから再度ググり散らかしていると、１日目の上記で書いた「npmコマンドで「gulp.cli」をグローバルにインストール」というのは今は少数派だということがわかってきました。。
今のgulpの最新は4で、今回いれた3.9.1じゃないからErrorになってるんだと理解。
あとは再びぐぐりちらかし、①アンインストールしてバージョンアップするか、②アンインストールしてローカルに最新を入れ直すか にたどり着きました（多分）。
②のローカルにインストールし直すことにしたので、xampp傘下にgulpフォルダを作ってリベンジ。
第二の壁。
npm i gulp -D
で、エラーになるとたい。
ググりググられ（）“フォルダ名をgulpにしたらエラーがでる”らしく、「package.json」の中の“name”を変更。
再度gulpフォルダに順番にpackage.json、gulp,gulp-sassパッケージまでをインストールすることができました・・。
文にしたらあっけないけど結構時間かかったぞ・・。
C:¥xampp¥htdocs¥gulp>npm init -y C:¥xampp¥htdocs¥gulp>npm install --save-dev gulp C:¥xampp¥htdocs¥gulp>npm install --save-dev gulp-sass
省略せずにきちんと書きました。
ここまでもがいていたら、最初はなんのこっちゃわからなかったこの本の書いてある意味や、ググったときに参考にしたサイトが教えてくれている意味が少しずつ分かってきました。
そしてさらにつまづく。
インストール完了ーー！！と喜んでいたら、まただめでした。
「gulp -v」と入れても出ません。
「’gulp’は内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。」
(゜-゜)
そんなとき、Discordでにゅーぶる会仲間のりんご神様が降臨してくれました😍
ためになること沢山教えてもらえて、エラーもどういう類いのものかもわかり、イメージも固まったのであります。
npm gulp -v
最後はこれでVersion出てきっと大丈夫なはず。。
ここの記憶はないので不安。
まとめ
理解しながらブログを書いたのは初めてなので、ダラダラとした文章になってしまいました。
再度ポイントだけをおさらいすると。
１、Node.jsをインストール
２，コマンドプロンプト（macはターミナル）起動
３，glupをインストール（グローバルorローカル：最終的にローカルで落ち着く）
必要なgulpfile.jsは今回は本のサンプルに頼ります。
ここではまた先が長そうなので（現在再びエラー😥）これはまた続きます！
ということで、表題の③gulpタスクを実行してSassをコンパイルするは、できていません。
Twitter仲間のもなかちゃんが言ってたgulpは一生使わないと勝手に思っていたけれど、こんなに早く出会うとは。
そして、つまづきながら調べていくと２時間後の私は２時間前の私より本や人の言ってることの理解度が少しだけ深まった気がします。
きっとこれが大事。
やめちゃだめ、絶対。
コメント