有关 Gulp 的问题，browserSync、watch同时协助运行

Question

Gulp 各个单独的任务都可以正常运行，但是browserSync、watch协作运行跑不起来

项目目录结构

以下是我的 gulpfile.js(使用 Gulp4)，并不能运行，单独的各个任务都是可以运行的，唯独browserSync 和 watch 协作起来不能达到预想的结果，各位大神可以看我的 srcPath 和 distPath了解我项目的整个结构，希望有人能详细解答，促进交流

把browserSync和 watch 任务协同部分已经注释了

let gulp        = require("gulp"),
    htmlmin     = require('gulp-htmlmin'),
    css         = require("gulp-clean-css"),
    less        = require("gulp-less"),
    autoprefixer= require("gulp-autoprefixer"),
    babel       = require('gulp-babel'),
    jshint      = require("gulp-jshint"),
    uglify      = require("gulp-uglify"),
    imagemin    = require("gulp-imagemin"),
    concat      = require("gulp-concat"),
    clean       = require("gulp-clean"),
    del         = require('del'),
    filter      = require('gulp-filter'),
    cache       = require("gulp-cache"),
    rev         = require('gulp-rev'),
    rename      = require("gulp-rename"),
    usemin      = require("gulp-usemin"),
    gutil       = require('gulp-util'),
    sourcemaps  = require('gulp-sourcemaps'),
    watch       = require('gulp-watch'),
    livereload  = require('gulp-livereload'),
    browserSync = require("browser-sync").create(),
    reload      = browserSync.reload;

// 开发源码路径 和 部署路径
let srcPath = {
        root: "src/*.*",
        html: "src/html/**/*.html",
        css: "src/css/**/*.css",
        // less: "src/less/**/*.less",
        js: "src/js/**",
        res: "src/res/**/*"
    },
    distPath = {
        root: "dist",
        html: "dist/html",
        css: "dist/css",
        // less: "dist/less",
        js: "dist/js",
        res: "dist/res"
    };

// root 处理任务
gulp.task("root", function () {
    // console.log("root");
    return gulp.src(srcPath.root)
        .pipe(gulp.dest(distPath.root))
        // .pipe(browserSync.stream());
});

// html 处理任务
gulp.task("html", function () {
    // console.log("html");
    let options = {
        removeComments: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: true,
        removeEmptyAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        minifyJS: true,
        minifyCSS: true
    };
    return gulp.src(srcPath.html)
        // .pipe(htmlmin(options))
        .pipe(gulp.dest(distPath.html))
        // .pipe(browserSync.stream());
});

// css 处理样式任务
gulp.task("css", function () {
    // console.log("css");
    return gulp.src(srcPath.css)
        // .pipe(sourcemaps.init())
        // .pipe(rev())
        .pipe(autoprefixer("last 2 version", "ie >= 8", "Safari >= 8", "Opera >= 12.1", "iOS >= 6", "Android >= 4"))
        // .pipe(rename({suffix: ".min"}))
        .pipe(css())
        // .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(distPath.css))
        // .pipe(browserSync.stream());
});

// js 处理脚本任务
gulp.task("js", function () {
    // console.log("js");
    let f = filter(['**/*.js', '!**/*.min.js'], {restore: true});
    return gulp.src(srcPath.js)
        .pipe(f)
        // .pipe(sourcemaps.init())
        // .pipe(babel())
        // .pipe(jshint(".jshintrc"))
        // .pipe(jshint.reporter())
        // .pipe(rename({suffix: ".min"}))
        .pipe(uglify())
        // .pipe(sourcemaps.write("."))
        .pipe(f.restore)
        .pipe(gulp.dest(distPath.js))
        // .pipe(browserSync.stream());
});

// res 处理资源任务(图片、音频等)
gulp.task("res", function () {
    // console.log("res");
    return gulp.src(srcPath.res)
        .pipe(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        }))
        .pipe(gulp.dest(distPath.res))
        // .pipe(browserSync.stream());
});

// dist 目录清理
gulp.task("clean", function (cb) {
    let dist_arr = ["dist/*.*", "dist/html/*", "dist/css/*", "dist/js/*", "dist/res/*"];
    del(dist_arr);
    cb();
});

gulp.task('all', gulp.parallel('root', 'html', "css", "js", "res"));

gulp.task('build', gulp.series('clean', 'all'));

// 监听任务
gulp.task('watch', function () {
    // gulp.watch([srcPath.root, srcPath.html, srcPath.css, srcPath.js, srcPath.res], gulp.series('build'));
    // 监听所有 html
    gulp.watch(srcPath.html, gulp.series("html"));
    // 监听所有 css
    gulp.watch(srcPath.css, gulp.series("css"));
    // 监听所有 js
    gulp.watch(srcPath.js, gulp.series("js"));
    // 监听所有 res
    gulp.watch(srcPath.res, gulp.series("res"));
});

// browser-sync 自动刷新:设置代理方式
gulp.task("ws", function () {
    browserSync.init({
        // 这里的 files 写的是需要监控的文件的位置
        files: [
            "./dist/*.*",
            "./dist/**/*.*"
        ],
        logLevel: "debug",
        logPrefix: ">>>>>>>>>>",
        // 这里的 Proxy 写的是需要代理的服务器，我自己的 Wamp 启动的是 localhost:12001
        proxy: "localhost:12001",
        // 这里写的是代理后，bs 在哪个端口打开
        port: 7501,
        // 这里设置的是 bs 运行时打开的浏览器名称
        browser: "chrome"
    });
    // gulp.watch([srcPath.html], gulp.series('html-watch', reload));
    // gulp.watch([srcPath.css], gulp.series('css-watch', reload));
    // gulp.watch([srcPath.js], gulp.series('js-watch', reload));
    // gulp.watch([srcPath.res], gulp.series('res-watch', reload));
});

// 默认任务
gulp.task('dev', gulp.series(
    "build",
    // "ws",
    "watch"
));

Answer 1

https://github.com/dolymood/b... 参考