我正在为WordPress开发自己的主题, 我了解Glup以及它如何简化我的工作流程, 下面的代码所面临的问题是我能够看到我对主页进行的即时更改(html或php), 但是我对css文件或java-script文件所做的任何更改都不会生效, 但仍然必须手动刷新页面:
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()
}))
#1尝试这个:
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语句中与series并行交换。
我进行了一些编辑以简化代码-试试看。无需’ waitForStyles’ , 只需将browserSync.stream()管道移至样式任务的末尾即可。
【gulp 4不更新CSS和JS】或者执行以下操作, 而不是移动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” 任务。
推荐阅读
- Gutenberg自定义元数据块未将元数据保存为自定义帖子类型
- Frida 实现 Hook 功能的强大能力
- C语言进阶付费知识
- netty系列之:epoll传输协议详解
- Java Map接口详解
- 什么!Sentinel流控规则可以这样玩()
- 银行卡基础知识- I类-II类-III类账户
- PyTorch模型定义
- 探索5G -5G 可能会带来哪些改变与变革