如何为浏览器用户 gulp 和 tsproject 捆绑打字稿文件？

Question

我是前端开发的新手，长期从事后端 C# 和 Java 开发，我正在努力掌握如何 build 前端应用程序。我想使用打字稿构建一个应用程序，并使用 gulp 作为我的构建管道，将我的代码转换、捆绑和缩小到单个 Java 脚本文件。

为此，我一直在研究节点模块 tsproject，据我所知，它应该完全符合我的要求。除了，我无法让它做我想做的事:-(。

这是我的相关部分 gulpfile.js:

var gulp = require('gulp');
var clean = require('gulp-clean');
var tsproject = require('tsproject');

gulp.task('default', [ 'min-js' ]);

gulp.task('clean', function () {
    return gulp
        .src('./dist/', { read: false })
        .pipe(clean());
});

gulp.task('min-js', [ 'clean' ], function () {
    return tsproject
        .src('./tsconfig.json')
        .pipe(gulp.dest('./dist/js'))
});

还有我的 tsconfig.json:

{
    "compilerOptions": {
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "outDir": "./"
    },
    "files": [
        "./src/**/*.tsx",
        "./src/**/*.ts"
    ],
    "bundles": {
        "myApp": {
            "files": [
                "./src/App.tsx"
            ],
            "config": {
                "minify": true,
                "sourcemap": true
            }
        }
    }
}

我原以为这会输出一个包含转译、捆绑和缩小的 js 文件 Java脚本代码，但我得到的是一个捆绑（未转译或缩小）的 Typescript 文件 (./dist/js/myApp.min.ts).

我是做错了什么还是完全误解了 tsproject 的目的和意图？

Answer 1

好吧，我不确定这是否是最好的方法，但我终于得到了像这样使用 gulpfile 的东西：

var gulp = require('gulp');
var browserify = require('gulp-browserify');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var ts = require('gulp-typescript');
var uglify = require('gulp-uglify');

gulp.task('default', [ 'min-js' ]);

gulp.task('clean', function () {
    return gulp
        .src([
            './tmp/',
            './dist/'
        ], { read: false })
        .pipe(clean());
});

gulp.task('transpile-ts', ['clean'], function () {
    var tsproject = ts.createProject('./src/tsconfig.json');
    return tsproject
        .src()
        .pipe(sourcemaps.init())
        .pipe(tsproject()).js
        .pipe(sourcemaps.write('./sourcemaps'))
        .pipe(gulp.dest('./tmp/js'));
});

gulp.task('min-js', [ 'transpile-ts' ], function () {
    return gulp
        .src('./tmp/js/App.js')
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(browserify())
        .pipe(uglify())
        .pipe(concat('App.min.js'))
        .pipe(sourcemaps.write('./sourcemaps'))
        .pipe(gulp.dest('./dist/js'))
});

基本上，我将所有 TypeScript 文件转译为 Javascript，并将 CommonJS 导入临时目录。然后我使用 Browserify 将 JavaScript 文件捆绑（即解析 CommonJS 导入）到一个文件中。最后我缩小了生成的 JavaScript 文件。瞧！

出于某种原因，我必须先将转换后的文件写入一个临时目录，然后将这些文件打包并缩小。而不是继续将 pipe(tsproject()) 的结果通过管道传输到 browserify()...

Answer 2

使用最新的 GULP 规范更新了 David Nordvall 的回答，该规范将任务设置为导出：

const gulp = require('gulp');
const {series} = require('gulp');
const clean = require('gulp-clean');
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const browserify = require('gulp-browserify');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

function cleanAll(cb) {
  return gulp.src([
      "./tmp/",
      "./dist/"
    ], { read: false, allowEmpty: true })
    .pipe(clean());
}

function transpileTS() {
  const tsproject = ts.createProject('./tsconfig.json');
  return tsproject
      .src()
      .pipe(sourcemaps.init())
      .pipe(tsproject()).js
      .pipe(sourcemaps.write('./sourcemaps'))
      .pipe(gulp.dest('./tmp/js'));
}

function minJS() {
  return gulp
      .src('./tmp/js/App.js')
      .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(browserify())
      .pipe(uglify())
      .pipe(concat('App.min.js'))
      .pipe(sourcemaps.write('./sourcemaps'))
      .pipe(gulp.dest('./dist/js'))
}

exports.default = series( cleanAll, transpileTS, minJS );

如何为浏览器用户 gulp 和 tsproject 捆绑打字稿文件？

How to bundle typescript files for the browser user gulp and tsproject?

frontend

bundling-and-minification

typescript

gulp