Gulp 不生成内联源映射答案

【问题标题】：Gulp not generating inline sourcemapsGulp 不生成内联源映射
【发布时间】：2017-01-22 17:57:29
【问题描述】：

我在 ASP.NET Core 中有以下 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "inlineSourceMap": true,
    "inlineSources": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitOnError": false,
    "noImplicitAny": false,
    "removeComments": false,
    "outDir": "wwwroot/client-app"
},
  "exclude": [
    "node_modules",
    "wwwroot",
    "typings"
  ]
}

当我通过 Visual Studio 构建项目时，生成的 js 文件在文件末尾具有内联源映射：

/// <reference path="../typings/index.d.ts" />
"use strict";
var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic');
var client_application_module_1 = require('./client-application.module');
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(client_application_module_1.ClientApplicationModule);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm9vdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL0NsaWVudEFwcC9ib290LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLDhDQUE4Qzs7QUFFOUMseUNBQXVDLG1DQUFtQyxDQUFDLENBQUE7QUFDM0UsMENBQXdDLDZCQUE2QixDQUFDLENBQUE7QUFFdEUsaURBQXNCLEVBQUUsQ0FBQyxlQUFlLENBQUMsbURBQXVCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vLyA8cmVmZXJlbmNlIHBhdGg9XCIuLi90eXBpbmdzL2luZGV4LmQudHNcIiAvPlxyXG5cclxuaW1wb3J0IHsgcGxhdGZvcm1Ccm93c2VyRHluYW1pYyB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXItZHluYW1pYyc7XHJcbmltcG9ydCB7IENsaWVudEFwcGxpY2F0aW9uTW9kdWxlIH0gZnJvbSAnLi9jbGllbnQtYXBwbGljYXRpb24ubW9kdWxlJztcclxuXHJcbnBsYXRmb3JtQnJvd3NlckR5bmFtaWMoKS5ib290c3RyYXBNb2R1bGUoQ2xpZW50QXBwbGljYXRpb25Nb2R1bGUpOyJdfQ==

但是当我使用 Gulp 构建 js 文件时，没有生成内联源映射，就像它忽略了 tsconfig.json

这是我将 TypeScript 转换为 JavaScript 的 Gulp 任务：

    var tsProject = ts.createProject('tsconfig.json');

    gulp.task('transpile', function ()
    {
        var tsResult = gulp.src(["ClientApp/**/*.ts"])
            .pipe(ts(tsProject), undefined, ts.reporter.fullReporter()).js
            .pipe(gulp.dest('./wwwroot/client-app'));
    });

我是否需要在 Gulp 中进行任何额外配置才能生成内联源映射？

我使用的是 TypeScript 1.8.10

【问题讨论】：

标签： visual-studio typescript gulp

【解决方案1】：

我从来没有设法让它与简单的 typescript gulp 任务一起工作，我总是使用 gulp-sourcemaps 插件来做到这一点。

通常是这样的：

var sourcemaps = require('gulp-sourcemaps');
var typescript = require('gulp-typescript');

gulp.task('typescript', function () {
    gulp.src(["ClientApp/**/*.ts"])
        .pipe(sourcemaps.init())
        .pipe(typescript())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./wwwroot/client-app'))    
});

【讨论】：