我是Gulp监视的新手,我面临的Browsersync问题仅在我运行“ gulp watch”命令时才第一次刷新,并且仅适用于HTML,CSS文件,而不适用于scripts.js文件。我在glop-watcher /索引文件中进行了此更改
function onChange() {
console.log("onChange running: ", running); // custom changing
if (running) {
if (opt.queue) {
queued = true;
}
// custom changing
setTimeout(() => {
runComplete({msg: "custom code is working"});
}, 2000);
return;
}
现在,它刷新了HTML,CSS文件,但即使手动刷新也仍然无法用于scripts.js文件。请帮忙这是我的gulpfile.js文件
var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});
gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
gulp.task('watch', function() {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function() {
browserSync.reload();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
});
gulp.task('waitForStyles', gulp.series('styles', function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream());
}))
gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))
最后,钻入大口吃两周后,我也发现了问题和解决方案。
这是gulp正在监视的.js文件的路径
“。\ myProject \ wp-content \ themes \ myProject-theme \ js”
但是对于gulp手表,路径应该是这样的>>
“ ./wp-content/themes/myProject-theme/js/*.js”
不包括主文件夹名称/根文件夹名称。在我的情况下,我所有的wordpress文件所在的根文件夹是“ myProject”,我错误地在gulp路径中写了它,这给我带来很大麻烦。
因此,请确保您的路径,并将其添加到node_modules文件夹中的glop-watcher / index文件的onChange()函数中。
function onChange() {
console.log("onChange running: ", running);
if (running) {
if (opt.queue) {
queued = true;
}
// Add this code
setTimeout(() => {
runComplete({msg: "custom code is working"});
}, 2000);
return;
}