gulpを学ぶ - darudaru

PHPerにもgulp便利だって聞いた。

gulp

gulp.js
タスクを自動化してくれるツール。「がるぷ」と呼びます。

gulpでできること

ファイルをコピーしたりリネームしたり、画像圧縮したり、ファイル操作を自動化できる
ファイルの変更を検知して何かできる

Getting Started

あらかじめnode.jsとnpmをインストールしておく必要があります。

gulpのインストール

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

npm install --global gulp-cli

ローカルにインストール

プロジェクトのディレクトリ内でやる

npm install --save-dev gulp

gulpfileを作る

プロジェクトのルートディレクトリ配下にgulpfile.jsを置きます。

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

実行する

% gulp
[13:43:28] Using gulpfile ~/git/github.com/kanoemon/php-design-pattern/gulpfile.js
[13:43:28] Starting 'default'...
[13:43:28] Finished 'default' after 92 μs

動いた。

Usage

公式ドキュメントはここ。
gulp/API.md at master · gulpjs/gulp · GitHub

gulp.src()

操作対象のファイルを指定する。

gulp.src('hoge.php')   // 1ファイル
gulp.src(['hoge1.php', 'hoge2.php'])  // 複数ファイルは配列で
gulp.src('test/*.php')   // testディレクトリ配下の**.phpファイル
gulp.src('test/**/*.php')  // test/任意ディレクトリ 配下の**.phpファイル

gulp.dest()

出力先のディレクトリを指定する。
ディレクトリがなかったら作成してくれる。

gulp.task()

タスクを作成する。defaultの名前で作成すると、gulpで実行されるタスクになる。

// gulp hoge で実行されるタスク
gulp.task('hoge', function(){
});

// gulp で実行されるタスク
gulp.task('default', function() {
});

複数タスク

配列でタスク名を渡すせばいい。

gulp.task('default', ['hoge1', 'hoge2']);

ただ、gulpはタスクを並行処理で実行するため、タスクに順序がある場合は、タスクの順番を指定してあげる必要がある。

// hoge2→hoge1で実行したい場合

// 第2引数に事前に実行して置きたいタスク名を
gulp.task('hoge1', ['hoge2'], function(){
});

// hoge1へreturnで処理を返してあげる
gulp.task('hoge2', function(){
    return 処理
});

gulp.watch()

ファイルに変更が入ったときに何かをする。第1引数に監視対象のファイルを指定する。
ファイル指定にはgulp.src()と同じようにファイル指定にはワイルドカードが使える。

// tests/任意ディレクトリ 配下の**.phpファイルに変更が入った場合に処理する
gulp.watch('tests/**/*.php', function() {
});

gulp.watch()があると、gulpを実行した後gulpが監視した状態のままになります。
gulpの監視はCtrl+cで止めることができます。

プラグイン

gulp.js plugin registry
プラグインを使うことでより色々できるようになる。

インストール

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

使う

var 変数名 = require('プラグイン名');

プラグインで実行する処理はpipe()でかく。

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

gulp.src("./src/test.ext")
   // gulp-notify プラグインを実行する
  .pipe(notify("Hello Gulp!"));

※pipe()を使うことで、複数の処理をつなげて書くこともできる。

まとめ

簡単にすぐ動かせた
package.jsonを作っておけばnpm installで他の環境でもgulpの環境が構築できて便利