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

Question

我试用了 npm 包 browser-sync 并将其与 gulp 一起使用。但是我遇到的问题是，每次使用端口 3000 时，我的浏览器同步都会使用端口 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,
        injectChanges: true,
        server: { //server variable set elsewhere
            baseDir: './',
            proxy: "https://localhost/united-in-faith",
            port: 8080,
            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', browserSyncReload);
    watch([watchJs,watchCss], series(cssNoMin, jsNoMin , browserSyncReload));
}

task("default", parallel(css,js ,browserSyncServer));
task("all", parallel(css,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);

标签： gulpbrowser-sync