Gulp 4 browserSync 与 Pug 和 Parceljs 任务并行并行答案

【问题标题】：Gulp 4 browserSync in parallel with Pug and Parceljs Tasks in seriesGulp 4 browserSync 与 Pug 和 Parceljs 任务并行并行
【发布时间】：2018-06-15 05:33:30
【问题描述】：

所以基本上我要做的是让浏览器在使用 browserSync 的文件发生更改时刷新，编译 Pug 模板，然后 Parceljs 进行捆绑。而 Gulp 就是观察变化。

总体目标是静态网站/页面。

问题：

如果包裹构建失败。 browserSync 退出。观看停止。

[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?

操作系统：Windows 10

谢谢！！

Gulpfile.js 内容：

"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')
        .pipe(pug())
        .pipe(gulp.dest('build/html'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

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

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

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

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

【问题讨论】：

标签： javascript pug gulp-browser-sync gulp-4 parceljs

【解决方案1】：

经过一番调查，gulp-parcel 插件有一个错误，目前仍在处理中。与此同时，我想出了一个解决方法。

升级到 es6
实现了 'gulp-run-command' 以在监视模式下运行 Parcel

这是我的新解决方案：

'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 => {
    server.reload();
    done();
};

const serve = done => {
    server.init({
        server: {
            baseDir: 'dist/'
        }
    });
    done();
};

const watch = done => {
    gulp.watch(paths.parcel.dist, gulp.series(reload));
    done();
};

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

【讨论】：