gulp とは何か

gulp は JavaScript ベースのビルドツール。 make (+ Makefile) や Apache Ant (+ build.xml) みたいなもの。

gulp をインストールする

今回の環境: Mac OS X Yosemite 10.10.2

Node.js はインストール済み。


$ node -v
v0.10.29

gulp をローカルにインストール。


$ npm install gulp
gulp@3.8.11 node_modules/gulp
├── pretty-hrtime@0.2.2
├── interpret@0.3.10
├── deprecated@0.0.1
(以下略)

インストールできているかバージョンを確認。


$ ./node_modules/.bin/gulp -v
[09:24:36] CLI version 3.8.11
[09:24:36] Local version 3.8.11

はじめてのビルド設定 (hello, world)

ビルド設定は gulpfile.js ファイルに書く。

gulpfile.js は、make の Makefile や、 Apache Ant の build.xml みたいなもの。

hello タスクを記述してみる。


$ cat ./gulpfile.js

var gulp = require('gulp');
 
// hello, world を出力するタスクを定義
gulp.task('hello', function(){
  console.log('hello, world');
});

gulp コマンドの引数に「hello」と指定することで、 hello タスクを実行できる。


$ ./node_modules/.bin/gulp hello
[09:31:42] Using gulpfile ~/ggg/gulpfile.js
[09:31:42] Starting 'hello'...
hello, world
[09:31:42] Finished 'hello' after 102 μs

default タスク

gulp では、コマンドの引数に何も指定しないと、 default タスクが実行されるようになっている。

gulpfile.js に default タスクを追加。


$ cat ./gulpfile.js

var gulp = require('gulp');
 
// hello, world を出力するタスクを定義
gulp.task('hello', function(){
  console.log('hello, world');
});

gulp.task('default', function() {
  // hello タスクを実行する
  gulp.run('hello');
});

gulp コマンドの引数に何も指定しないで実行。 default タスクが実行される。


$ ./node_modules/.bin/gulp
[09:32:44] Using gulpfile ~/ggg/gulpfile.js
[09:32:44] Starting 'default'...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
[09:32:44] Starting 'hello'...
hello, world
[09:32:44] Finished 'hello' after 129 μs
[09:32:44] Finished 'default' after 1.48 ms

gulp.run は非推奨の API だったらしい。。。まあ動いているからとりあえず良しとする。

グローバルに gulp をインストールしてみる

gulp はローカルにではなく、グローバルにインストールするのが一般的らしい。

試しに、グローバルに gulp をインストールしてみる。


$ npm install -g gulp

$ gulp -v
[09:41:53] CLI version 3.8.11
[09:41:53] Local version 3.8.11

gulpfile.js で非推奨だった部分をちょっとだけ書き直し。


$ cat ./gulpfile.js

var gulp = require('gulp');
 
// hello, world を出力するタスクを定義
gulp.task('hello', function(){
  console.log('hello, world');
});

// hello タスクを実行する
gulp.task('default', ['hello']);

グローバルにインストールした gulp を実行。


$ gulp
[09:49:16] Using gulpfile ~/ggg/gulpfile.js
[09:49:16] Starting 'hello'...
hello, world
[09:49:16] Finished 'hello' after 98 μs
[09:49:16] Starting 'default'...
[09:49:16] Finished 'default' after 14 μs

gulp が default タスク → hello タスクを実行してくれる。

tags: gulp

Posted by NI-Lab. (@nilab)