Wordpress Gulp4不更新CSS和JS
我正在为WordPress开发我自己的主题,我开始了解Glup以及它使我的工作流程变得多么简单,我下面的代码面临的问题是我能够看到我对主页html或php所做的即时更改,但我对css文件或java脚本文件所做的任何更改都不会产生任何影响,我仍然需要手动刷新页面:Wordpress Gulp4不更新CSS和JS,wordpress,wordpress-theming,gulp-4,Wordpress,Wordpress Theming,Gulp 4,我正在为WordPress开发我自己的主题,我开始了解Glup以及它使我的工作流程变得多么简单,我下面的代码面临的问题是我能够看到我对主页html或php所做的即时更改,但我对css文件或java脚本文件所做的任何更改都不会产生任何影响,我仍然需要手动刷新页面: var gulp = require('gulp'), settings = require('./settings'), webpack = require('webpack'), browserSync = require('bro
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(done) {
browserSync.reload();
done();
});
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.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))
// added below
.pipe(browserSync.stream());
});
// now this task is unnecessary:
// gulp.task('waitForStyles', gulp.series('styles', function() {
// return gulp.src(settings.themeLocation + 'style.css')
// .pipe(browserSync.stream());
// }))
// cb added, called below
gulp.task('watch', function(cb) {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function(done) {
browserSync.reload();
done();
});
// change to gulp.series below
// gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('waitForStyles'));
// changed to 'styles' below
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('styles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.series('waitForScripts'));
cb();
});
我已经看到gulp4在一个单独的任务ala gulp.parallel'oneTaskHere'中遇到了问题,所以请尝试在您的watch语句中用上述代码替换并行与串行
我做了一些编辑来简化代码——试试看。不需要“waitForStyles”,只需将browserSync.stream管道移动到styles任务的末尾
或者不移动browserSync.stream管道,只需执行以下操作:
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.series('styles', browserSync.reload));
但我自己在“样式”任务版本的末尾使用browserSync管道似乎运气更好
因为您使用的是webpack插件,所以我假设脚本任务的处理方式必须与样式任务不同。您可以尝试:
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.series('waitForScripts', browserSync.reload));
然后就不需要“waitForScripts”任务了。gulp.watchsettings.themeLocation+'css/***.css',gulp.series'waitForStyles';gulp.watch[settings.themeLocation+'js/modules/*.js',settings.themeLocation+'js/scripts.js',gulp.series'waitForScripts';};gulp.task'waitForStyles',gulp.parallel'styles',function{return gulp.srcsettings.themeLocation+'style.css'.pipebrowserSync.stream;}gulp.task'waitForScripts',gulp.parallel'scripts',functioncb{browserSync.reload;cb}这就是你所说的调出的意思吗?我把它放进了一个答案来澄清-我会删除我之前的评论。好的,但是gulp.task'waitForStyles',gulp.series'styles',函数{return gulp.srcsettings.themeLocation+'style.css'.pipebrowserSync.stream;}gulp.task'waitForScripts',gulp.series'scripts',函数cb{browserSync.reload;cb呢?函数/任务“样式”和函数/任务“脚本”应该在手表中调用,对吗?我也会简化它。我在上面做了更多的修改。