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!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.