gulpでSASSを自動コンパイルする #JavaScript

gulpでsassの自動コンパイルをするために複数のサイトを見てgulpfile.jsを作ったのですが
自分の使用しない言語のコンパイルも一緒に入っていたりでわかりづらかったのでsass->cssのみの同じ設定を次回行うときのための簡単なメモとして書きました。

Node.jsのインストール

Node.jsのサイトにアクセスしダウンロードします。
インストールし終わったらコマンド上で

node -v

を入力するとバージョンが見られます。

gulpのインストール

npm install gulp

gulpのインストールは、適当なフォルダに移動してから行います。
個人的にはcss,htmlなどデータを置く大元のフォルダ直下が好みです。

※コメントでのご指摘によりインストール方法はローカルが良いと考えましたので上のコマンドを変更しました(2016.08.26)
様々なプロジェクトを行う際にとても便利です。
「なぜ？」と思う方はコメント欄をご覧下さい。

ちなみに、グローバルインストールの場合のコマンドは以下です。

npm install gulp -g

これは特定のフォルダに移動することなくできます。

gulpfile.jsの設置

gulpのインストール時に移動したフォルダにgulpfile.jsを作成します。

gulpfile.js

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

// SassとCssの保存先を指定
gulp.task('sass', function(){
  gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css/'));
});

//自動監視のタスクを作成(sass-watchと名付ける)
gulp.task('sass-watch', ['sass'], function(){
  var watcher = gulp.watch('./sass/**/*.scss', ['sass']);
  watcher.on('change', function(event) {
  });
});

// タスク"task-watch"がgulpと入力しただけでdefaultで実行されるようになる
gulp.task('default', ['sass-watch']);

次は上のgulpfile.jsによって自動保存されるフォルダ構成のメモです。

フォルダの構成

-gulpfile.js

-package.json

-sass(フォルダ)
  -**.scss  //コンパイル前のscssを置く

-css(フォルダ)
  -**.css  //コンパイル後のcssを置く

(ここから下は2016.08.26に追加しました。)

package.jsonの設置

このように記述したpackage.jsonをgulpfile.jsと同じフォルダに作成します。

package.json

{
  ...
  "scripts": {
    "gulp": "gulp"
  }
}

これにより、コンソール上での実行スクリプトがnpm run gulpで可能になります。
package.jsonはnpm scriptによるもので、npm run ~~で特定のコマンドを実行するよう設定するファイルです。
(これを設定する前のローカルインストールの際の実行方法は...何でしょう、、勉強いたします。)

gulp監視の実行方法

package.jsonでの設定により、作業フォルダ内でnpm run gulpのコマンドを使用してgulpの監視が行えるようになりました。

怠惰な私はgulpとだけ打つ方法(グローバルインストールの際のコマンド)に慣れていたためそれで実行する方法はないかと思ったところinoinojp様が素敵な助言をくださいました。

詳細は下部のコメントでご覧下さい。

Special Thanks

inoinojp様
ありがとうございました！