環境構築（Mac）

Node.jsのインストール

gulp を使うためには、 Node.js がインストールされている必要があるため、確認します。

$ node -v

バージョンが表示されなければ、Homebrew（Mac用パッケージマネージャー）などでインストールします。
既にインストール済みの場合はHomebrewをアップデートしてから、node.jsをインストールします。

$ brew update
$ brew install node

npm（node.jsのパッケージ管理ツール)は、homebrewでNode.jsをインストールすると一緒にインストールされます。

グローバルにgulpをインストール

グローバルインストールすると「gulp」というコマンドが使えるようになります。

$ sudo npm install gulp -g


package.jsonを作成

適当な場所にプロジェクトのディレクリを作成し移動します。
そこにnpm initを実行してpackage.jsonというnode.js用のプロジェクトファイルを作成します。
色々と聞かれますが、とりあえずYESで進めてください。

$ npm init

name: （20170608_test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: "kawachi"
license: "ISC"

npmの最新v5にアップデートした場合は、package-lock.jsonというファイルが作成されるようです。
npm v5 がリリースされた - from scratch

ローカル（プロジェクト）にgulpをインストール

$ npm install --save-dev gulp

gulpがグローバルとローカル両方に入っているか確認しておきます。

$ gulp -v
CLI version 1.3.0
Local version 3.9.1

必要なパッケージをインストール

下記のコマンドで必要なパッケージをインストールしていきます。
--save-devを付けるとpackage.jsonにインストールしたパッケージを記述してくれます。

$ npm install gulp-sass --save-dev

下記、とりあえず私が最初にインストールしたパッケージです。

• gulp-sass（scssをcssに変換するパッケージ）
  gulp-scssとの違いがよく分かりませんが、こちらの方がメジャーなようです。

• gulp-autoprefixer （ブラウザ固有のプレフィックスを自動で付与する）

• gulp-plumber（エラーが起こってもタスクが停止しないようにする）

• browser-sync（ファイル保存時にブラウザをリロード）

• gulp-csscomb（プロパティ記述の順序を任意で設定）
  .csscomb.jsonファイルを作成して記述順序などを設定する必要があります。私はジェネレーターを使って作成しました。

• gulp-notify（エラーが出た時にデスクトップに通知してくれる）

• connect-ssi（includeを読み込ませるのに必要のよう）
  このパッケージは設定に苦労したので、設定方法を後述したいと思う。。

  gulpfile.jsファイルの作成

  インストールしたパッケージを使えるように、プロジェクトディレクトリ内にgulpfile.jsファイルを新規作成します。
  gulpfile.jsの設定内容は、ややこしいため割愛しますが、ジェネレーターを使うと楽です。
  gulp generator

  gulpコマンドで実行する

  $ gulp

  問題なく設定が出来ていれば、Webサーバーが起動し、http://localhost:3000に表示されます。

  参考サイト

  @wakamshaさんのAltJS,AltCSS課題をGulp, SCSS, TypeScript でやってみた ｜ Developers.IO
  ざっくりGulp.js入門（Mac向け） - Qiita