【问题标题】:No output with gulp-typescriptgulp-typescript 没有输出
【发布时间】:2017-08-01 09:01:41
【问题描述】:

我的 tasks.json 文件中有两个任务,一个构建任务和一个使用 gulp-typescript 的 gulp 任务。后者不起作用,我真的不明白为什么。它们都使用相同的 tsconfig.json 文件。

gulp-task ("tsc") 执行没有错误,但不会生成 src/test.js 文件 (outFile)。我在文件夹树的其他地方也找不到它。构建任务会生成文件。

typescript 和 gulp-typescript 之间是否存在版本不匹配?发生了很多变化,谷歌搜索“正确”的方式非常困难。

我希望 gulp-typescript 只是 typescript 周围的透明层。显然,它不是(它似乎有自己的方式来生成源映射等。一些 tsconfig.json 设置似乎被 gulp-typescript 忽略了)。

tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "taskName": "tsc",
            "command": "gulp.cmd",
            "args": ["tsc"]
        }
    ]
}

gulpfile.js

var gulp = require('gulp'),
    less = require('gulp-less'),
    plumber = require('gulp-plumber'), 
    uglify = require('gulp-uglify'),
    notify = require('gulp-notify'),
    concat = require('gulp-concat'),
    template = require('gulp-angular-templatecache'),
    htmlminifier = require('gulp-html-minify'),
    chmod = require('gulp-chmod'),
    cachebust = require('gulp-cache-bust'),
    runSequence = require('run-sequence'),
    tsc = require("gulp-typescript"),
    webserver = require('gulp-webserver'),
    flatten = require('gulp-flatten'),
    gutil = require('gulp-util'),
    gulpif = require('gulp-if'),
    debug = require('gulp-debug'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps'),
    argv = require("yargs").argv;
...
let compileTypescript = function() {
    var tsProject = tsc.createProject("tsconfig.json");

    var tsResult =
        tsProject
            .src()
            .pipe(sourcemaps.init())
            .pipe(tsProject());

    return
        tsResult.js
            .pipe(sourcemaps.write())
            .pipe(gulp.dest('src'));
};

gulp.task('tsc', compileTypescript);

tsconfig.json

    {

      "compileOnSave": false,
      "compilerOptions": {
        "target": "es5",
        "allowJs": false,
        "noImplicitUseStrict": true,
        "rootDir": "./src",
        "noEmitOnError": true,
        "module": "none",
        "moduleResolution": "node",
        "noImplicitReturns": true,
        "outFile": "src/test.js",
        "removeComments": true,
        "skipLibCheck": true,
        "allowUnreachableCode": false,
        "allowSyntheticDefaultImports": false,
        "allowUnusedLabels": false,
        "sourceMap": true,
        "declaration": false
      },
      "exclude": [
        "node_modules",
        "dist",
        "src/scripts/typings/node",
        "src/scripts/typings/jasmine",
        "src/**/*.js",
        "src/**/__*.*"
      ]
    }

package.json

{
  "name": "Test",
  "author": {
    "name": "Test Company",
    "email": "test@test.com",
    "url": "http://test.com/"
  },
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-connect":"5.0.0",
    "gulp-angular-templatecache": "2.0.0",
    "gulp-chmod": "2.0.0",
    "gulp-concat": "2.6.1",
    "gulp-flatten": "0.3.1",
    "gulp-html-minify": "^0.0.14",
    "gulp-debug":"3.1.0",
    "gulp-inject": "4.2.0",
    "gulp-less": "3.3.2",
    "gulp-rename":"1.2.2",
    "gulp-notify": "3.0.0",
    "gulp-plumber": "1.1.0",
    "gulp-rimraf": "0.2.1",
    "gulp-sourcemaps": "2.6.0",
    "gulp-tslint": "8.1.1",
    "gulp-typescript": "^3.2.1",
    "gulp-uglify": "3.0.0",
    "gulp-using": "0.1.1",
    "gulp-util": "3.0.8",
    "webpack-stream":"3.2.0",
    "gulp-if":"2.0.2",
    "gulp-watch": "4.3.11",
    "gulp-cache-bust": "1.1.0",
    "gulp-webserver": "0.9.1",
    "run-sequence":"2.1.0",
    "yargs": "8.0.2",
    "stream-combiner2": "1.1.1",
    "typescript": "2.4.2",
    "tslint":"5.5.0"
  }
}

【问题讨论】:

  • 我没有用过这个,但是我看到文档说“你必须在任务之外创建项目”。否则,我建议使用 gulp-print 来查看它通过管道的不同部分。
  • 天啊。我发现了问题。原来我在我的 gulp 任务中的 return 语句中有换行符,导致管道被跳过。经验教训 - 不要手动“美化” gulp 代码;)

标签: typescript gulp visual-studio-code tsconfig gulp-typescript


【解决方案1】:

对于像我这样的其他 Javascript 新手,不要用额外的换行符手动“美化”代码,尤其是 return 语句;

原来我的 gulp-typescript 任务因此没有执行管道。 我花了将近两天的时间才弄清楚。呵呵。

做:

return tsResult.js
       .pipe(sourcemaps.write())
       .pipe(gulp.dest(project.source.path));

代替:

return 
     tsResult.js
       .pipe(sourcemaps.write())
       .pipe(gulp.dest(project.source.path));

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-03-02
    • 2016-04-02
    • 1970-01-01
    • 2016-11-08
    • 1970-01-01
    • 2019-08-13
    • 1970-01-01
    • 2016-05-26
    相关资源
    最近更新 更多