Question

我正在使用gulp构建html / css / ts，并使用browser-sync进行livereload。问题是在第一次构建时，构建html比ts构建要快得多，所以当浏览器同步运行时，它无法加载编译的JavaScript。

这是我的gulpfile.js：

const gulp = require('gulp');
const gutil = require('gulp-util');
const merge = require('merge-stream');
const watchify = require('watchify');
const tsify = require('tsify');
const source = require('vinyl-source-stream');

const browserSync = require('browser-sync').create();


function swallowError (error) {
    console.log(error.toString());
    this.emit('end');
}

function buildHtml() {
    return gulp.src('./src/html/index.html')
    .pipe(gulp.dest('./build'));
}

function buildCss() {
    return gulp.src('./src/css/app.css')
    .pipe(gulp.dest('./build'))
    .pipe(browserSync.stream());
}

function buildScript() {
    let opts = Object.assign({}, watchify.args, { debug: true });
    let b = watchify(opts)
    .add('./src/ts/index.tsx')
    .on('update', bundle)
    .on('log', gutil.log)
    .plugin(tsify, {
        jsx: 'react'
    });

    function bundle() {
        return b.bundle()
        .on('error', swallowError)
        .pipe(source('index.js'))
        .pipe(gulp.dest('./build'));
    }

    return bundle();
}

gulp.task('default', () => {
    browserSync.init({
        server: './build'
    });


    gulp.watch('./src/html/**.html', buildHtml);
    gulp.watch('./src/css/**.css', buildCss);

    gulp.watch('./build/index.html').on('change', browserSync.reload);
    gulp.watch('./build/index.js').on('change', browserSync.reload);

    return merge([
        buildHtml(),
        buildScript(),
        buildCss()
    ]);
});

您可以看到构建每个资源的函数，buildHtml，buildScript，buildCss。它们工作得很好，但在这种情况下，我不知道如何在带有merge-stream的buildHtml之后执行buildScript。

你可以看到4个监视代码，当然还有livereload，看看build / index.js不能用于第一个版本。我的意思是在第一次构建时，第一个构建目录将被创建，html也将存在，但是还没有创建index.js。这一刻，浏览器同步将激活，运行此应用程序，但脚本不在那里，所以它失败了。编译完脚本后，浏览器同步没有重新加载，看起来生成的新文件根本不会触发onchange事件。

这将解决使用F5的刷新网站，或者只是重启gulp，但我想解决这个问题。任何建议都会非常感激!!

Answer 1

我通过在完成转换后运行browser-sync来解决这个问题。

Gulp等到其他功能完成

1 个答案: