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.
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.
When quitting out of the gulp script, you might see this message:
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!