Gulp 4 browserSync in parallel with Pug and Parceljs Tasks in series

So basically what I'm trying to do is to make the browser refresh whenever there is a change in the files using browserSync, compiles Pug templates, then Parceljs does the bundling. And Gulp is to watch for changes.

The overall objective is a static website/page.

The problem:

If parcel fails building. browserSync exits. Watch stops.

[12:31:41] 'parcel' errored after 3.83 s
[12:31:41] Error in plugin "gulp-parcel"

[12:31:41] The following tasks did not complete: browserSync
[12:31:41] Did you forget to signal async completion?

OS: Windows 10


Gulpfile.js content:

"use strict";

var gulp = require('gulp');
var parcel = require('gulp-parcel');
var pug = require('gulp-pug');
var browserSync = require('browser-sync').create();

gulp.task('html', function () {
    return gulp.src('src/templates/*.pug')
            stream: true

gulp.task('parcel', function () {
    return gulp.src('build/html/*.html', {
            read: false
            stream: true

gulp.task('browserSync', function () {
        server: {
            baseDir: 'dist'

gulp.task('watch', gulp.parallel('browserSync',gulp.series('html', 'parcel')), function () {'src/templates/**/*.pug', gulp.series('html', 'parcel'));

gulp.task('default', gulp.series('watch'), function(){
    console.log('Started default');



After investigating a bit, the gulp-parcel plugin had a bug which is still being worked on. Meanwhile, I was able to come up with a workaround.

  • Upgraded to es6
  • Implemented 'gulp-run-command' to run Parcel in watch mode

Here is my new solution:

'use strict';

import gulp from 'gulp';
import babel from 'gulp-babel';
import browserSync from 'browser-sync';
import run from 'gulp-run-command';
import log from 'fancy-log';
import errorHandler from 'gulp-error-handle';

const server = browserSync.create();

const paths = {
    parcel: {
        dist: 'dist/*'

gulp.task('parcel', run('parcel watch src/templates/index.pug --public-url ./ --no-cache'));

const reload = done => {

const serve = done => {
        server: {
            baseDir: 'dist/'

const watch = done => {, gulp.series(reload));

const dev = gulp.parallel('parcel', serve, watch);
export default dev;


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.