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 タスクを実行してくれる。
-
ref.
- gulp.js - the streaming build system
- 現場で使えるgulp入門 - gulpとは何か | CodeGrid
- gulp.jsで始めるWeb開発爆速自動化入門:便利なGruntの弱点を補うgulp.jsのインストールと使い方 (1/3) - @IT
tags: gulp
Posted by NI-Lab. (@nilab)