Sassを利用するに当たり、gulpでコンパイル出来るようにする、という前回の記事からの続きです。
利用した書籍は⬇こちら
前回の記事、ラストのまとめは以下のように記述しました。
１, Node.jsをインストール
２，コマンドプロンプト（macはターミナル）起動
３，glupをインストール（グローバルorローカル：最終的にローカルで落ち着く）
その後もかなり躓きました・・。 グローバルorローカルと書いてあるとおり、そういう先入観もあり混乱してしまいました。
未だにイマイチ自信はないのだけど😦まとめ方がざっくりすぎた＆なんか違うので再度整理。
読んでイラッとした人いるんだろうなｗ
再度たどり着いた手順
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でバージョン確認しても３系統。アンインストールして入れ直すとアップデートされるっぽかったのですが、何度やっても３系統・・。
４系統にならぬ、、、と長時間格闘。
そして気がついたらなってました。ちょっとしっくり来ません。
しかも２台のパソコンに入れたのですが、２回ともそんな感じだったのでモヤモヤします🤔
走らせメモ
グローバル gulp
ローカル npx gulp
無事に環境を整え、ようやくスタート地点へ立ちました(T_T)
全然進まない。。。
ようやくコンパイル
gulp sass
コンパイルできました。
サンプルフォルダの.scssでひとまずやりましたが、そこから自分でファイル作成し、やっと、やっとです・・・！！
次からはまたある程度インプットしてからまた記事にしようと思います。
コーディング自体を忘れそうな勢いだよー
コメント