gulpを使ってみた

各種タスクを定義してタスクの実行を自動化する、タスクランナーという呼ばれる類のツールがあります。

node.js環境では、grunt、gulpあたりが定番みたいです。
でも、最近はgulpの方が勢いがありそうだし、タスクの定義もスッキリ書けそう、ということでgulpを使ってみました。

gulpの使い方を調べてると、gulpをグローバルとプロジェクトのローカル両方にインストールする前提で説明してることが多いです。

ですが、両方のバージョンを管理なんてしたくないし、ローカルにインストールしたgulpを実行するためにグローバルにgulpを入れる、というのもなんかナンセンス。
↓を参考に、グローバルな環境を汚さずに、ローカルへのインストールのみでgulpを使ってみました。
http://qiita.com/Jxck_/items/efaff21b977ddc782971
http://protean.cc/getting-started-with-gulp-and-npm

npmでgulpをインストール

gulpは開発時に使用するものであり、最終的なリリース物に含めるものではありません。
ということで、npmでdevDependenciesとしてインストールします。

コンソールからインストールする場合

コンソールからインストールする場合は以下のコマンド

npm install gulp --save-dev

NTVSのnpm GUI ツールからインストールする場合

NTVSを使っている場合は、以下のようにGUIからでもインストールできます。
f:id:minami_SC:20150412132116p:plain:w300

gulpfile.jsを作成

gulpで実行するタスクはgulpfile.jsに書いていきます。
このとき、プロジェクトの構成は以下のようになっています。
f:id:minami_SC:20150412132141p:plain

今回はファイルのコピーだけをしてみます。
プロジェクト直下の階層にある.jsファイルを、destディレクトリにコピーしてます。

gulpfile.js

var gulp = require('gulp');

// ファイルをコピーするタスクの定義
gulp.task('copyFiles', function () {
    return gulp.src('./*.js')
               .pipe(gulp.dest('./dest/'));
});


// gulpコマンドで実行されるデフォルトのタスク定義
gulp.task('default', ['copyFiles']);

gulpfileを書いたらコンソールから以下のコマンドを実行すると、gulpのタスクを実行することができます。

node_modules\.bin\gulp

gulpをnpm経由で実行する

前述のようにして、node_modules内のgulpコマンドを呼び出すのはちょっと面倒です。
ということで、gulpを実行するためのコマンドをnpm経由で実行できるようにします。
package.jsonに以下のようなscriptsという項目を追記します。

package.json

{
    "name": "NodejsConsoleApp1",
    "version": "0.0.0",
    "description": "NodejsConsoleApp1",
    "main": "app.js",
    "scripts": {
        "gulp": "gulp"
    },
    "devDependencies": {
        "gulp": "^3.8.11"
    }
}