LoginSignup
60

More than 3 years have passed since last update.

gulp の run-sequence を使うときは return を忘れずに

Last updated at Posted at 2015-07-18

追記

Gulp4 から run-sequence が不要になりました. 以前の手順を Gulp4 で実行すると以下のようなエラーが表示されます.

TypeError: gulp.hasTask is not a function

Gulp4 からは同期処理・非同期処理を行う方法が Gulp に搭載されています.
以下の記事が参考になると思います.

Gulp4 での同期・非同期処理

  • run-sequence の場合

gulp.task( 'default', () => {
    runSequence('clean','pre-processing', 'bundle', ['copy1', 'copy2', 'copy3'], 'delete', () => {});
});
  • Gulp4 の場合は gulp.seriesgulp.parallel を使用する

gulp.task( 'default', 
    gulp.series(
        'clean',
        'pre-processing',
        'bundle',
        gulp.parallel(
            'copy1',
            'copy2',
            'copy3',
        ),
        'delete'
    )
);
  • gulp.seriesgulp.parallel を使用する場合でも gulp ストリームの return を忘れないこと.
  • ※ タスク内で gulp をストリームを使用していない場合は引数の callback を実行してタスクの終了を通知すること.

以前の情報も残しておきます

備忘録として.
gulp で同期処理を行うのは面倒くさい . それを簡単にしてくれるモジュールが 「run-sequence」.

README 読めば分かることなのだが , run-sequence を使って同期処理を行う場合は, 各 gulp タスクは return で返す必要があるとのこと .

例えば,


var gulp = require('gulp');
var typescript = require('gulp-typescript');
var concat = require('gulp-concat');
var uglify = require('gulp-uglifyjs');
var runSequence = require('run-sequence');

// 初期化
gulp.task('clean', function (callback) {
    // 行うタスク処理
    // 処理内容は省略
});

// TypeScript コンパイル
gulp.task('typescript-compile', function () {
    // 行うタスク処理
    // 処理内容は省略
});

// ファイル結合
gulp.task('concat', function () {
    // 行うタスク処理
    // 処理内容は省略
});

// ファイル圧縮
gulp.task('uglify', function () {
    // 行うタスク処理
    // 処理内容は省略
});

// デフォルトタスク
gulp.task('default', function (callback) {
    runSequence('clean', 'typescript-compile', 'concat', 'uglify', callback);
});

上記の場合は , clean , typescript-compile, concat, uglify の順で実行されることを期待して書いたビルドスクリプト . 各タスク処理内で return を省いていると 非同期で実行されてしまう模様 .

そこで各処理に return を付けると期待通りに動く .


var gulp = require('gulp');
var typescript = require('gulp-typescript');
var concat = require('gulp-concat');
var uglify = require('gulp-uglifyjs');
var runSequence = require('run-sequence');

// 初期化
gulp.task('clean', function (callback) {
    // 行うタスク処理
    return del(['./src/build/*.js'], callback);
  //^^^^^^
});

// TypeScript コンパイル
gulp.task('typescript-compile', function () {
    // 行うタスク処理
    return gulp.src(['./src/**/*.ts'])
  //^^^^^^
        .pipe(typescript(
            { 
                target: "ES5", 
                module: 'commonjs', 
                removeComments: true, 
                noExternalResolve: true 
            }
         ))
        .js
        .pipe(gulp.dest('./src/js/'));
});

// 以下省略

  • 正確には Promise オブジェクトまたは Stream オブジェクトを使用するタスクの場合には return をつけてオブジェクトを run-sequence に返さないといけない. README に記載のあるソースにもコメントで Return the Promise from del() と Return the stream from gulp と記述がある.
  • ただの同期処理のタスクであれば return を返す必要はない.
  • 同期処理にしたいものが一組しかない場合は, run-sequence を使うまでもなく return をつけて依存関係を設定すればよい .

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
60