gulp #001 – gulpでタスク実行

今回は、先日参加した勉強会きっかけで「gulp」を試してみたいと思います。ずっと試してみたかったので勉強になりそうです。

gulpとは、Node.jsで利用できる「タスクランナー」です。gulpを利用することで様々な作業を自動化することが可能になります。同じようなタスクランナーとしてGruntとよく比較されていますが、gulpは正式には「タスクランナー」ではなく「ストリーミングビルドシステム」のようです。

何をどこまでできるのか、今日はまずgulpでタスクを動かすところから試していきます。

まずnpmでgulpをグローバルインストールします。

npm install -g gulp

次に作業フォルダに「package.json」を作成します。 ※今回は{}のみ記載します。

package.json

{
}

作業フォルダでnpmでgulpをローカルインストールします。

npm install --save-dev gulp

インストール時の引数に「—save-dev」を記述することによって「package.json」にバージョン情報が追加されます。

package.json

{
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

gulpがインストールされているか確認します。

gulp -v

インストールが完了したら処理を記述する「gulpfile.js」を作成します。 ※今回は簡単なコメント表示を記述します。

gulpfile.js

var gulp = require('gulp');

gulp.task('sample', function() {
    console.log('サンプル!');
});

gulp.task('default', ['sample'])

作業フォルダでgulpを実行すると下記のようにコメントがコマンドプロンプトに表示されます。

gulp

タスクの内容を記述:

gulp.task('sample', function() {
    console.log('サンプル!');
})

デフォルトのタスクを指定:

gulp.task('default', ['sample'])

とりあえずタスクを動かすところまでできました。

• 参考文献
  gulp gulp.js を今一度キチンと！gulp.js 導入基礎 Gulp.js入門