Gulp 未创建/复制TypeScript类型文件

xxb16uws  于 2023-06-27  发布在  Gulp
关注(0)|答案(4)|浏览(233)

当我从命令行运行tsc时,创建了.js.map.d.ts文件:

C:\Users\{user}\Documents\My Projects\BEPS\angular2-soap>tsc -version
Version 1.8.10

...但是当我调用下面的Gulp函数时,一切都正常工作,除了.d.ts文件没有被创建/复制到./app/目录:

gulp.task('compile-typescript', function () {
    var sourcemaps = require('gulp-sourcemaps');
    var typescript = require('gulp-typescript');
    var typescriptCompiler = typescript({typescript: require('typescript')});
    var typescriptProject = typescript(typescript.createProject('tsconfig.json'));

    var tsResults = gulp.src(['!./src/**/spec*.ts', './src/**/*.ts'])
        .pipe(typescriptProject)
        .pipe(sourcemaps.init())
        .pipe(sourcemaps.write('../map/'))
        .pipe(gulp.dest('./app/'))
        .pipe(typescriptCompiler).dts.pipe(gulp.dest('./app/'));

    return tsResults;
});

我的package.json文件片段:

"devDependencies": {
   "autoprefixer": "6.3.6",
   "concurrently": "2.0.0",
   "cssnano": "3.5.2",
   "del": "2.2.0",
   "gulp": "3.9.1",
   "gulp-ext-replace": "0.3.0",
   "gulp-imagemin": "2.4.0",
   "gulp-postcss": "6.1.0",
   "gulp-sourcemaps": "1.6.0",
   "gulp-typescript": "2.13.0",
   "http-server": "0.9.0",
   "jasmine-core": "2.4.1",
   "karma": "0.13.22",
   "karma-chrome-launcher": "0.2.3",
   "karma-jasmine": "0.3.8",
   "karma-spec-reporter": "0.0.26",
   "lite-server": "2.2.0",
   "postcss": "5.0.19",
   "postcss-scss": "0.1.7",
   "precss": "^1.3.0",
   "run-sequence": "1.1.5",
   "systemjs": "0.19.26",
   "typescript": "latest",
   "typings": "0.8.1"
 },

我的tsconfig.json文件:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "ES5",
    "module": "System",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "declaration": true,
    "sourceMap": true,
    "mapRoot": "map/",
    "diagnostics": true
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

我以为我需要做的就是使用dts管道将输入文件发送到./app/
我错过了什么/做错了什么?谢谢!
尝试应用t34 t5中的建议:

gulp.task('compile-typescript', function () {
    var sourcemaps = require('gulp-sourcemaps');
    var typescript = require('gulp-typescript');
    var project = typescript.createProject('tsconfig.json', {declaration: true});
    var merge = require('merge2');

    var tsResults = gulp.src(['!./src/**/spec*.ts', './src/**/*.ts'])
        .pipe(sourcemaps.init())
        .pipe(typescript(project))
        .pipe(sourcemaps.write('../map/'));

    return merge([
        tsResults.dts.pipe(gulp.dest('./app/')),
        tsResults.js.pipe(gulp.dest('./app/'))
    ]);
});

访问tsResults.dts时出错:

TypeError: Cannot read property 'pipe' of undefined

我的猜测是sourcemaps流是正在使用的(不是typescript流)...这有道理吗?如果是,我能做什么来修复它?
下面的代码同时生成.js.d.ts文件-因为它没有尝试同时生成.map文件:

gulp.task('compile-typescript', function () {
    var typescript = require('gulp-typescript');
    var project = typescript.createProject('tsconfig.json', {declaration: true});
    var merge = require('merge2');

    var tsResults = gulp.src(['!./src/**/spec*.ts', './src/**/*.ts'])
        .pipe(typescript(project));

    return merge([
        tsResults.dts.pipe(gulp.dest('./app/')),
        tsResults.js.pipe(gulp.dest('./app/'))
    ]);
});
8wtpewkr

8wtpewkr1#

下面的代码实现了我所寻求的效果-但是它需要将.ts源文件编译两次(一次生成.js.map文件,一次生成.d.ts文件)

gulp.task('compile-typescript', function () {
    var sourcemaps = require('gulp-sourcemaps');
    var typescript = require('gulp-typescript');
    var merge = require('merge2');

    var src = gulp.src(['!./src/**/spec*.ts', './src/**/*.ts']);
    var dst = gulp.dest('./app/');

    var jsMap = src.pipe(typescript(typescript.createProject('tsconfig.json')))
                   .pipe(sourcemaps.init())
                   .pipe(sourcemaps.write('../map/'));

    var dts = src.pipe(typescript(typescript.createProject('tsconfig.json')));

    return merge([
        jsMap.pipe(dst),   // writes .js and .map files
        dts.dts.pipe(dst)  // writes .d.ts files
    ]);
});

我对这种方法不满意,因为它存在冗余--欢迎提出优化建议。

omtl5h9j

omtl5h9j2#

我认为你需要使用merge之类的东西来编写js文件和类型定义文件。我可能是错的,但我相信流在第一次吞下后关闭。dest(),所以没有任何东西通过dts管道发送。看看gulp typescript的readme file。在基本用法部分。
更新:我能够得到以下工作使用您的tsconfig文件。我只使用了一个单一的typescript源文件。这将生成.js、.d.ts和.map文件。

gulp.task('compile-typescript', function () {
    var typescript = require('gulp-typescript');
    var project = typescript.createProject('tsconfig.json', {declaration: true});
    var merge = require('merge2');

    var tsResults = gulp.src(['!./src/**/spec*.ts', './src/**/*.ts'])
        .pipe(sourcemaps.init())
        .pipe(typescript(project);

    return merge([
        tsResults.dts.pipe(gulp.dest('./app/')),
        tsResults.js.pipe(sourcemaps.write('./app/')).pipe(gulp.dest('./app/'))
    ]);

});
oiopk7p5

oiopk7p53#

你应该有一个类型脚本编译器,而不是两个。

var typescriptProject = typescript.createProject('tsconfig.json', {
  typescript: require('typescript'), 
  declaration: true,
});

var tsResults = gulp.src(['!./src/**/spec*.ts', './src/**/*.ts'])
    .pipe(sourcemaps.init())
    .pipe(typescript(typescriptProject))
    .pipe(sourcemaps.write('../map/'))
    .pipe(gulp.dest('./app/'));
oxcyiej7

oxcyiej74#

我认为你可以一步完成而不用合并。这对我很有效,并生成了所有.js.d.tsjs.map文件:

const tsp = ts.createProject("tsconfig.json");

gulp.task('transpile-src', () =>
  tsp
    .src()
    .pipe(sourcemaps.init())
    .pipe(tsp())
    .pipe(
      sourcemaps.write('.', {
        includeContent: false,
        sourceRoot: file => {
          return file.cwd + '/src';
        },
      })
    )
    .pipe(gulp.dest('dist/src'))
);

相关问题