Gulp 4在开发模式下运行

Question

我把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，我不知道如何调整它。

Answer 1

您看不到任何已编译的资产，因为serve-php不运行styles或fonts任务。它只关注源文件的变化。因此，在进行更改之前不会运行它们。

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

添加以下任务应该会让事情为您所用。

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

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

(如果您已有默认任务，则需要更改此任务的名称)

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

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