有没有一种方法可以让Browsersynch在gullow上查看我的WP php文件

Question

所以我下载了这个Worpress模板，并使用gull和browsersynch来监视所有.js文件和.css文件。更糟糕的是，每当我想使用gull和BroswerSynch时，我都必须键入npm run watch。因此，我试图在gull文件中添加的内容是，能够从我的模板(/wp-content/theme/MYTEMPLATE(中查看php文件的更改，因此每当我进行修改时，我就能实时看到它们。有可能做到这一点吗？

这是我的gullfile.js代码

const gulp = require( 'gulp' ),
fancylog = require( 'fancy-log' ),
browserSync = require( 'browser-sync' ),
server = browserSync.create(),
dev_url = 'http://localhost:10013/';

/**
* Define all source paths
*/
var paths = {
styles: {
src: './assets/*.scss',
dest: './assets/css'
},
scripts: {
src: './assets/*.js',
dest: './assets/js'
}
};

/**
* Webpack compilation: http://webpack.js.org, https://github.com/shama/webpack-stream#usage-with-gulp-watch
* 
* build_js()
*/
function build_js() {
const compiler = require( 'webpack' ),
webpackStream = require( 'webpack-stream' );
return gulp.src( paths.scripts.src )
.pipe(
webpackStream( {
config: require( './webpack.config.js' )
},
compiler
)
)
.pipe(
gulp.dest( paths.scripts.dest )
)
.pipe(
server.stream() // Browser Reload
);
}

/**
* SASS-CSS compilation: https://www.npmjs.com/package/gulp-sass
* 
* build_css()
*/
function build_css() {
const sass = require( 'gulp-sass' )( require( 'sass' ) ),
postcss = require( 'gulp-postcss' ),
sourcemaps = require( 'gulp-sourcemaps' ),
autoprefixer = require( 'autoprefixer' ),
cssnano = require( 'cssnano' );
const plugins = [
autoprefixer(),
cssnano(),
];
return gulp.src( paths.styles.src )
.pipe(
sourcemaps.init()
)
.pipe(
sass()
.on( 'error', sass.logError )
)
.pipe(
postcss( plugins )
)
.pipe(
sourcemaps.write( './' )
)
.pipe(
gulp.dest( paths.styles.dest )
)
.pipe(
server.stream() // Browser Reload
);
}
/**
* Watch task: Webpack + SASS
* 
* $ gulp watch
*/
gulp.task( 'watch',
function () {
// Modify "dev_url" constant and uncomment "server.init()" to use browser sync
server.init({
proxy: dev_url,
} );
gulp.watch( paths.scripts.src, build_js );
gulp.watch( [ paths.styles.src, './assets/scss/*.scss' ], build_css );
}
);

Answer 1

您需要对其进行调整以适应您的构建，但我设置了类似的设置，使其更具可移植性。

将cfg设置为一个变量，并创建一个gulpconfig.json(可以随意调用它(

gull.js

cfg = require('./gulpconfig.json'),
gulp.task('browser-sync', () => {
browserSync.init(cfg.browserSyncWatchFiles, cfg.browserSyncOptions);
});

gulpconfig.json

{
"browserSyncOptions": {
"proxy": "example.com",
"notify": true,
"browser": [
"google chrome"
]
},
"browserSyncWatchFiles": [
"./**/*.php",
"./images/*.{png,jpg,gif}"
]
}