【问题标题】:Minify typescript into one JS file, keep the sourcemaps working using gulp将打字稿缩小到一个 JS 文件中,使用 gulp 保持源映射工作
【发布时间】:2016-02-26 16:35:49
【问题描述】:

为了这个,我已经爬遍了整个网络。

我曾考虑过使用 --out,但有一篇巨大的文章 https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md 说明了为什么这是一个坏主意。

上面写着

--out 确实是一些构建工具的工作。

但是,并没有比这更进一步。 所以,到目前为止,我有以下过程:

  1. 整理打字稿
  2. 编译打字稿
  3. 构建源地图
  4. 将编译后的打字稿导入另一个目录(构建)
  5. 将所有 Bower 部门添加到 index.html 文件中
  6. 服务index.html,指向appEntryPoint.js,即 只是一个 JS 文件,它在其余部分中调用一些东西 项目。

转译文件的第一行是: appEntryPoint.js:

define(["require", "exports", "./example"], function (require, exports, example_1) {

我得到:“未捕获的引用错误,未定义定义”。我尝试添加 require-js 以便在此文件之前加载它,但这也不起作用。

所以。我有哪些选择?

  1. 我可以强制 typescript 要求只使用 require 并从其他文件中包含它需要的任何内容吗?
  2. 我可以将我的所有打字稿压缩到一个 JS 文件中,然后仍然可以使用源映射吗?如果是这样,怎么办??

作为参考,这是我的gulpfile.js

var gulp = require('gulp');
var tsc = require('gulp-typescript');
var tslint = require('gulp-tslint');
var config = require('./gulpfile.config')();
var sourcemaps = require('gulp-sourcemaps');
var browsersync = require('browser-sync');
var superstatic = require('superstatic');
var usemin = require("gulp-usemin");
var uglify = require("gulp-uglify");
var reload      = browsersync.reload;
var wiredep = require("wiredep").stream;

gulp.task('ts-lint', function(){
  return gulp.src(config.allTs)
    .pipe(tslint())
    .pipe(tslint.report('prose', {
      emitError : false
    }));
});

gulp.task('compile-ts', function(){
  var sourceTsFiles = [
    config.allTs,
    config.typings
  ];

  var tsResult = gulp
    .src(sourceTsFiles)
    .pipe(sourcemaps.init())
    .pipe(tsc({
        module: "amd",
        target: "ES5",
        declarationFiles: false,
        emitError: false,
        emitDecoratorMetadata: true,
      outDir : config.tsOutputPath
    }));

  return tsResult.js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(config.tsOutputPath))
    .pipe(reload({stream:true}));
});

gulp.task('serve', ['ts-lint', 'compile-ts', 'bower'], function() {
    gulp.watch([config.allTs], ['ts-lint', 'compile-ts']);

    browsersync({
        port: 3000,
        files: ['index.html', '**/*.js'],
        injectChanges: true,
        logFileChanges: false,
        logLevel: 'silent',
        notify: true,
        reloadDelay: 0,
        server: {
            baseDir: config.browsersyncpath,
            middleware: superstatic({ debug: false})
        }
    });
});



gulp.task("bower", function () {
    gulp.src("index.html")
        .pipe(wiredep())
        .pipe(gulp.dest("build"));
});

// gulp.task("minify", function () {
//  return gulp.src("build/index.html")
//      .pipe(usemin({
//          assetsDir: config.tsOutputPath,
//          js: [uglify(), "concat"]
//  }))
//   .pipe(gulp.dest(config.tsOutputPath));
// });

gulp.task('default', ['serve']);

【问题讨论】:

    标签: javascript node.js typescript gulp


    【解决方案1】:

    只需使用gulp-concat 将所有*.js 文件合并为一个。

    【讨论】:

    • 在这种情况下,浏览器将如何解释源映射?
    • 源图由gulp-sourcemaps处理
    猜你喜欢
    • 2014-12-15
    • 2016-11-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多