为WordPress主题构建自己的gulpfile.js.目前所有的JS和CSS都运行得很好,而livereload正在重新加载css/js的变化.
但我还想在PHP文件发生变化时刷新浏览器.我做了一些搜索,发现以下剪切我在gulpfile.js中使用的
gulp.task('watch', function(){ // Listen on port 35729 for LiveReload server.listen(35729, function (err) {if (err) {return console.log(err) }; gulp.watch("assets/scss/**/*.scss", ['sass']); // Watch and run sass on changes gulp.watch("assets/js/_*.js", ['javascripts']); // Watch and run javascripts on changes gulp.watch("assets/img/*", ['imagemin', 'svgmin']); // Watch and minify images on changes gulp.watch('**/*.php').on('change', function(file) { util.log('PHP FILES CHANGED!'); server.changed(file.path); }); }); });
每当我更改PHP文件时,我都会看到"PHP文件已更改!" 在控制台中,但livereload不会更新浏览器.我错过了什么?
做了一些进一步的研究和测试,并且由于gulp-livereload可以完成所有工作,因此使用tiny-lr毫无意义.所以我改变了我的任务来重新加载.pipe(livereload());
- 并将我的监视任务更改为以下内容:
gulp.task('watch', function(){ var server = livereload(); gulp.watch('**/*.php').on('change', function(file) { server.changed(file.path); util.log(util.colors.yellow('PHP file changed' + ' (' + file.path + ')')); }); gulp.watch("assets/scss/**/*.scss", ['sass']); // Watch and run sass on changes gulp.watch("assets/js/_*.js", ['javascripts']); // Watch and run javascripts on changes gulp.watch("assets/img/*", ['imagemin', 'svgmin']); // Watch and minify images on changes });
有一个较短的解决方案可能对那些使用gulp-livereload的人有用.有一种reload
方法可以触发.像这样:
gulp.task('watch', function(){ livereload.listen(); gulp.watch('source/*.php', livereload.reload); });