尝试使用Gulp为Angular编译TypeScript

时间:2018-02-01 20:55:49

标签: node.js angular typescript gulp

我正在尝试学习TypeScript和Gulp,但我似乎无法让基础知识发挥作用..

gulpfile.ts:

"use strict";

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

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

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

/**
* Copy all required libraries into dist 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("dist/lib"));
});

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

/**
* Watch for changes in TypeScript, HTML and CSS files.
*/
gulp.task('watch', function () {
    gulp.watch(["src/**/*.ts"], ['compile']).on('change', function (e) {
        console.log('TypeScript file ' + e.path + ' has been changed. Compiling.');
    });

    gulp.watch(["src/**/*.html", "src/**/*.css"], ['resources']).on('change', function (e) {
        console.log('Resource file ' + e.path + ' has been changed. Updating.');
    });
});

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

有谁可以指出我做错了什么?

0 个答案:

没有答案