gulpfile.jsの書き方。gulp4でbrowser-syncが動きません

Question

#gulp4でbrowser-syncが動きません

他の言語含めて、javaScript初心者です。
参考サイトより寄せ集め、コピペで作ったgulpfile.jsです。

##現在の状態について
htdocs内のhtmlファイルを更新しても、browser-syncにより更新されません。
前半のCSSの書き出しは正常に動きます。

browser-syncは立ち上がり、サイトが表示されます。
その状態で更新をしても、変更されません。

$ npx gulp
[12:59:07] Using gulpfile ~/Documents/project/p1/gulpfile.js
[12:59:07] Starting 'default'...
[12:59:07] Starting 'watch'...
[12:59:07] Starting 'browser-sync'...
watch start *********
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.3.2:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ------------------------------------
[Browsersync] Serving files from: htdocs

##やりたいこと

####1
wacthにて、htmlの更新によりbrowser-syncを動作させたいです。

####2　CSS更新後にもリロードしたい
のですが、下記をCSS書き出し後に追加するとSyntaxErrorになります・・・
.pipe(browserSync.reload());
ご助言お願いいたします。

####3　追伸で：ヒント頂ければ助かります・・・

独学で勉強中なのですが、例えばdefaultタスクの
console.log('point1 #############')
などはコンソールに表示されません。
通常のjavaScriptではブラウザコンソールに出るかと思います。
なぜなのか、、理解できていません。
参考になるサイト等ありましたらご助言頂けたら幸いです。

// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');
const autoprefixer = require( 'gulp-autoprefixer' );
const plumber = require( 'gulp-plumber' );

//★★★ブラウザリロード
const browserSync =require('browser-sync');



 
// デフォルト
gulp.task('watch',  () =>  {
console.log('watch start *********')
  // ★ style.scssファイルを監視
  return gulp.watch('htdocs/css/*.scss', function () {
    // style.scssの更新があった場合の処理
 
    // style.scssファイルを取得
    return gulp.src('htdocs/css/*.scss')
      // Sassのコンパイルを実行
        .pipe( plumber() ) // 4
      .pipe(sass({
        outputStyle: 'expanded'
      })
      // Sassのコンパイルエラーを表示
      // (これがないと自動的に止まってしまう)
      .on('error', sass.logError))
      
        .pipe( autoprefixer( { // 7
            browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
            cascade: false
        } ) )

      // cssフォルダー以下に保存
      .pipe(gulp.dest('htdocs/css'));


  });
  
  
  
});

// browser-sync
gulp.task('browser-sync', () => {
  browserSync({
    server: {
      baseDir: 'htdocs',
    }
  });
});




 
// default
gulp.task('default', gulp.parallel('watch', 'browser-sync'), () => {
console.log('point1 #############')
gulp.watch(['htdocs/**'], gulp.task('browserSync.reload', gulp.parallel(console.log('point2 #############'))))

});