首页 > 解决方案 > Gulp 编译命令未将 SRC 文件夹从 TS 编译为 DIst 文件夹中的 JS

问题描述

我正在使用 Gulp 将我的类型脚本编译成 java 脚本。当我启动 Gulp 命令时,它将编译我的 src 文件夹中的所有内容,并将编译文件放在 dist 文件夹中,现在是 Java 脚本,但编译后我只看到 dist 文件夹中存在一个文件,即 config.json 我期待所有src 中的文件在编译后存在于 dist 中。我正在使用 gulp compile 命令在 SRC 中编译我的文件。

请向下滚动下面的代码以查看文件夹结构。谢谢你。

这是我的gulpfile.js

var gulp = require('gulp');
var ts = require('gulp-typescript');
var zip = require('gulp-zip');
var del = require('del');
var install = require('gulp-install');
var runSequence = require('run-sequence');
var awsLambda = require("node-aws-lambda");
var sourcemaps = require('gulp-sourcemaps');
var gulpMocha = require('gulp-mocha');
var gutil = require('gulp-util');

const babel = require('gulp-babel');
gulp.task('clean', function () {
    return del(['./dist','./testJs', './dist.zip']);
});


gulp.task('compile', function () {
  return gulp.src(['src/**/*.ts' ]) //'typings/**/*.d.ts'])
    .pipe(sourcemaps.init())
    .pipe(ts({
      noImplicitAny: false,
      removeComments: true,
      preserveConstEnums: true,
      target: 'es2015',
      module: 'commonjs',
      noExternalResolve: true,
      exclude: ["node_modules", "dist"]
    }))
    .pipe(babel({
      presets: [ 'es2015' ],
      plugins: ['transform-runtime']      
    }))
    // sourceRoot must be relative to the running directory
    // It appears VSCode does resolve the path relative to the cwd
    // so using something like /src doesn't work, it has to be relative
    // to the /dist folder where we will run the app from
    // Need to test if maps help when errors are thrown in aws and if we should upload them
    .pipe(sourcemaps.write('.', { sourceRoot: '../src' }))
    .pipe(gulp.dest('./dist'))
    ,
    gulp.src(['src/**/*.json'])
    .pipe(gulp.dest('./dist'));
});


gulp.task('deploy', function (callback) {
    return runSequence(
        'clean',
        'compile',
        'compiletest',
        'test',
        'node-mods',
    callback
    );
});```

**Folder structure before running gulp compile**

  |
    |_ [src folder]
        |_CC_ToMRDR
        |_Central Repository
        app.ts
        config.json
        test.ts        

    |_ [other folder's and files like node modules,package.json,tsconfig.json etc]




**Folder structure after running gulp compile**

  |
    |_ [src folder]
        |_CC_ToMRDR
        |_Central Repository
        app.ts
        config.json
        test.ts        

    |
    |_ [dist folder]
          config.json

    |_ [other folder's and files like node modules,package.json,tsconfig.json etc]


标签: javascripttypescriptgulp

解决方案


尝试像这样更改第一个gulp.src

return gulp.src('src/**/*.ts')

第二个

.pipe(gulp.src('src/**/*.json'))

逗号会中断编译。第二个gulp.src必须添加为 apipe否则它会覆盖第一个(cfr. https://gulpjs.com/docs/en/getting-started/working-with-files/)。

更深入:

gulp.task('compile', function() {
  return gulp.src('src/**/*.ts')
    // some coding here
    .pipe(gulp.dest('./dist'))
    .pipe(gulp.src('src/**/*.json'))
    .pipe(gulp.dest('./dist'));
});

很抱歉进行了编辑,但您使用的是较旧的 Gulp.js 语法,我有点困惑。


推荐阅读