gulp 4文件更改跟踪无法正常运行

Question

我想用gulp构建代码并跟踪所有更改并重新构建并重新加载浏览器，为此我在gulpfile.js中编写了以下代码。所有方法都起作用，但 watch（）在源更改。 我想对文件gulp中所做的更改构建所有代码并自动刷新浏览器。 请帮忙。 我的gulp版本是

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
const terser = require('gulp-terser');
let babel = require('gulp-babel');
const del = require('del');
var replace = require('gulp-replace');
var webserver = require('gulp-webserver');
var debug = require('gulp-debug');
var inject = require('gulp-inject');
//var series = require('stream-series');
var runSequence = require('run-sequence');
var browsersync = require("browser-sync").create();

// BrowserSync
function browserSync(done) {
    browsersync.init({
      server: {
        baseDir: "./build/"
      },
      port: 3000
    });
    done();
  }

  // BrowserSync Reload
  function browserSyncReload(done) {
    browsersync.reload();
    done();
  }


function clean() {
    return del('build/**', { force: true });
}


// Sass task: compiles the style.scss file into style.css
function libraryCSS() {
    return gulp.src(['css files'])
        .pipe(cssnano())
        .pipe(debug())
        .pipe(concat('library.style.min.css'))
        .pipe(replace('../webfonts', './webfonts'))
        .pipe(gulp.dest('build'))
        //.pipe(browsersync.stream());
    // put final CSS in dist folder
}

function libraryCSSFont() {
    return (
        gulp.src(['plugins/fontawesome-free/webfonts/*'])
            .pipe(debug())
            .pipe(gulp.dest('build/webfonts'))
           // .pipe(browsersync.stream())
    );
}

function templateCustomCSS() {
    return (
        gulp.src(['dist/css/adminlte.min.css'])
            .pipe(cssnano())
            .pipe(debug())
            .pipe(concat('template-custom.style.min.css'))
            .pipe(gulp.dest('build'))
            //.pipe(browsersync.stream())
    );
}

function libraryJS() {
    return (
        gulp.src(['js files'])
            .pipe(concat('plaugin-library.js'))
            //.pipe(uglify())
            .pipe(debug())
            .pipe(terser())
            .pipe(gulp.dest('build'))
            //.pipe(browsersync.stream())
    );
}

function templateCustomJS() {
    return (
        gulp.src(['another set of js files'])
            .pipe(concat('template-custom-js.js'))
            //.pipe(uglify())
            .pipe(debug())
            .pipe(terser())
            .pipe(gulp.dest('build'))
            //.pipe(browsersync.stream())
    );
}

// JS task: concatenates and uglifies JS files to script.js
function frameworkGlobalJS() {
    return (
        gulp.src(['scripts/config.js', 'scripts/00.global.js'])
            .pipe(concat('framework-global-js.js'))
            //.pipe(uglify())
            .pipe(debug())
            .pipe(terser())
            .pipe(gulp.dest('build'))
           //.pipe(browsersync.stream())
    );
}
function frameworkScripts() {
    return gulp.src(['js files'])
        .pipe(babel({
            presets: ['@babel/env'],
        }))
        .pipe(concat('framework-scripts.js'))
        .pipe(debug())
        .pipe(terser())
        .pipe(gulp.dest('build'))
       // .pipe(browsersync.stream())
}

function copyStaticAsets() {
    return (
        gulp.src(['dist/img/*'])
            .pipe(debug())
            .pipe(gulp.dest('build/dist/img'))
            //.pipe(browsersync.stream())
    );
}

function copyPage() {
    return (
        gulp.src(['index.html', 'login.html', 'favicon.ico'])
            .pipe(debug())
            .pipe(gulp.dest('build'))
            //.pipe(browsersync.stream())
    );
}



function copyPages() {
    return (
        gulp.src(['pages/**/*'])
            .pipe(debug())
            .pipe(gulp.dest('build/pages'))
            //.pipe(browsersync.stream())
    );
}

gulp.task('webserver', function () {
    gulp.src('build')
        .pipe(webserver({
            port: 3000,
            livereload: {
                enable: true, // need this set to true to enable livereload
                filter: function (fileName) {
                    if (fileName.match(/.map$/)) { // exclude all source maps from livereload
                        return false;
                    } else {
                        return true;
                    }
                }
            },
            directoryListing: {
                enable: false,
                path: 'build'
            },
            //host:'0.0.0.0',
            open: true,
            fallback: 'index.html'
        }));
});





    gulp.task('watchTask',function(){
    gulp.watch(['scripts/config.js', 'scripts/00.global.js', 'scripts/AmountInWord.js', 'scripts/api-call.js',
        'scripts/common.js', 'scripts/dashboard.js', 'scripts/**/*.js', 'index.html', 'login.html', 'favicon.ico', 'pages/**/*'],
        gulp.series(
            gulp.parallel(libraryCSS,
                libraryCSSFont,
                templateCustomCSS,
                libraryJS,
                templateCustomJS,
                frameworkGlobalJS,
                frameworkScripts,
                copyStaticAsets,
                copyPage,
                copyPages),
                'webserver','watchTask'
        )
    );

})

exports.default = gulp.series(
    clean,
   gulp.parallel(
    libraryCSS,
        libraryCSSFont,
        templateCustomCSS,
        libraryJS,
        templateCustomJS,
        frameworkGlobalJS,
        frameworkScripts,
        copyStaticAsets,
        copyPage,
        copyPages),
        'webserver',
        'watchTask'


);