Help us understand the problem. What is going on with this article?

Gruntの代替ビルドツール。gulpをはじめる。

More than 5 years have passed since last update.

Gruntの代替のビルドツールの候補になっているgulp
その使い方と、タスクの書き方。

インストール

globalにinstall

$ npm install -g gulp

localにもinstall

$ npm install gulp --save-dev

gulpfile.jsを置く

js:`gulpfile.js
var gulp = require('gulp’);
gulp.task('default', function() {
// place code for your default task here
});
`

実行する

$ gulp

プラグインの導入

src/以下の coffeeスクリプトをJavaScriptにコンパイルしてdist/に移す場合

$ npm install gulp-coffee --save-dev
gulpfile.js
var gulp = require('gulp');
var coffee = require('gulp-coffee'); // pluginの読み込み

gulp.task('coffee', function() {
  return gulp.src(['src/*.coffee']) // srcを指定
    .pipe(coffee())                 // 指定したファイルをJSにコンパイル
    .pipe(gulp.dest('dest'));       // dest先に出力する
});

// default タスクの時にcoffeeタスクを実行する
gulp.task('default', ['coffee'], function() {
  console.log('done');
});

gulp APIには、上のようにpipeを使うことによって
タスクを順番に記載していくことが出来る。

例えば、上でJS化したファイルを圧縮して、結合したい場合は
gulp-uglifygulp-concatを使う。

gulpfile.js
var gulp = require('gulp');
var coffee = require('gulp-coffee');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('coffee', function() {
  return gulp.src(['src/**/*.coffee'])
    .pipe(coffee())
    .pipe(uglify())             // minifyして...
    .pipe(concat('all.min.js')) // 結合する
    .pipe(gulp.dest('dest'));
});

gulp.task('default', ['coffee'], function() {
  console.log('done');
});

API

gulpはいくつかAPIを提供している。

https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp.src(globs[, options])

pipeに渡したいファイルを node-glob形式で指定する。

gulp.dest(path)

pipeで処理しきったものの出力先。
下みたいに、pipeの途中で一回ファイルに書き出すことも出来る。

gulpfile.js
gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

gulp.task(name[, deps], fn)

タスクの定義の仕方。
deps でここで定義したタスクを走らせる前に実行するタスクを指定出来る。配列指定

非同期タスクのサポート

fnの中の処理が非同期処理の場合は
callbackを引数に持つ、streamを返す、promiseを返すなど行う。
逆にちゃんと設定しないと、期待した順にタスクが動かない場合がある。

gulpfile.js
gulp.task('task1', function(cb) {
  setTimeout(function() {
    console.log('task1');
    cb();
  }, 1000);
});

gulp.task('task2', function() {
  setTimeout(function() {
    console.log('task2');
  }, 1000);
});

gulp.task('foo', ['task1'], function() { // ‘task1’, ‘complete'
  console.log('complete');
});
gulp.task('bar', ['task2'], function() { // ‘complete’, ’task2'
  console.log('complete');
});

gulp.watch(glob [, opts], tasks)

watchはgulpのAPIに定義されてる。

gulpfile.js
gulp.task('check', function() {
  var watcher = gulp.watch('src/**/*.coffee', ['task1']); // watchしたいファイルと実行タスクを指定
  watcher.on('change', function(event) {                      // 変更時のイベント
    console.log('File '+event.path+' was '+event.type+', running tasks...');
  });
});

gulp.task('default', ['coffee', 'check'], function() {
  console.log('done');
});

イベントは
added changed deleted などがある。

所感

  • Gruntの後発なので、コンパクトな構成
    • Gruntのあのちょっと独自なJSON形式がない
  • プラグインがどれだけあるかは、ちょっと調べる。
taizo
ruby,javascript,go とかウェブサービスに関わる小さな話を書いていきます。 最近はGoばかりやってます。基本はメモ。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした