週一でブログを更新するという目標を立てていたのですが、年末までにあと19記事も残っているようです。つらい。
今更感ありますが、今回はgulpについて、インストールから、sassのコンパイルまで書いてみようと思います。

1.Node.jsのインストール

まずはNode.jsをパソコンにインストールします。
2016年10月の現時点では、v6.9.1とv7.0.0とで2つありますが、もし迷ったら安定版のv6.9.1がいいかと思います。

ダウンロードできたら、ちゃんとインストールできたか確認するために、Node.jsのバージョンを出してみましょう。
ターミナルを開いてコードを叩きます。

node -v

v6.9.1　という風にバーションが返ってきたらOKです。

2.gulpをインストール

続いて、グローバルにgulpをインストールします。
gulpはターミナルでコマンドを叩いてインストールします。

npm install -g gulp-cli

Macをお使いの方で、エラーが出た！という場合

管理者権限で実行すればOK。

sudo npm install -g gulp-cli

パスワードを聞かれるのでパスワードを入力。これで、コマンドでgulpを使うことができるようになります。

すでに古いバージョンをインストールして新しくしたい場合

一度アンインストールしてから、インストールしてみてください。

npm uninstall -g gulp

3.プロジェクトディレクトリを初期化

プロジェクトのファイルに対して、gulpを使えるように設定をしていきます。
まずは、プロジェクトフォルダを作成し、ターミナルで移動します。

cd プロジェクトフォルダのパス

これで、移動することができます。
例えば、デスクトップにPJファイルを置いてそこに移動したい場合は

cd Users/user-name/Desktop/PJ

という風になります。

プロジェクト用に設定ファイルを作成します。

npm init

いろいろきかれますが、よくわからなければ、全部return（Yes）でOKです。
うまくいくと　package.json　というファイルが作成されます。

{
  "name": "pj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^2.3.2",
    "sass": "^0.5.0"
  }
}

何も設定していないとこんなかんじ。
プロジェクト名や、プラグインなどが記載されているファイルです。

4．プロジェクトフォルダにgulpをインストール

プロジェクトフォルダにgulpをインストールします。

npm install --save-dev gulp

5．プラグインをインストール

プラグインを個別でインストールしていきます。
書き方はこんなかんじ。

npm install --save-dev (プラグイン名)

Sassがコンパイルできるよう gulp-sassをインストールしてみましょう。

npm install --save-dev gulp-sass

インストールが成功すると、プロジェクトフォルダの内に node_modules とフォルダができ、その中にインストールされます。

6．タスクを書く

作成したプロジェクトフォルダに gulpfile.js というファイルを作成し、タスクを書いていきます。

//プラグインの読み込み
var gulp = require("gulp");
var sass = require("gulp-sass");

//タスクの定義
gulp.task("default", function() {
	gulp.src("_scss/style.scss") //ファイルの参照先を指定
		.pipe(sass()) //プラグインの実行
		.pipe(gulp.dest("css")); //処理を行ったファイルの保存先を指定
});

プラグインを読み込み、defaultというタスク名でsassファイルをコンパイルするタスクを登録…ということをしています。
タスク名をコマンドラインに打ち込むと、そのタスクを実行してくれるという流れです。

7．タスク実行

コマンドを入力して処理を実行します。

gulp

これで、SassファイルがCSSファイルにコンパイルされるようになります。

サンプルではdefaultというタスクで登録してるので、gulpと入力するだけで実行してくれます。
defaultのところをhogeにすると gulp hoge　という風に自分で命令文を設定することもできます。

8．watchタスクを追加

毎回Sassファイルを手動でコンパイルするのは面倒なので、常に監視してもらい、変更されたら自動でコンパイルしてもらえるように設定します。

書き方

gulp.watch(“監視するファイル”,　処理)

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

gulp.task("default", function() {
	gulp.watch("_scss/style.scss", function(){
		gulp.src("_scss/style.scss")
			.pipe(sass())
			.pipe(gulp.dest("css"));
	})
});

これでもう一度 gulp コマンドを叩くと、常にsassファイルを監視してくれるようになります。
途中で監視を止めたい場合は、control + Cで　OK。

以上！
次回以降は別のプラグインについて取り上げていきたいと思います。