Gulp BrowserSync 与 typescript 和 angular 2答案

【问题标题】：Gulp BrowserSync with typescript and angular 2Gulp BrowserSync 与 typescript 和 angular 2
【发布时间】：2015-10-02 17:59:56
【问题描述】：

我正在尝试让 browserSync 与 typescript 编译器和 angular 一起使用。当我在 app.ts 中更改某些内容时，它会正确重新编译，并且 browsersync 会打印“正在重新加载浏览器...”，但浏览器从未真正重新加载。我似乎无法弄清楚为什么它没有重新加载，也许它与 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 标签必须存在于您的网站中（我们在它之后添加一个脚本标签）。有关详细信息，请参阅下面的答案。

【问题讨论】：

我想停用 BrowserSync，在我的项目中找不到此代码。你能写完整的路径吗？我使用角度 2

标签： angular typescript gulp browser-sync

【解决方案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 以观察捆绑文件的变化。

【讨论】：

嘿，好主意。我尝试通过让 watch 调用仅检查 .html 页面和回调以重新加载来排除这一点，但是在保存对 html 文件的更改后它会做同样的事情，只是说“重新加载浏览器......”并且从不这样做。顺便说一下，手动重新加载会显示我在这两种情况下所做的更改。

【解决方案2】：

好吧，我终于想通了，答案很简单，因为这些事情发生了。

我刚开始使用 Angular 2，所以我做了一个简短的 hello world，文件可以很好地通过 browsersync 提供，我可以手动重新加载它。但是，当调用 browsersync.reload() 时，它什么也没做。在 browsersync UI 的帮助/关于部分中，它显示以下内容：

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

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

【讨论】：