browsersync使い方

Question

###前提・実現したいこと
browsersyncを使用してHTMLをocalhost:3000に表示させたいのですが、command not foundになってしまいできません。cdでフォルダを参照させたのですが、起動部分になってつまづいております。表示させたいフォルダはデスクトップのtestというフォルダに直置きになっています。

何ぶん初心者で何もわかっておりませんが、どなたか手を貸してくださると幸いです。よろしくお願いします。

Answer 1

どこでつまづいているのか確認してみるとよいかもです。

① Node.jsはインストール済みかどうか。

node -v

※ バージョン（数字）が出るかどうかを確認
→ 出なければNode.jsをインストールしてください。

②npmはインストール済みかどうか。

npm -v

※ バージョン（数字）が出るかどうかを確認
→ 出なければnpmをインストールしてください。

③ browser-syncが正しくインストールされているかを確認

browser-sync -v

※ オプション一覧が出ればOK
→ 出なければでインストール（①・②済みの状態）

①・②・③が完了した状態で

windows:
cd/d C:\Users\xxx\Desktop\test
目的のパスへ移動

mac: /Users/xxx/Desktop/test/
cd 目的のパスへ移動

④ 実行

browser-sync start --server

Comments

[enaka]

わざわざ細かく丁寧にご説明いただきありがとうございます。
早速試したところ、全てが not definedになっておりました。。
nodeもダウンロードしたつもりでいたのですが、どこかで正しくできていなかったようです。。
もう一度全ての部分をやり直してみたいと思います！！

[enaka]

何度も申し訳ありません。先ほどのコメントですが、上記のバージョン確認の際に、スペースを入力しておらず、正しく調べられておりませんでした。そこでもう一度調べなおしたところ、nodeもnpmもちゃんとバージョン表示されました。そこで公式サイトの方法でnpm install -g browser-syncを入力しましたが正しくダウンロードされず、エラーになりました。このような場合はどのように対処すれば良いのでしょうか、何度も質問しており申し訳ありません。

[takumaro_web]

お使いのPCは、Macでしょうか？
その場合、権限を付与してあげる必要があるかもしれません。

以下で実行してみてください。
sudo npm install -g browser-sync

[enaka]

解決いたしました。本当にありがとうございました。
実はこちらのコメントを見る前にsudoで権限を与えてインストールして、正しくインストールされていると思われる状態でcdでデレィクトリ移動してから起動したのですが、command not foundと表示されるばかりであれから何度も何度も繰り返したものの同じ結果で困っていたのですが、時間を空けてもう一度行ったところ、すんなりできました。。一体何が問題だったのかがわからずですが、、無事解決いたしました！！ありがとうございました！

Answer 2

cd desktop/testなど入力して、コンソール上でデスクトップのtestフォルダまで移動。
その後、browser-sync start --serverだけで良いはずです。
ファイル指定をする方法は発展形なので、まず基本的なやり方から覚えたほうが良いかなと思います。

Comments

[enaka]

早速の回答ありがとうございます。
npm install browser-sync --save-dev
というコマンドで最後までインストールされたのを確認してからcdでフォルダまで移動し、上記のbrowser-sync start --serverを入力しましたが作動しませんでした。基本的なやり方を様々なサイトで見ているのですが、理解できずに困っております。

[enaka]

pwdを入力したところ、現在cd desktop/testと表示されました。この状態で起動できないとなると、いったい何が問題なのでしょうか？何度も質問しており申し訳ありません。

[yamato_hikawa]

npm install browser-sync -g
でインストールしてみてください。

[enaka]

sudoで権限を与えてインストールしたところ無事解決いたしました。
何度もご回答ありがとうございました！！

Answer 3

おそらくパスが間違ってるんじゃないかな。なんもないよって言われてるみたいだし。
https://protean.cc/how-to-use-browser-sync

Comments

[enaka]

早速の回答ありがとうございます。パスが間違っているんだと思います。あまりにも初心者すぎて上記のサイトもこちらに質問する前に全て目を通したのですが理解できない内容でした。