Browsersync 不断重新加载

Question

我有 Gulp + Browsersync 与 Wordpress 一起工作。 一切运行良好，每次更改文件时都会重新加载。 但是从昨天开始，Browsersync 一直在无缘无故地重新加载。

我没有对我的 gulpfile 进行任何更改。我尝试从 2 天前恢复到以前的提交，同样的事情。我不知道它来自哪里。

这里是my repo。

我试过了：

• 将 browsersync 降级到 2.24.4 from this post
• 将此添加到 gulp 中：

   socket: {
      clients: {
               heartbeatTimeout: 60000
            }
        },

这是我的文件。

gulpfile.babel.js

import { src, dest, watch, series, parallel } from 'gulp';
import yargs from 'yargs';
import sass from 'gulp-sass';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'autoprefixer';
import imagemin from 'gulp-imagemin';
import del from 'del';
import webpack from 'webpack-stream';
import named from 'vinyl-named';
import browserSync from 'browser-sync';
import zip from 'gulp-zip';
import info from './package.json';
import replace from 'gulp-replace';
import wpPot from 'gulp-wp-pot';
import tailwindcss from 'tailwindcss';
// import purgeCss from 'gulp-purgecss';
const PRODUCTION = yargs.argv.prod;

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

export const styles = () => {
    return (
        src('src/scss/app.scss')
            .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
            .pipe(sass().on('error', sass.logError))
            .pipe(postcss([tailwindcss('./tailwind.config.js')]))
            .pipe(gulpif(PRODUCTION, postcss([autoprefixer])))
            .pipe(gulpif(PRODUCTION, cleanCss({ compatibility: 'ie8' })))
            // .pipe(
            //  gulpif(
            //      PRODUCTION,
            //      purgeCss({
            //          content: ['**/*.php']
            //      })
            //  )
            // )
            .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
            .pipe(dest('dist/css'))
            .pipe(server.stream())
    );
};

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

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

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

export const scripts = () => {
    return src(['src/js/bundle.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'
                }
            })
        )
        .pipe(dest('dist/js'));
};

/***** Generating a POT file *****/

export const pot = () => {
    return src('**/*.php')
        .pipe(
            wpPot({
                domain: 'boosters',
                package: info.name
            })
        )
        .pipe(dest(`languages/${info.name}.pot`));
};

/***** Compress theme into a ZIP file after renaming _themename *****/

export const compress = () => {
    return src([
        '**/*',
        '!node_modules{,/**}',
        '!bundled{,/**}',
        '!src{,/**}',
        '!.babelrc',
        '!.gitignore',
        '!gulpfile.babel.js',
        '!package.json',
        '!package-lock.json'
    ])
        .pipe(
            gulpif(
                // prevent bug if there are zip files inside the theme
                file => file.relative.split('.').pop() !== 'zip',
                replace('boosters', info.name)
            )
        )
        .pipe(zip(`${info.name}.zip`))
        .pipe(dest('bundled'));
};

/****** BrowserSync ******/

const server = browserSync.create();
export const serve = done => {
    server.init({
        proxy: 'localhost:8888/boosters', // put your local website link here
        snippetOptions: {
            ignorePaths: 'boosters/wp-admin/**'
        },
        ghostMode: false
        // socket: {
        //  clients: {
        //      heartbeatTimeout: 60000
        //  }
        // },
        // logLevel: 'debug',
        // logFileChanges: true,
        // logConnections: true
    });
    done();
};
export const reload = done => {
    server.reload();
    done();
};

/****** Series & Parallel Scripts ******/

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

package.json

{
    "name": "boosters",
    "version": "1.0.0",
    "description": "A Wordpress website for Boost.rs by DoubleCat Studio",
    "main": "gulpfile.babel.js",
    "scripts": {
        "start": "gulp",
        "build": "gulp build --prod"
    },
    "repository": {
        "type": "git",
        "url": "git+ssh://git@github.com/indaviande/boosters.git"
    },
    "author": "Vianney Bernet",
    "license": "ISC",
    "bugs": {
        "url": "https://github.com/indaviande/boosters/issues"
    },
    "browserslist": [
        "last 4 version",
        "> 1%",
        "ie 11"
    ],
    "homepage": "https://github.com/indaviande/boosters#readme",
    "devDependencies": {
        "@babel/core": "^7.4.3",
        "@babel/preset-env": "^7.4.3",
        "@babel/register": "^7.4.0",
        "autoprefixer": "^9.5.1",
        "babel-loader": "^8.0.5",
        "browser-sync": "^2.26.7",
        "del": "^4.1.0",
        "gulp": "^4.0.0",
        "gulp-clean-css": "^4.0.0",
        "gulp-if": "^2.0.2",
        "gulp-imagemin": "^5.0.3",
        "gulp-postcss": "^8.0.0",
        "gulp-replace": "^1.0.0",
        "gulp-sass": "^4.0.2",
        "gulp-sourcemaps": "^2.6.5",
        "gulp-wp-pot": "^2.3.5",
        "gulp-zip": "^4.2.0",
        "tailwindcss": "^1.0.4",
        "vinyl-named": "^1.1.0",
        "webpack-stream": "^5.2.1",
        "yargs": "^13.2.2"
    },
    "dependencies": {
        "tar": ">4.4.7"
    }
}

Answer 1

Browsersync 有一个日志，您可以检查该日志以查看哪些文件正在更改并触发重新加载。您还可以增加您正在观看/忽略的内容的特异性。从小处着手并逐渐增加您的全局路径，直到您可以看到所有更改的重新加载。

server.init({
  logLevel: 'debug',
  files: [
    'wp-content/themes/**/*.css',
    'wp-content/themes/**/*.js',
    'wp-content/themes/**/*.php',
  ],
  ignore: [
    'folder-to-ignore/**/*.*'
  ]
});