Question

我使用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代码。

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文件的更改，然后使用编译任务，将typscript编译为javascript并将其复制到build文件夹（不是原始文件夹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>

感谢任何帮助

Answer 1

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

使用Angular 2在Visual Studio ISS Express中使用Gulp进行BrowserSync

1 个答案: