Gulp 4 running in development mode

Question

I changed Gulp3 into Gulp4. In my gulpfile.js I created a task: if I am doing a modification, I can see it immediately in the development mode, without building my website:

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'));
 });

But when I run gulp serve-php, my website doesn't have any css and js and I don't know how to tweak it.

Answer 1

You aren’t seeing any of the compiled assets because serve-php doesn’t run the styles or fonts tasks. It is only watching the source files for changes. So won’t run them until changes are made.

The simplest solution is to create another task that compiles your frontend assets first and then spins up your server and loads browserSync.

Adding the following task should get things working for you.

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

Just run gulp, the assets will be compiled first, then the server will start.

(If you already have a default task, you will need to change the name of this task)

I imagine you will also need to add your js task as a parameter inside the parallel function call but it’s difficult to tell without seeing the rest of your code.

I hope that gets you moving on the right path!