Gulp 和 browserSync 配置与 MAMP：卡在重新加载浏览器

Question

在遵循 CSS-Tricks https://css-tricks.com/gulp-for-wordpress-creating-the-tasks/ 上的本教程之后，除了我更改文件时浏览器重新加载之外，一切都像魅力一样工作：

它似乎停留在重新加载浏览器。我知道关于这个问题的所有不同反应，但没有一个能解决我的问题。 所以我认为它可能与 MAMP 及其本地服务器配置有关？

这是我的 Gulp 配置代码。有关信息，我还尝试按照教程中的说明设置流，但问题是一样的。

import webpack from 'webpack-stream';
import named from 'vinyl-named';
import browserSync from "browser-sync";
import {src, dest, watch, series, parallel} from 'gulp';
import del from 'del';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'autoprefixer';
import yargs from 'yargs';
import sass from 'gulp-sass';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import imagemin from 'gulp-imagemin';

const PRODUCTION = yargs.argv.prod;

export const serve = done => {
    server.init({
        port: 8181,
        proxy: "https://verbier:8890/",
        reloadOnRestart: true

    });
    done();
};

export const reload = done => {
    server.reload()
    done();
};


export const clean = () => del(['dist']);


export const styles = () => {
    return src(['assets/scss/bundle.scss', 'assets/scss/admin-style.scss'])
        .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
        .pipe(sass().on('error', sass.logError))
        .pipe(gulpif(PRODUCTION, postcss([ autoprefixer ])))
        .pipe(gulpif(PRODUCTION, cleanCss({compatibility:'ie8'})))
        .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
        .pipe(dest('dist/css'))
}





export const watchForChanges = () => {
    watch('assets/scss/**/*.scss',  series(styles, reload));
    watch('assets/images/!**!/!*.{jpg,jpeg,png,svg,gif}', series(images, reload));
    watch(['assets/!**!/!*','!src/{images,js,scss}','!src/{images,js,scss}/!**!/!*'], series(copy, reload));
    watch('assets/js/!**!/!*.js', series(scripts, reload));
    watch("**/*.php", reload);
}

export const images = () => {
    return src('assets/images/!**!/!*.{jpg,jpeg,png,svg,gif}')
        .pipe(gulpif(PRODUCTION, imagemin()))
        .pipe(dest('dist/images'));
}

export const copy = () => {
    return src(['assets/!**!/!*', '!assets/{images,js,scss}', '!assets/{images,js,scss}/!**/!*'])
        .pipe(dest('dist'));
}


export const scripts = () => {
    return src(['assets/js/bundle.js', 'assets/js/admin-style.js'])
        .pipe(named())
        .pipe(webpack({
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                presets: ['@babel/preset-env']
                            }
                        }
                    }
                ]
            },
            mode: PRODUCTION ? 'production' : 'development',
            devtool: !PRODUCTION ? 'inline-source-map' : false,
            output: {
                filename: '[name].js'
            },
            externals: {
                jquery: 'jQuery'
            },
        }))
        .pipe(dest('dist/js'));
}

const server = browserSync.create();

export const dev = series(clean, parallel(styles, images, copy, scripts), serve, watchForChanges);

export const build = series(clean, parallel(styles, images, copy, scripts));

export default dev;

感谢您的阅读！

Answer 1

如果其他人有此问题，我切换到本地而不是 Mamp Pro，问题已“解决”。