Gulp Browsersync 不适用于 scripts.js 文件

Question

我是 Gulp watch 的新手，我正面临 Browsersync 的问题，只有当我运行 "gulp watch" 命令时它才会第一次刷新并且它只工作对于 HTML、CSS 个文件，但不适用于 scripts.js 个文件。我在 glop-watcher/index 文件

上进行了此更改

        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()
}))

Answer 1

终于，经过 2 周的钻研 gulp 我也找到了问题和解决方案。

这是 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;
   }

Gulp Browsersync 不适用于 scripts.js 文件

Gulp Browsersync is not working for scripts.js file

node.js

webpack

browser-sync