かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Gulp コマンド一発でwebサーバーを立ち上げてwatchを開始したい

$ gulp

コマンドを打てば、webserverが起動して、gulp.watchも始まるようにする方法のメモ

gulpコマンドはgulp.task('default')で定義したものが実行されるので

var gulp        = require("gulp"),
    webserver   = require('gulp-webserver');

gulp.task('default', function() {
  gulp.src('./app')
    .pipe(webserver({
      livereload: true,
      port: 3000
    }));
  gulp.watch(['dev/jade/**/*.jade'], ['jade']);
});

としても良いのですが、なんかイケてない。
webserverの起動はやっぱ別タスクにしたいですね。

単純に考えればrun-sequence プラグインとかタスクを実行するプラグインで実行させる方法が思いつきます。

var gulp        = require("gulp"),
    webserver   = require('gulp-webserver'),
    runSequence = require('run-sequence');

gulp.task('webserver', function() {
  gulp.src('./app')
    .pipe(webserver({
      livereload: true,
      port: 3000
    }));
});

gulp.task('default', function(cb) {
  runSequence('webserver', cb);
  gulp.watch(['dev/jade/**/*.jade'], ['jade']);
});

webserverタスク実行のためだけにrunSequence('webserver', cb);とするのも、もう少し無理矢理感があります...

gulp.task の第二引数をつかう

gulp.src(globs[, options])
gulp.task()の第二引数に依存するタスクがあると依存するタスクを実行してから、そのタスクが実行されるようになるようです。
これを利用することで、クールな書き方にする事ができました!

var gulp        = require("gulp"),
    webserver   = require('gulp-webserver');

gulp.task('webserver', function() {
  gulp.src('./app')
    .pipe(webserver({
      livereload: true,
      port: 3000
    }));
});

// default タスクは webserver タスクに依存
//  -> webserver タスクが実行されてから default のタスクが実行される
gulp.task('default', ['webserver'], function() {
  gulp.watch(['dev/jade/**/*.jade'], ['jade']);
});

 
これで、不要な処理をさせずにgulpコマンド一発でwebサーバーを立ち上げてwatchを開始することができるようになりました \\\ ٩( 'ω' )و ////  


[参考]

少女終末旅行 1巻

少女終末旅行 1巻