“Web製作者のためのSassの教科書”を使って環境構築をする流れ。2

前回の記事、ラストのまとめは以下のように記述しました。

1, Node.jsをインストール
2,コマンドプロンプト(macはターミナル)起動
3,glupをインストール(グローバルorローカル:最終的にローカルで落ち着く)

その後もかなり躓きました・・。 グローバルorローカルと書いてあるとおり、そういう先入観もあり混乱してしまいました。
未だにイマイチ自信はないのだけど😦まとめ方がざっくりすぎた&なんか違うので再度整理。
読んでイラッとした人いるんだろうなw

再度たどり着いた手順

gulpをグローバルにインストール。(これでどのディレクトリでもgulpコマンドが使える)

npm install --global gulp-cli

package.jsonを作成(プロジェクトの作成)

npm init -y

gulpと gulp-sassをローカルインストール

npm install --save-dev gulp
npm install --save-dev gulp-sass

この後gulpfile.jsを作成していきます。
ただし、私は本のサンプルフォルダを使わせてもらうので、ここではスキップ。

本では、gulpをグローバルにインストールした後、すぐに「Sassのコンパイルをやってみましょう」になっていたのでそこで苦戦しました。(前回の記事が突然コンパイルになっていたのもそのためです)
完全な初学者にはちょっとレベルが高すぎる構成でした。
グローバル、ローカル、どっち?と悩んでいましたが、両方入れていて問題ない、むしろ入れていたほうが良さそうだったので(人によるのだと思いますが)両方入れることにしました。
今後、ローカルのパスの理解やバージョン管理も深めないとダメだなぁ。

その後ですが、何度gulp -vでバージョン確認しても3系統。アンインストールして入れ直すとアップデートされるっぽかったのですが、何度やっても3系統・・。
4系統にならぬ、、、と長時間格闘。
そして気がついたらなってました。ちょっとしっくり来ません。
しかも2台のパソコンに入れたのですが、2回ともそんな感じだったのでモヤモヤします🤔

走らせメモ
グローバル gulp
ローカル npx gulp

無事に環境を整え、ようやくスタート地点へ立ちました(T_T)

 

Trello全然進まない。。。

ようやくコンパイル

 

gulp sass

コンパイル成功

コンパイルできました。
サンプルフォルダの.scssでひとまずやりましたが、そこから自分でファイル作成し、やっと、やっとです・・・!!

次からはまたある程度インプットしてからまた記事にしようと思います。
コーディング自体を忘れそうな勢いだよー