将打字稿缩小为一个JS文件,使用gulp保持源映射工作
Minify typescript into one JS file, keep the sourcemaps working using gulp
我已经在网上爬遍了这个。
我考虑过使用 --out,但有一篇巨大的文章 https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md 说明为什么这是一个坏主意。
它说
--out实际上是一些构建工具的工作。
但是,并没有比这更进一步。因此,到目前为止,我有以下过程:
- 在打字稿上掉牙
- 编译打字稿
- 构建源映射
- 将编译的打字稿通过管道传输到另一个目录(构建)
- 将所有 bower deps 添加到索引.html文件
- Serve index.html,指向 appEntryPoint.js,即只是一个JS文件,在其余部分调用一些东西项目。
转译文件中的第一行是:appEntryPoint.js:
define(["require", "exports", "./example"], function (require, exports, example_1) {
我得到:"未捕获的引用错误,未定义定义"。我尝试添加require-js,以便在此文件之前加载它,但这也不起作用。
所以。我有哪些选择?
- 我可以强制打字稿只要求使用require并从其他文件中包含它需要的任何内容吗?
- 我可以将所有打字稿缩小到一个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']);
只需使用 gulp-concat
将所有*.js
文件合并为一个。
相关文章:
- 当使用Watchify时,Browserify+Babelify Gulp任务没有终止
- 如何在使用loopback REST API时更改gulp-angular项目的端口号
- 使用Gulp手柄部分编译为单个HTML文件
- "检测到可能的EventEmitter内存泄漏”;使用Gulp+Watchify+Factor捆绑包
- 如何使用gulp-inject将文件的内容插入到我的index.html中
- 使用gulp-angular gettext从JS文件中提取字符串不起作用
- Gulp,浏览使用react作为CommonJS不起作用.React未定义
- 如何使用gulp-test和karma在浏览器中调试Javascript测试文件
- 使用Gulp删除所有例外文件
- 当 SASS 更新时,浏览器同步无法使用 gulp
- 使用 gulp 访问打字稿文件变量值
- 使用 gulp 将打字稿导出提取到 json 文件
- 使用 Grunt/Gulp 构建 SAPUI5 应用程序,并使用 ABAP Team Provider 部署 Eclip
- 如何使用 Gulp 和 gulp 数据从单个 jade 模板生成多个 html 文件
- 使用gulp和browserfy从脚本文件进程访问Jquery库
- 我可以使用gulp将一个文件中的内容插入另一个文件吗
- 如何在Gulp中使用Browserify lib对模块进行别名
- Gulp - 使用 gulp-uglify 和 gulp-concat 的意外令牌错误
- Gulp:使用**监视所有子目录
- Gulp -使用少量JS文件连接watchify的结果