Question

我正在尝试使用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正确连接，您的网站中必须存在正文标记（我们在其后面添加一个脚本标记）。有关详细信息，请参阅下面的答案。

Answer 1

我会尝试在更改时编译namespace Projekt3{ using namespace System; using namespace System::ComponentModel; using namespace System::Collections; using namespace System::Collections::Generic; using namespace System::Windows::Forms; using namespace System::Data; using namespace System::Drawing; using namespace System::Runtime::InteropServices; using namespace System::Threading::Tasks; using namespace System::IO; using namespace std; public ref class next : public System::Windows::Forms::Form { [DllImport("user32.dll")] public static extern IntPtr FindWindow(String sClassName, String sAppName); [DllImport("user32.dll")] private static extern bool RegisterHotKey(IntPtr hWnd, int id, int fsModifiers, int vk); [DllImport("user32.dll")] private static extern bool UnregisterHotKey(IntPtr hWnd, int id); public: next(void) { InitializeComponent(); // //TODO: Konstruktorcode hier hinzufügen. // } public: enum fsmodifiers { NOMOD = 0x0000, ALT = 0x0001, CTRL = 0x0002, SHIFT = 0x0004, WIN = 0x0008, };个文件：

.ts

然后，

BrowserSync会观察gulp.task('auto-compile', function() { gulp.watch([ "*.ts", ], "compile-ts"); });个文件中的更改，而不是.js个文件：

.ts

这意味着BrowserSync只会在编译完成后重新加载。如果您需要捆绑文件，然后才能在Web浏览器上运行它，只需配置BrowserSync以观察捆绑文件的更改。

Answer 2

好吧，我终于明白了，答案结果很简单，就像这些事情一样。

我刚刚开始使用Angular 2，所以我做了一个快速的小问候世界，文件得到了browserync很好，我可以手动重新加载它。但是，当调用browsersync.reload（）时，它没有做任何事情。在browsersync UI的help / about部分中，它说明了以下内容：

为什么Browsersync不与我的项目连接？ 99％的情况下，这是因为您的网页没有正文标记。为了使Browsersync正确连接，您的网站中必须存在正文标记（我们在其后面添加一个脚本标记）。

在我快速创建hello world app的html时，我从未放入body标签。问题解决了！

Gulp BrowserSync有打字稿和角度2

2 个答案: