如何更改浏览器同步的端口

如何解决如何更改浏览器同步的端口

我尝试了 npm 包 browser-sync 并将其与 gulp 一起使用。但是我遇到了每次使用端口 3000 时吞咽我的浏览器同步的问题。在尝试如何更改它的过程中，我让他更改端口...但他认识到 8080 被 xampp 阻止并使用 8081 或 8082。但这无济于事...如果我每次都需要手动更改 URL 字段中的端口，我也可以完全忘记浏览器同步。有什么方法可以让浏览器同步识别我使用 Xampp 并且他应该去这个 xampp 端口？

我使用 browsersync 2.26.14、Gulp 4.0.2、npm 7.17.0 和 composer 2.1.3。

我在 gulpfile 中的 browserSync 函数如下所示：

function browserSyncServer (done) {
browserSync.init({      
    open: false,injectChanges: true,server: { //server variable set elsewhere
        baseDir: './',proxy: "https://localhost/united-in-faith",port: 8080,online: true  
    },ui: {
        port: 8082
    }
});

done();

}

但我必须说它变得更糟......经过一些尝试后，他甚至不再更改端口并保持在 3000（与我在 gulpfile 中给他的内容无关）。

这就是整个 gulpfile：

const { src,dest,watch,task,series,parallel } = require('gulp');

var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

var scssOrigin = 'scripts/scss/*.scss';
var jsOrigin = 'scripts/js/*.js';
var scssDestination = 'build/css';
var jsDestination = 'build/js';
var scssDestinationMin = 'build/css/';
var jsDestinationMin = 'build/js';
var PHPDestination = 'build/PHP/*.PHP';
var htmlDestination = 'build/html/*.html';
var appCssMin = 'app.min.css';
var appJsMin = 'app.min.js';
var appJs = 'app.js';
var appCss = 'app.css';
var watchJs = './scripts/js/*.js';
var watchCss = './scripts/scss/*.scss';


function js() {
    return src(jsOrigin)
        .pipe(concat({ path: appJsMin}))
        .pipe(uglify())
        .pipe(dest(jsDestinationMin));
}


function css() {
    var processors = [
            autoprefixer,];

    return src(scssOrigin,{ sourcemaps: true})
        .pipe(cleanCSS())
        .pipe(postcss(processors))
        .pipe(sass({ outputStyle: "expanded" }).on('error',sass.logError))
        .pipe(concat(appCssMin))
        .pipe(uglify())
        .pipe(dest(scssDestinationMin))
        .pipe(browserSync.stream());
}

function cssNoMin () {
    return src(scssOrigin,{ sourcemaps: true})
        .pipe(concat(appCss))
        .pipe(sass({ outputStyle: "expanded" }).on('error',sass.logError))
        .pipe(dest(scssDestinationMin));
}

function jsNoMin () {
    return src(jsOrigin)
        .pipe(concat({ path: appJs }))
        .pipe(dest(jsDestinationMin))
        .pipe(browserSync.stream());

}

function browserSyncServer (done) {
    browserSync.init({      
        open: false,server: { //server variable set elsewhere
            baseDir: './',online: true  
        },ui: {
            port: 8082
        }
    });

    done();
}

function browserSyncReload (done) {
    browserSync.reload();

    done();
}


function publish () {
    return src(scssOrigin,{ sourcemaps: true})
        .pipe(cleanCSS())
        .pipe(sass({ outputStyle: "expanded" }).on('error',sass.logError))
        .pipe(concat(appCss))
        .pipe(dest(jsDestination))
        .pipe(src(jsOrigin))
        .pipe(concat({ path: jsDestination}))
        .pipe(uglify())
        .pipe(dest(jsDestinationMin))
        .pipe(src('*PHP'))
        .pipe(src('sites/*PHP'))
        .pipe(dest('build/PHP'))
        .pipe(src('*html'))
        .pipe(dest(htmlDestination))
        .pipe(browserSync.stream());
}

function watch_files () {
    watch('*.PHP',browserSyncReload);
    watch([watchJs,watchCss],series(css,js,browserSyncReload));
}

function watchNoMin () {
    watch('*.PHP',series(cssNoMin,jsNoMin,browserSyncReload));
}

task("default",parallel(css,browserSyncServer));
task("all",js));
task("css",css);
task("js",js);
task("watch",series(browserSyncServer,watch_files,));
task("css-no-min",cssNoMin);
task("js-no-min",jsNoMin);
task("watch-no-min",watchNoMin);
task("publish",publish,browserSyncServer);