存在重新加载浏览器的方法，当我在ubuntu中更改phpstorm中的代码时？

Question

当我在phpstorm中更改代码时，我需要重新加载浏览器的方法。我也在ubuntu上工作。

我试着用browsersync来使用吞噬4，但是我遇到了一些错误。

这是我来自gulpfile.js的代码

const gulp = require('gulp');
var php = require("gulp-connect-php");
var browsersync = require('browser-sync');

gulp.task('default', function () {
    php.server({
        // a standalone PHP server that browsersync connects to via proxy
        port: 8000,
        keepalive: true,
        base: "../wordpress/wp-content/themes/twentynineteen"
    }, function () {
        browsersync({
            proxy: '127.0.0.1:8000'
        });
    });
});

但我理解，如果文件中存在标记主体，则browsersync将会工作。

可能是以另一种方式存在？

当我将项目从psd迁移到html时，我使用gulp，但对于wordpress来说，gulp不是一个很好的选择。

谢谢你的回答。

Answer 1

我是有理由的。

我的gulpfile用于scss和webpack，并重新加载。最后，你可以找到一些方法来开始吞咽。

​

"use strict";

const gulp = require("gulp");
const webpack = require("webpack-stream");
const sass = require('gulp-sass');
const autoprefixer = require("gulp-autoprefixer");
const sourcemaps = require('gulp-sourcemaps');
const plumber = require("gulp-plumber");
const gcmq = require('gulp-group-css-media-queries');
const wait = require('gulp-wait'), notify = require("gulp-notify");
const browserSync = require("browser-sync");


 const siteDir = '../bs-bunavestire/';
 const siteUrl = 'http://wp-bunavestire.host1670806.hostland.pro/';

let isDev = true;
let webpackConfig = {
    output: {
        filename: "webpack.js"
    },
    watch: false,
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['@babel/preset-env', {
                            debug: true,
                            corejs: 3,
                            useBuiltIns: "usage"
                        }]]
                    }
                }
            }
        ]
    },
    mode: isDev ? 'development' : 'production',
    devtool: isDev ? 'eval-source-map' : 'none',
};

gulp.task('webpack', function () {
    return gulp.src('assets/js/src/main.js')
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('assets/js/dist/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task("scss", function () {
    return gulp.src('assets/scss/my.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(wait(500))
        .pipe(sass({
            outputStyle: 'expanded',
            allowEmpty: true
        }).on('error', notify.onError(function (error) {
            return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
        })))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(gcmq())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/css/'))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task("watch", function () {
    gulp.watch('assets/scss/**/*.scss', gulp.series('scss'));
    gulp.watch('assets/js/src/**/*.js', gulp.series('webpack'));
});

gulp.task('browser-sync', function () {
    browserSync.init({
        proxy: {
            target: siteUrl,
            ws: true
        },
        reloadDelay: 1500
    });

    // browserSync.init({
    //  server: {
    //      baseDir: siteDir
    //  },
    //  notify: true
    // });
    gulp.watch("**/*.html").on('change', browserSync.reload);
    gulp.watch("**/*.php").on('change', browserSync.reload);
    gulp.watch("**/*.css").on('change', browserSync.reload);
    gulp.watch("**/*.js").on('change', browserSync.reload);
});

// gulp.task('default', gulp.series('browser-sync'));
// gulp.task('default', gulp.parallel('scss', 'watch', 'browser-sync'));
// gulp.task('default', gulp.parallel('watch', 'browser-sync'));
gulp.task('default', gulp.series('webpack', 'scss', gulp.parallel('watch', 'browser-sync')));

​