Webサイトコーディングのあれこれ: gulpとSassのインストール方法（Windows）

今回はgulpとSassのインストール方法（Windows）を書いていきたいと思います。
自分用にメモった物なので詳しくは下記サイトをご覧ください。

「gulpインストール方法」

1．まずはNode.jsをインストールしましょう。

----------------------------------------------------
＞ Node.jsをインストール
----------------------------------------------------

【1】下記URLのNode.jsページからインストール

http://nodejs.org/

【2】Node.jsのバージョンを確認
※コマンドプロンプトにコマンドを入力

(コマンド)
node -v

バージョン番号が表示されればOK

2．続いてgulpをインストールしましょう。

----------------------------------------------------
＞ gulpインストール
----------------------------------------------------

【1】下記コマンドをコマンドプロンプトに入力

(コマンド)
npm install -g gulp

【2】フォルダを作成

例）デスクトップにsampleフォルダを作成した場合のパス

C:\Users\（ユーザ名）\Desktop\sample（sampleフォルダを作成）

【3】次にコマンドプロンプトでsampleフォルダの階層まで移動

cd 階層へのパス

(コマンドプロンプト入力例)
cd \Users\（ユーザ名）\Desktop\sample

※cd （←半角スペースも）を入力し、sampleフォルダをコマンドプロンプトにドラッグ＆ドロップしても入力できます。

入力したらコマンドプロントでエンターを押してくださいｗ

(移動後のコマンドプロンプト表示例)
C:\Users\（ユーザ名）\Desktop\sample>

【4】gulpのバージョンを確認

(コマンド入力)
gulp -v

以下のような表示が出てくると成功

(表示コマンド)
[gulp] CLI version 3.9.1

【5】Localにもgulpをインストール
※【2】で作成したsampleフォルダにインストール

(コマンド)
npm install gulp@3.9.1 --save-dev
※【4】で確認したバージョンと数字を合わせる(3.9.1)
※バージョンを記述しないとなぜかエラーがでたため

【6】再度gulpのバージョンを確認

(コマンド入力)
gulp -v

以下のような表示が出てくると成功

(表示コマンド)
[gulp] CLI version 3.9.1
[gulp] Local version 3.9.1

※sampleフォルダ内にnode_modulesフォルダが作成されていればOK

3．続いてpackage.jsonを作成しましょう。

----------------------------------------------------
＞package.jsonの作成
----------------------------------------------------

【1】gulpインストール【2】で作成したフォルダにpackage.jsonを作成
※コマンドプロンプトにコマンドを入力

(コマンド入力)
npm init

※コマンドが入力できる状態になるまでエンター(とりあえずね)

※sampleフォルダ内にpackage.jsonファイルが作成されていればOK

4．続いてgulpfile.jsファイルを作成しましょう。

----------------------------------------------------
＞gulpfile.jsの作成
----------------------------------------------------

sampleフォルダにgulpfile.jsファイルを新規作成し
以下を記述

(記述内容)

var gulp = require("gulp");

5．最後にSassコンパイルプラグインをインストールしましょう。

----------------------------------------------------
＞Sassのコンパイル
----------------------------------------------------

【1】Sassコンパイルプラグインをインストール
※コマンドプロンプトにコマンドを入力

(コマンド入力)
npm install gulp-sass --save-dev

【2】sampleフォルダにsassフォルダを作成しstyle.scssファイルを新規作成する

例）sassフォルダとstyle.scssを作成した場合のパス
C:\Users\（ユーザ名）\\Desktop\sample\sass\style.scss

【3】style.scssに下記を記述（動作確認用）

h1 {
color: red;
&:hover {
    color: blue;
}
}

【4】gulpfile.jsにSassをコンパイルするタスクを追記

var gulp = require("gulp");
の下に下記を追記

var sass = require("gulp-sass");

gulp.task("sass", function() {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"));
});

【5】動作確認

コマンドプロントに下記を入力

(コマンド入力)
gulp sass

sampleフォルダにcssディレクトリとstyle.cssが生成され
下記cssが記述されていばOK

h1 {
color: red; }
h1:hover {
    color: blue; }

ここまででとりまgulpとsassの設定は完了です。

多少手間取りましたが何とかインストールできました。

※エラーが解決できなくて一回あきらめたのは内緒でｗ

今回作成したsampleディレクトリは下記のようになりました。