Setting up Browsersync with Gulp 4 and Express

Recently, I’ve been working to update my front-end tooling setup and have been reading Front-end Tooling with Gulp, Bower, and Yeoman which turned me on to Gulp 4. (Lots of great stuff coming in Gulp 4, such as gulp.parallel)

In the book, there is a great example, of setting up Browsersync to get live reloading of your browser as you work. However, I also wanted this to work with Express, which means you need to also have gulp start a server, eg with nodemon. As it happens, examples I found for setting this up with Express all used Gulp 3. Or I found examples using Gulp 4 but they did not include Express.

So, I decided to combine the knowledge from these sources and create a sample repo that allows for running Browsersync with Express and Gulp 4.

Here is the sample repo.

Some things worth noting

  • The main difference compared to the examples mentioned above are the use of gulp.series and gulp.parallel.
  • While express runs on localhost:3000 (or whatever port you choose), Browsersync will need to run on a different port, hence the use of a proxy port.
  • The sample version doesn’t do any actual processing of the files. I’ll leave that to you.

Also…

When quitting out of the gulp script, you might see this message:

Message displayed when quitting out of gulp script.

Update: This issue has been resolved. I just needed to add done callbacks to the watch tasks and to the browsersync init task. See the commit for details.

This is caused, I think, by that there is some task where there is a need for a callback to be called to notify gulp that the task is completed. But it may also just be due to that Gulp 4 still is in alpha. If you have any ideas as to how to fix the issue, please let me know!