使用 Angular 2 在 Visual Studio IIS Express 中使用 Gulp 进行 BrowserSync答案

【问题标题】：BrowserSync with Gulp in Visual Studio ISS Express using Angular 2使用 Angular 2 在 Visual Studio IIS Express 中使用 Gulp 进行 BrowserSync
【发布时间】：2016-06-27 17:32:44
【问题描述】：

我已经使用 Gulp 构建文件并将其推送到构建目录。

const gulp = require("gulp");
const del = require("del");
const tsc = require("gulp-typescript");
const sourcemaps = require('gulp-sourcemaps');
const tsProject = tsc.createProject("tsconfig.json");
var browserSync = require('browser-sync');


/**
 * Remove build directory.
 */
gulp.task('clean', (cb) => {
    return del(["build"], cb);
});

/**
 * Compile TypeScript sources and create sourcemaps in build directory.
 */
gulp.task("compile", () => {
    var tsResult = gulp.src("src/**/*.ts")
        .pipe(sourcemaps.init())
        .pipe(tsc(tsProject));
    return tsResult.js
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest("build"));
});

/**
 * Copy all resources that are not TypeScript files into build directory.
 */
gulp.task("resources", () => {
    return gulp.src(["src/**/*", "!**/*.ts"])
        .pipe(gulp.dest("build"))
});

/**
 * Copy all required libraries into build directory.
 */
gulp.task("libs", () => {
    return gulp.src([
            'core-js/client/shim.min.js',
            'systemjs/dist/system-polyfills.js',
            'systemjs/dist/system.src.js',
            'reflect-metadata/Reflect.js',
            'rxjs/**',
            'zone.js/dist/**',
            '@angular/**'
    ], { cwd: "node_modules/**" }) /* Glob required here. */
        .pipe(gulp.dest("build/lib"));
});




/**
 * Build the project.
 */
gulp.task("build", ['compile', 'resources', 'libs'], () => {
    console.log("Build finished ...")
});

现在我所有的文件都在构建目录中。我想在 html、typescript(ts) 发生变化时使用 BrowserSync 选项重新加载页面。

我找到了这个，但它在 Visual Studio 中不起作用；也许它适用于使用 lite-server 的 VS Code。

gulp.task('browser-sync', function() {
    bs.init({
        server: {
            baseDir: "./build"
        }
    });
});

gulp.task('watch', ['browser-sync'], function () {
     gulp.watch("*.html").on('change', bs.reload);
});

我想观察 CSS、html、typescript 文件的更改，然后使用 compile 任务将 TypeScript 编译为 JavaScript 并将其复制到构建文件夹（不是原始文件夹 src/app）并在更改时重新加载浏览器。

我现在没有路由，所以使用 index.html 作为起始页，网址是：

http://localhost:34756/src/index.html

和Index.html页面：

<html>
<head>
    <title>Angular 2 TypeScript Gulp QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="../build/lib/core-js/client/shim.min.js"></script>

    <script src="../build/lib/zone.js/dist/zone.js"></script>
    <script src="../build/lib/reflect-metadata/Reflect.js"></script>
    <script src="../build/lib/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app')
                .then(null, console.error.bind(console));
    </script>

</head>

<!-- 3. Display the application -->
<body>
    <app>Loading...</app>
</body>

</html>

【问题讨论】：

标签： angular gulp

【解决方案1】：

不确定它是否仍然相关，但如果您只需要在保存时重新编译 ts 文件，只需在 tsconfig.json 顶部添加“compileOnSave”：true

【讨论】：