gulpを触ってみたら使い勝手がかなりよかったので、gulpの使い方をメモ。

gulpとは

Node.jsを使用したビルドシステムです。

gulp.js - the streaming build system

gruntのように構築時に便利な処理を自動で実行させることができます。 gulpとgruntを使ってみた感想ですが、gruntはプラグインがある一つの機能をまとめて実行するのに対して、gulpは細かな機能を組み合わせて使用するようなイメージです。 gulpのほうがJSファイルもわかりやすくてよい感じでした。

gulpを使用するにはnode.jsが必要なのでダウンロードをしておいてください。

package.jsonを準備する

まずgulpのプラグインを管理するためにpackage.jsonを準備する必要があります。 使用するフォルダまで移動して下記を実行します。

$ npm init

すると質問形式で、ファイルが自動的に構築されます。

package.jsonについて詳しく知りたい方は下記の内容を参考に。 npm package.json 日本語版 取扱説明書

ここではとりあえず、package.jsonが準備できればOKです。

gulpのインストール

package.jsonが準備できたら、次はgulpのインストールです。 まずはターミナルで以下を実行します。

$ npm install -g gulp

-gでグローバル環境にインストールされ、どこからでもgulpを使えるようになります。 何もつけないとローカルでインストールされます。

次にpackage.jsonの入っているディレクトリまで移動して、以下を実行します。

$ npm install --save-dev gulp

できたらgulpfile.jsを用意してとりあえず下記の内容を記入します。

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('hello world');
});

上記を実行してうまくいけば設定完了です。

gulpfile.jsについて

var gulp = require(‘gulp’);

Node.jsでモジュールを読み込むときに使用します。 上記のコードでgulpという変数にgulpのモジュールを入れています。

gulp.task()

タスクを登録します。 第一引数はタスクの名前です。

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('hello world');
});

名前をdefaultと指定すると

$ gulp

で実行ができます。

var gulp = require('gulp');

gulp.task('hello', function() {
  console.log('hello world');
});

上記のように'hello'とした場合は、

$ gulp hello

で実行可能です。

第2引数にはタスクを複数指定することもできます。 複数指定する場合は配列にタスク名を入れます。

var gulp = require('gulp');

gulp.task('hello', function() {
  console.log('hello');
});

gulp.task('world', function() {
  console.log('world');
});

gulp.task('default', ['hello', 'world']);

上記の状態で

$ gulp

を実行した場合helloとworldが実行されます。

gulp.watch()

ファイルを監視する際に使用します。 第一引数に監視したいファイルのpathを入れます。 第二引数には実行したいタスク名を入れます。

var gulp = require('gulp');

gulp.tast('watch', function(){
  console.log('change');
});

gulp.task('default', function() {
  gulp.watch('htdocs/css/style.css', ['watch']);
});

上記の場合、gulpを実行した後style.cssを変更するとwatchが実行されます。

gulp.src()、gulp.dest()

gulp.src()はタスクを実行するファイルを指定します。 gulp.dest()はタスクを実行した後のファイルの保存先です。

var gulp = require('gulp');

gulp.task('watch', function(){
  gulp.src('htdocs/css/style.css')
    .pipe(gulp.dest('htdocs/css_copy/'));
});

gulp.task('default', function() {
  gulp.watch('htdocs/css/style.css', ['watch']);
});

gulpを実行してstyle.cssを変更すると、新たにcss_copyフォルダ内に同じファイルが作成されます。 gulp.src()に対してpipe()で処理をつなげて、gulp.dest()で書き出しを行うというようなイメージです。 上記のgulp.src()の後ろに様々なプラグインをつなげることで便利な処理をいろいろと実行できるようになります。

プラグインを使用してみる

gulpには様々なプラグインが用意されています。 gulp.js plugin registry

今回はSassをコンパイルするプラグインを使用します。 まずは下記を実行し、ローカルにgulp-sassをインストールします。

$ npm install --savave-dev gulp-sass

インストールしたらgulpfile.jsを以下のように変更します。

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

gulp.task('watch', function(){
  gulp.src('htdocs/scss/style.scss')
    .pipe(sass())
    .pipe(gulp.dest('htdocs/css/'));
});

gulp.task('default', function() {
  gulp.watch('htdocs/scss/style.scss', ['watch']);
});

require()でgulp-sassを呼び出します。 gulp.watch()はscssファイルを指定して、監視します。 gulp.src()でコンパイルするファイルを指定して、.pipe()でgulp-sassを実行します。 実行した後のコンパイル先をgulp.dest()で指定します。 さらにほかにも機能を追加したいときは.pipe(sass())の後ろに連結していけば様々な処理を自分で組み合わせて行うことができます。

今回使ってみて、個人的にはgruntよりもJSファイルがわかりやすく、管理しやすいように感じました。 また処理がgulpの方が軽快です。 いろいろと情報もいっぱいあるので調べてみれば結構簡単にいけそうです。

まだ使い初めなので、もし間違いなどございましたらご指摘いただけたら幸いです。