Gulpのverアップ（Gulp3→Gulp4）で、動かなくなったgulpfile.js を修正。

タスク関数のtask()と、ファイルの変化を感知（監視）する関数の watch()が、
Gulpのverが 3 から 4 に上がったことで、仕様が変更になったとこのこと。
それに気づかず、gulpfile.js の記述が古いままだとエラーで動かないのでメモで残します。

##■エラーが出たから調べてみた

出ていたエラーは以下。

[00:00:00] The following tasks did not complete: mytask
[00:00:00] Did you forget to signal async completion?

エラー文でいろいろググってたらGulp4の記事を見つけました。

###■gulp.taskの変更点
エラーの文面からも、「Did you forget to signal async completion?」（非同期の完了を通知するのを忘れましたか？）とのことなので、非同期の完了を明示的にしないといけません。
調べたところ記載方法は以下通り。

//Gulp4では…
function task3(done) {
  //処理内容
  done();
}

gulp.task にdone を引数として渡す必要があります。
コールバック関数を実行することでgulpにタスクの完了を通知しています。

●コールバックとは
関数の引数に別の関数を指定する処理。
Aという関数が実行されたあとに引数で指定していたBという関数を実行するということが可能になる。

また、下記のようなエラー文もでてました。

[00:00:00]Task function must be specified

「Task function must be specified」（タスク関数を指定する必要があります）とのことで、関数の記載自体に誤りがある模様。

調べたところ、task処理では、直列処理series()と、並列処理parallel()が必要になりました。

//Gulp3だと…
gulp.task('default', ['task1', 'task2'], function(){
    // タスクの記述
});

↓

//Gulp4では…
gulp.task('default', gulp.series( gulp.parallel('task1', 'task2'), function(){
    // タスクの記述
}));

###■gulp.watchの変更点

watch処理では、第二引数の指定方法が変わります。
これまでGulp3ではタスク名で指定していたところを、Gulp4では関数で指定することになります。

//Gulp3だと…
gulp.watch('webroot/sass/*.sass', ['sass']);

↓

//Gulp4では…
gulp.watch('webroot/sass/*.sass', gulp.task('sass'));

##■例えば、browser-syncをGulp4で記載するとこんな感じ

Gulp3でのgulpfile.js

var gulp = require('gulp');
var browserSync =require('browser-sync');

gulp.task('default', ['browser-sync']);


gulp.task('browser-sync', function() {
    browserSync({
        server: {

             //対象ディレクトリ
             baseDir: "./htdocs/",

             //インデックスファイル
             index: "index.html"
        }
    });
});


//ブラウザリロード
gulp.task('bs-reload', function () {
    browserSync.reload();
});

//監視ファイル
gulp.task('default', ['browser-sync'], function () {
    gulp.watch("./htdocs/*.html",            ['bs-reload']);
    gulp.watch("./htdocs/commons/css/*.css", ['bs-reload']);
    gulp.watch("./htdocs/commons/js/*.js",   ['bs-reload']);
});

↓以上から、Gulp4では、記載はこんな感じになります。

Gulp4でのgulpfile.js

var gulp = require('gulp');
var browserSync =require('browser-sync');

gulp.task('default', ['browser-sync']);

// ブラウザシンク
gulp.task('browser-sync', function(done) {
    browserSync({
        server: {

             //対象ディレクトリ
             baseDir: "./htdocs/",

             //インデックスファイル
             index: "index.html"
        }
    });
    done();
});


//ブラウザリロード
gulp.task('bs-reload', function (done) {
    browserSync.reload();
    done();
});

//監視タスクの実行
gulp.task('default', gulp.series(gulp.parallel('browser-sync'), function () {
    gulp.watch("./htdocs/*.html",            gulp.task('bs-reload'));
    gulp.watch("./htdocs/commons/css/*.css", gulp.task('bs-reload'));
    gulp.watch("./htdocs/commons/js/*.js",   gulp.task('bs-reload'));
}));

sass のコンパイルと browser-sync を両立させるとこのような感じになります。

//プラグインの読み込み
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');

let path = {
  src1: './src/**/*.scss',
  dist: './dist/'
}

// sassのコンパイル
gulp.task('sass', function (done) {
  // .scssファイルを取得
  gulp.src(path.src1)
    .pipe(sass())
    // sassのコンパイルを実行、error以降Sassのコンパイルエラーを表示(これがないと自動的に止まってしまう)
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    // cssフォルダー以下に保存
    .pipe(gulp.dest(path.dist));
  done();
});

// ブラウザシンク
gulp.task('bs-sync', function (done) {
  browserSync({
    server: {
      baseDir: "./dist/", index: "index.html"
    }
  });
  done();
});
gulp.task('bs-reload', function (done) {
  browserSync.reload();
  done();
});

//監視タスクの実行
gulp.task('default', gulp.series(gulp.parallel('sass', 'bs-sync'), function () {
  gulp.watch(path.src1, gulp.task('sass'));
  gulp.watch('./dist/**/*.html', gulp.task('bs-reload'));
  gulp.watch('./dist/**/*.css', gulp.task('bs-reload'));
  gulp.watch('./dist/**/*.js', gulp.task('bs-reload'));
}));

現時点ではまだまだGulp3時の記事が世に多いので記載に注意。

##■参照
色々調べて下記を参照させて頂きました。