gulp-connect のリロード処理だけ別タスクにする時のTips

リロードさせる関数があるので、gulpでwatchしている時など好きなタイミングでlocalhostをリロードさせることができるgulp-connectですが、リロードさせるタスクをまとめようとした時にチョットしたハマりどころが合ったのでメモ。

公式に書かれてるやり方

🙆‍♀️リロードされる

const gulp    = require('gulp'),
      stylus  = require('gulp-stylus'),
      connect = require('gulp-connect');

const server = (cb) => {
  connect.server({
    root: webroot,
    livereload: true,
    port: 3000
  });
  cb();
};

const buildCss = () => {
  return gulp.src( files )
    .pipe( stylus() )
    .pipe( gulp.dest( destDir ) )
    .pipe( connect.reload() );
};

const watchCSS = (cb) => {
  gulp.watch([
    `${devDir}/style/**/*.styl`
  ], buildCss);
  cb();
};

gulp.task( 'default', gulp.series(server, watchCSS) );

各タスクにの最後に.pipe( connect.reload() )をつけてリロードさせる方法。
どこでリロードするのかすぐ判るしシンプルでよいのですが、watchで実行するタスクが増えて、最後にリロードさせたいってなった時タスクに変更がある度に最後のタスクにリロードの処理を付け直さなくなるのでリロードの処理だけ別の関数にしたい感はあります。

リロードの処理を別関数にする

gulp-connectのリロードはgulp.src().pipe( connect.reload() )でしか動作しないっぽい

🙅‍♀️リロードされない

const gulp    = require('gulp'),
      connect = require('gulp-connect');

const server = (cb) => { /* 略*/ };

const reload = (cb) => {
  connect.reload();
  cb();
};

const buildCss = () => { /* 略*/ };

const watchCSS = (cb) => {
  gulp.watch([
    `${devDir}/style/**/*.styl`
  ], gulp.series(buildCss, reload));
  cb();
};

gulp.task( 'default', gulp.series(server, watchCSS) );

タスク内でそのままconnect.reload();を呼び出してもリロードされませんでした。

🙆‍♀️ gulp.src().pipe() でならリロードされる

const gulp    = require('gulp'),
      connect = require('gulp-connect');

const server = (cb) => { /* 略*/ };

const reload = () => {
  return gulp.src(webroot).pipe( connect.reload() );
};

const buildCss = () => { /* 略*/ };

const watchCSS = (cb) => {
  gulp.watch([
    `${devDir}/style/**/*.styl`
  ], gulp.series(buildCss, reload));
  cb();
};

gulp.task( 'default', gulp.series(server, watchCSS) );