windowsでもvscode（Visual Studio Code）のターミナルからlinuxコマンドで「gulp watch」を行う手順です。
windowsは、初期でlinuxコマンドが使えないため、gitのインストール&設定が必要になります。
環境：windows10
手順
・vscodeインストール
・gitインストール
・Node.jsインストール
・scssのコンパイル
vscodeインストール
公式サイトよりダウンロードしてください。
https://code.visualstudio.com/
インストールする
参考設定
【最強エディタ】はじめてのVisual Studio Code入門（オススメの設定・プラグイン・使い方） | 道WEB
https://michiweb.net/cre-vscode/
gitインストール
公式サイトよりダウンロードしてください。
インストールする
Node.jsインストール
公式サイトよりダウンロードしてください。
コマンドプロンプト起動
（Windows + R）＞「cmd」＞OK
|
1 2 3 |
node --version <span class="s2">//</span>バージョンが表示できれば<span class="s2">OK</span> |
scssのコンパイル
テンプレートファイルをダウンロード
gulp-01-master.zip
https://github.com/abenosite/gulp-01
解凍したフォルダを「vscode」で開く
設定
設定「Ctr + ,」＞「{}」をクリック
settings.jsonに追記
|
1 |
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe" |
これでvscodeのターミナルでlinuxコマンドが使えるようになります。
コンパイルしてみる
vscodeでターミナルを開きます。
ターミナルのショートカット「Ctr + @」
|
1 2 3 |
npm install gulp -g npm install --save gulp watch |
これでwindowsでもscssのコンパイルができるようになりました。
※master.scssを変更するたびにターミナル表示が増えて行きます。
（画面キャプチャーはMacのやつです。すみません。）
終了：Ctr + C
再開：「gulp watch」
scssに閉じ忘れなどあると「gulp watch」が終わるため、ファイルを正しく修正後に再度「gulp watch」が必要になります。
なぜlinuxコマンドを使えるようになるのか？
gitを入れると「Gitbush」が使えるようになります。
Gitbushではlinuxコマンドが使えます。
だから、vscodeのターミナルのコマンドをgitbushに設定することで「linuxコマンド」を使用することができるようになったのです。