Gulp タスクを順番に実行する方法: `gulp-util` モジュールの `log()` メソッドを使う

JavaScript、Node.js、CoffeeScript で Gulp タスクを順番に実行する方法

gulp.task() メソッドの第 2 引数を使う

gulp.task() メソッドの第 2 引数に、依存関係を持つタスクの配列を渡すことができます。こうすることで、最初のタスクが完了してから 2 番目のタスクが実行され、というように順番に実行されます。

// タスク 1
gulp.task('task1', function() {
  // 処理
});

// タスク 2
gulp.task('task2', function() {
  // 処理
});

// タスク 1 を完了してからタスク 2 を実行
gulp.task('default', ['task1', 'task2']);

run-sequence モジュールを使う

run-sequence モジュールを使うと、タスクの実行順序をより細かく制御できます。

var runSequence = require('run-sequence');

// タスク 1
gulp.task('task1', function() {
  // 処理
});

// タスク 2
gulp.task('task2', function() {
  // 処理
});

// タスク 1 を完了してからタスク 2 を実行
gulp.task('default', function() {
  runSequence('task1', 'task2');
});

gulp-util モジュールの log() メソッドを使う

gulp-util モジュールの log() メソッドを使って、タスクの実行順序をログに出力できます。

var gutil = require('gulp-util');

// タスク 1
gulp.task('task1', function() {
  gutil.log('タスク 1 を実行');
  // 処理
});

// タスク 2
gulp.task('task2', function() {
  gutil.log('タスク 2 を実行');
  // 処理
});

// タスク 1 を完了してからタスク 2 を実行
gulp.task('default', ['task1', 'task2']);

CoffeeScript を使う

CoffeeScript を使っている場合は、上記の JavaScript コードを CoffeeScript に変換して使用できます。

# タスク 1
gulp.task 'task1', ->
  # 処理

# タスク 2
gulp.task 'task2', ->
  # 処理

# タスク 1 を完了してからタスク 2 を実行
gulp.task 'default', ['task1', 'task2']

JavaScript

// タスク 1
gulp.task('task1', function() {
  console.log('タスク 1 を実行');
  // 処理
});

// タスク 2
gulp.task('task2', function() {
  console.log('タスク 2 を実行');
  // 処理
});

// タスク 1 を完了してからタスク 2 を実行
gulp.task('default', ['task1', 'task2']);

Node.js

// タスク 1
const task1 = () => {
  console.log('タスク 1 を実行');
  // 処理
};

// タスク 2
const task2 = () => {
  console.log('タスク 2 を実行');
  // 処理
};

// タスク 1 を完了してからタスク 2 を実行
gulp.task('default', gulp.series(task1, task2));

CoffeeScript

# タスク 1
gulp.task 'task1', ->
  console.log 'タスク 1 を実行'
  # 処理

# タスク 2
gulp.task 'task2', ->
  console.log 'タスク 2 を実行'
  # 処理

# タスク 1 を完了してからタスク 2 を実行
gulp.task 'default', ['task1', 'task2']

async.series() メソッドを使う

async モジュールの series() メソッドを使って、タスクを順番に実行できます。

var async = require('async');

// タスク 1
function task1(callback) {
  // 処理
  callback();
}

// タスク 2
function task2(callback) {
  // 処理
  callback();
}

// タスク 1 を完了してからタスク 2 を実行
gulp.task('default', function() {
  async.series([task1, task2], function() {
    // 全てのタスクが完了
  });
});

gulp-watch モジュールを使う

gulp-watch モジュールを使って、ファイル変更を監視し、順番にタスクを実行できます。

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

// タスク 1
gulp.task('task1', function() {
  // 処理
});

// タスク 2
gulp.task('task2', function() {
  // 処理
});

// ファイル変更を監視し、タスク 1 を実行
gulp.task('watch', function() {
  watch('app.js', function() {
    gulp.start('task1');
  });
});

// タスク 1 を完了してからタスク 2 を実行
gulp.task('default', ['watch', 'task2']);

自作のタスクランナーを使う