no-image

【windows】vscodeを使ってgulpでsassのコンパイルをする手順(linuxコマンドOK)

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インストール

公式サイトよりダウンロードしてください。

https://git-scm.com/downloads

インストールする

Node.jsインストール

公式サイトよりダウンロードしてください。

https://nodejs.org/ja/

コマンドプロンプト起動

Windows + R)>「cmd」>OK

scssのコンパイル

テンプレートファイルをダウンロード

gulp-01-master.zip

https://github.com/abenosite/gulp-01

解凍したフォルダを「vscode」で開く

設定

設定「Ctr + ,」>「{}」をクリック

settings.jsonに追記

これでvscodeのターミナルでlinuxコマンドが使えるようになります。

コンパイルしてみる

vscodeでターミナルを開きます。

ターミナルのショートカット「Ctr + @

これでwindowsでもscssのコンパイルができるようになりました。

※master.scssを変更するたびにターミナル表示が増えて行きます。

(画面キャプチャーはMacのやつです。すみません。)

終了:Ctr + C

再開:「gulp watch」

scssに閉じ忘れなどあると「gulp watch」が終わるため、ファイルを正しく修正後に再度「gulp watch」が必要になります。

なぜlinuxコマンドを使えるようになるのか?

gitを入れると「Gitbush」が使えるようになります。

Gitbushではlinuxコマンドが使えます。

だから、vscodeのターミナルのコマンドをgitbushに設定することで「linuxコマンド」を使用することができるようになったのです。