Как связать файлы машинописных файлов для браузера пользователя gulp и tsproject?

Question

Я новичок в разработке интерфейсов, являясь долговременным бэкэнд-C# и разработчиком Java, и я пытаюсь понять, как сделать build приложений для конечных пользователей. Я хотел бы создать приложение с использованием машинописного текста и использовать gulp для моего конвейера сборки, чтобы передать, объединить и превзойти мой код в один файл JavaScript.

Для этой цели я смотрю на модуль узла 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-файла, содержащего переполненный, связанный и минитипированный код JavaScript, но то, что я получаю, является связанным (не переполненным или мини-) файлом машинописного файла (./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')) 
}); 

В основном я transpile всех файлов транскрипт Javascript с CommonJS импортирует во временный каталог. Затем я использую Browserify для связывания (т. Е. Разрешения импорта CommonJS) файлов JavaScript в один файл. Наконец, я минимизирую полученный файл JavaScript. Вуаля!

По какой-то причине мне пришлось сначала написать переданные файлы во временный каталог, а затем собрать и минимизировать эти файлы. Вместо того, чтобы просто продолжать трубку результат pipe(tsproject()) до browserify() ...