バージョン

const gulp = require('gulp');
const pug = require('gulp-pug');
const browserSync = require('browser-sync');

/**
 * `src`ディレクトリ配下のすべての`.pug`ファイルをコンパイルして`dist`へ出力する
 */
gulp.task('pug', function(done) {  // .pugファイルを読み込む
  gulp.src(src/**/*.pug')
    .pipe(pug({
      // pugファイルを整形するオプション
      pretty: true
    }))
    // .htmlファイルを出力する
    .pipe(gulp.dest(dist'));
    done();});

/**
 * ローカルサーバーを起動する
 */
gulp.task('browser-Sync', function() {
  // ~ (略) ~
});

/** * pugファイルの変更を検知して自動でHTMLに出力 */gulp.task('watch', function(done) {  // `./src/**/*.pug`を監視して変更を検知したらgulp.task('pug')を実行する  gulp.watch(src/**/*.pug', gulp.task('pug'));  done();});

const gulp = require('gulp');
const pug = require('gulp-pug');
const browserSync = require('browser-sync');

/**
 * `src`ディレクトリ配下のすべての`.pug`ファイルをコンパイルして`dist`へ出力する
 */
gulp.task('pug', function(done) {
  // .pugファイルを読み込む
  gulp.src(src/**/*.pug')
    .pipe(pug({
      // pugファイルを整形するオプション
      pretty: true
    }))
    // .htmlファイルを出力する
    .pipe(gulp.dest(dist'))
    .pipe(browserSync.reload({stream: true}));    done();
});

/**
 * ローカルサーバーを起動する
 */
gulp.task('browser-Sync', function(done) {
  browserSync({
    server: {
      // プレビューしたいファイルの置いてあるディレクトリを指定
      baseDir: 'dist/',
      // プレビューしたいファイルを指定
      index: "index.html"
    }
  });
  done();
});

/**
 * pugファイルの変更を検知してリアルタイムプレビューする
 */
gulp.task('watch', gulp.series(gulp.parallel('pug', 'browser-Sync'), function(done) {  gulp.watch(src/**/*.pug', gulp.task('pug'));  done();}));