Gulp BrowserSync 与 typescript 和 angular 2

Question

我正在尝试让 browserSync 与打字稿编译器和 angular 一起工作。当我在我的 app.ts 中更改某些内容时，它会正确地重新编译，并且 browsersync 打印 "Reloading Browsers..." 但浏览器实际上从未重新加载。我似乎无法弄清楚为什么它没有重新加载，也许它与 Angular 2 处理刷新的方式有关？

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var tsc = require('gulp-typescript');
var tsProject = tsc.createProject('tsconfig.json');
var config = require('./gulp.config')();
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

// Start a local server in base directory
gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: './'
        }
    });

    // Watch for changes in html and ts files in base directory, reload if they occur
    gulp.watch(['*.html', '*.ts'], ['reloady']);

    // Watches for changes in css files, grabs the files, pipes them to browsersync stream
    // This injects the css into the page without a reload
    gulp.watch('*.css', function() {
        gulp.src('*css')
            .pipe(browserSync.stream());
    });
});

gulp.task('compile-ts', function() {
    var sourceTsFiles = [
        config.allTs,
        config.typings
    ];

    var tsResult = gulp
        .src(sourceTsFiles)
        .pipe(sourcemaps.init())
        .pipe(tsc(tsProject));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.tsOutputPath))
});

gulp.task('reloady', ['compile-ts'], function() {
    console.log("Reload SHOULD have happened.");
    browserSync.reload();
});

编辑：已解决！为了 Browsersync 正确连接，body 标签必须出现在您的网站中（我们在它之后添加了一个脚本标签）。详情请看我下面的回答。

Answer 1

我会尝试编译 .ts 文件，当它们发生变化时：

gulp.task('auto-compile', function() {
    gulp.watch([
      "*.ts",
    ], "compile-ts");
});

BrowserSync 将观察 .js 文件而不是 .ts 文件的变化：

gulp.task('serve', function(cb) {
    browserSync({
        port: 8080,
        server: {
            baseDir: "./"
        }
    });

    gulp.watch([
      "*.js",
      "*.css",
      "*.html"
    ], browserSync.reload, cb);
});

这意味着 BrowserSync 只会在编译完成后重新加载。如果您需要在能够运行在 Web 浏览器上打包文件之前，只需配置 BrowserSync 以观察捆绑文件的变化。

Answer 2

好吧，我终于想通了，答案原来很简单，就像这些事情一样。

我刚开始使用 Angular 2，所以我做了一个快速的小 hello world，文件可以很好地通过 browsersync 提供，我可以手动重新加载它。但是，当 browsersync.reload() 被调用时，它什么也没做。在 browsersync UI 的 help/about 部分，它表示如下：

为什么 Browsersync 没有连接到我的项目？ 99% 的情况是因为您的网页没有 body 标签。为了 Browsersync 正确连接，body 标签必须出现在您的网站中（我们在它之后添加了一个脚本标签）。

在我为 hello world 应用程序快速创建 html 时，我从未放入 body 标签。问题已解决！

Gulp BrowserSync 与 typescript 和 angular 2

Gulp BrowserSync with typescript and angular 2

typescript

gulp

browser-sync

angular