0

我将 Gulp3 更改为 Gulp4。在我的 gulpfile.js 中，我创建了一个任务：如果我正在进行修改，我可以在开发模式下立即看到它，而无需构建我的网站：

gulp.task('serve-php', function () {
  connect.server({
      port: 9001,
      base: 'app',
      open: false
  });
  var proxy = httpProxy.createProxyServer({});
  browserSync.init({
      notify: false,
      port  : 9000,
      server: {
          baseDir   : ['.tmp', 'app'],
          routes    : {
              '/node_modules': 'node_modules'

          },
          middleware: function (req, res, next) {
              var url = req.url;
              if (!url.match(/^\/(styles|fonts|node_modules)\//)) {
                  proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
              } else {
                  next();
              }
          }
      }
  });
  gulp.watch([
      'app/*.html',
      'app/*.php',
      'app/**/*.php',
      'app/**/**/*.php',
      'app/scripts/**/*.js',
      'app/images/**/*',
      '.tmp/fonts/**/*'
  ]).on('change', function() {
    browserSync.reload();
  });
  gulp.watch('app/styles/**/*.scss', gulp.series('styles'));
  gulp.watch('app/fonts/**/*', gulp.series('fonts'));
 });

但是当我运行时gulp serve-php，我的网站没有任何 css 和 js，我不知道如何调整它。

4

1 回答 1

0

您没有看到任何已编译的资产，因为serve-php没有运行stylesorfonts任务。它只是观察源文件的变化。所以在进行更改之前不会运行它们。

最简单的解决方案是创建另一个任务，首先编译您的前端资产，然后启动您的服务器并加载 browserSync。

添加以下任务应该可以为您工作。

gulp.task('default', gulp.series( gulp.parallel('styles','fonts'), 'serve-php' ));

只需运行gulp，将首先编译资产，然后启动服务器。

（如果您已经有默认任务，则需要更改此任务的名称）

我想您还需要将您的js任务作为参数添加到parallel函数调用中，但是如果不查看其余代码就很难判断。

我希望这能让你走上正确的道路！

于 2020-03-18T22:35:09.707 回答