Sass(Scss) + Gulpを使うための環境準備

1. Rubyをインストール
2. Sass(Scss)をインストール
3. node.jsをインストール
4. npmの確認とバージョンアップ
5. gulpをインストール
6. package.jsonを設置
7. インストール済みモジュールをアップデート

Rubyをインストール

インストーラー＝https://rubyinstaller.org/
参考にさせていただいたサイト＝https://www.buildinsider.net/language/rubytips/0004

インストール時オプション選択
［Td/Tk サポートをインストールする］＝ブランク
［Ruby の実行ファイルへ環境変数 PATH を設定する］＝チェック
［.rb と .rbw ファイルを Ruby に関連づける］＝チェック

インストール後チェック
rubyコマンドがPowerShellやコマンドプロンプトで実行できるかを確認
Windows PowerShell（スタートメニュー＞アプリからとして起動）から以下を入力しRubyのバージョンをチェック。

ruby -v

Ruby「DEVELOPMENT KIT」をインストール。
インストーラー＝https://rubyinstaller.org/downloads/
Other Useful Downloads欄からダウンロード
Rubyフォルダが入っているフォルダ（今回はディスクC）に以下フォルダを作成し解凍。
Ruby 2.0以上（64bit）向けのDevKit： C:\RubyDevKit2X-x64\

以下コマンドでインストール用スクリプトを実行。

cd C:\RubyDevKit2X-x64\
ruby dk.rb init

Windows PowerShell（スタートメニュー＞アプリから管理者として起動）
過去バージョンが入っている場合は、下記参照。
https://www.buildinsider.net/language/rubytips/0004

下記コマンドでインストール実行

ruby dk.rb install

RubyGemsのアップデート
下記コマンドでアップデート（ちょっとだけ時間がかかるので注意）

set LANG=ja_JP.UTF-8 //文字化け防止のためにUTF-8を指定
gem update --system 

gemsのアップデートでsslエラーが出る場合あり。対処方法をググってトライしてみたけど上手くいかず、結局本家サイト（https://rubygems.org/pages/download）から最新版のインストールファイルをダウンロードしてきて本家サイトの指示通りコマンドでインストール。

あとでgemsでSass(Scss)をインストールしますが、gemsでインストールしたパッケージの一覧を見たい場合は下記コマンドで。

>gem list

DevKitの内容など詳しくは、下記サイト様ご参照
https://heroween.hateblo.jp/entry/2014/07/04/144309

複数のRubyバージョンをインストールする場合は、下記サイト様ご参照
https://www.buildinsider.net/language/rubytips/0004

Rubyバージョンのアップデート（RubyInstaller使用）は、下記サイト様ご参照
https://www.buildinsider.net/language/rubytips/0004

Sass(Scss)をインストール

RubyGemsからSassをインストール

gem install sass

node.jsをインストール

プロジェクトによってはnode.jsのバージョンを揃えなければならない場合があるため、バージョン管理ツールを利用してnode.jsをインストールする。

バージョン管理ツール「nodist.js」を下記からダウンロード、インストール
https://github.com/marcelklehr/nodist/releases/
（事前にnode.jsが、インストールされている場合は、アンインストールする必要あり）

インストールできたらバージョンを確認して、無事インストールできたか確認する。

nodist --version

node.jsのインストール前に下記コマンドでnodist依存ファイルのアップデート

nodist update

node.jsをインストール。インストール方法は下記コマンドいろいろ参照。
インストールできたら下記コマンドでnode.jsのバージョンを確認し、無事インストールできたか確認。
※インストールしてすぐにnode.jsのバージョンを確認したらエラー（Sorry, there’s a problem with nodist. Couldn’t resolve version spec %s: %s stable Unexpected character in constraint stable: stable）が、表示されたが、「node latest」や「node ls」などコマンド打って確認してから、もう一度、node.jsのバージョンを確認したら正常に表示された。正常になった原因はわからず。

nodist のコマンドいろいろ

node.jsのバージョンを指定してインストール

nodist + 0.10.29

インストールされたnode.jsのバージョン確認

node --version

インストールされたnode.jsのバージョン一覧を見る

nodist

使用するnode.jsのバージョンを指定

nodist 0.10.29

参考：
https://github.com/marcelklehr/nodist/
https://nodejs.org/en/
https://qiita.com/yokoh9/items/20d6bdc6030a3a861189

npmの確認とバージョンアップ

一応、npm（node.jsと同時にインストールされている）が入っているか確認。

npm --version

npmをバーアップする

npm install -g npm

gulpをインストール

コマンドプロンプトから下記コマンドでgulpをグローバルインストール。

npm install -g gulp

gulpのバージョン確認。

gulp --version

コマンドプロンプトから下記コマンドでgulpをローカルインストール。
（グローバルインストールだけの状態でバージョン確認するとローカルバージョンも表示され、コマンドプロンプトでの作業だとそのまま利用できる場合があるが、仕事用フォルダにローカルインストールしておいたほうが良い）

npm install --save-dev gulp

参考にさせていただいたサイト
https://blog.mudatobunka.org/entry/2015/08/18/003031

package.jsonを設置

多数プロジェクト（HTML、CSS、JSなど）が入っている仕事用フォルダにpackage.jsonを設置する。
コマンドで作業用フォルダに移動し、下記コマンドでpackage.jsonを作成（途中さまざま質問あるが、あとで変更できるので、わからない場合はすべてEnterで進める）。

npm init

下記サイト様を参照し、Gulpが正常に動くか確認する。
https://liginc.co.jp/243297#gulp10