Question

我正在使用angular2和systemjs构建单页应用。我也使用gulp从typescript编译为javascript，因为我不想公开打字稿模块。

我也在使用gulp watcher和gulp browser-sync。

因为angular2是基于Web组件的，并且在运行时使用模块加载器进行注入，所以所有模板和样式也在运行时注入。

头标记

<head>...</head>

不包含任何css文件，因为angular在运行时在组件dom元素处应用每个组件的样式。

因此，如果浏览器同步检测到某些更改，则必须重新加载整个页面。

在使用角度2而没有重新加载整个页面时，是否有人知道有浏览器同步的解决方案？

这是我的gulp任务，它将修改过的css传递给browsersync：

gulp.task('copy:css', ['copy:thirdparty-css', 'copy:css-global'], function() {
    var stream = gulp.src(paths.scssSourceApp)
        .pipe(autoprefixer())
        .pipe(sass().on('error', sass.logError))
        .pipe(cssmin())
        .pipe(gulp.dest(paths.cssDestFolderApp));

    if (development()) {
        stream.pipe(browserSync.stream());
    }
    return stream;
});

这是浏览器同步init和gulp观察者：

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "https://localhost:44387"
    });
});

gulp.task('watch', ['browser-sync'], function() {
    gulp.watch([paths.scssSourceApp, 
    paths.scssSourceGlobal, 
    paths.appSource, 
    paths.templateSource], 
    ['copy:templates','copy:css','compile:ts']);
});

浏览器与模块加载器同步（angular2 + systemjs）

0 个答案: