Gulp：为缩小和非缩小脚本生成源代码

Question

我是新手，已经遇到了一个可能是相当常见的问题。我想要的是将打字稿编译成javascript，为它创建一个源代码映射，然后运行uglify。我希望为ugliyfied以及非丑陋的js提供源代码。

我试图才达到如下的文件结构：

framework.js 
framework.js.map < this won't work 
framework.min.js 
framework.min.js.map 

这是我的任务，一饮而尽：

var gulp = require('gulp'), 
uglify = require('gulp-uglify') 
ts = require("gulp-typescript") 
sourcemaps = require('gulp-sourcemaps') 
rename = require('gulp-rename'); 

var tsProject = ts.createProject("tsconfig.json"); 


gulp.task('typescript', function(){ 
    tsProject.src() 
    .pipe(sourcemaps.init()) 
    .pipe(tsProject()).js 
    .pipe(sourcemaps.write('.')) // Write sourcemap for non-minified version 
    .pipe(gulp.dest("dist")) 
    .pipe(uglify()) // Code will fail here 
    .pipe(rename({suffix:'.min'})) 
    .pipe(sourcemaps.write('.')) // Write sourcemap for minified version. 
    .pipe(gulp.dest("dist")); 
}); 

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

正如你所看到的，我跑sourcemaps.write（ ）两次得到两个不同的文件。这给了我一个错误

tream.js:74                   
    throw er; // Unhandled stream error in pipe.         
^GulpUglifyError: unable to minify JavaScript          
at createError  (C:\Users\alexa\Dropbox\code\Web\mhadmin\framework\node_modules\gulp-uglify\lib\create-error.js:6:14) 

离开了sourcemap.write的第一个（）调用将导致正确sourcemap该文件的缩小的版本。

任何想法如何解决这个问题？

编辑：这不是gulp: uglify and sourcemaps完全是重复的，因为我需要写多sourcemaps多次调用到gulp.dest（）

Answer 1

的问题是，经过第一.pipe(sourcemaps.write('.'))你有你的数据流中的两个文件：

framework.js 
framework.js.map 

你写这两个文件到文件系统（这是好的），但你尝试在运行uglify()两个都。由于您的framework.js.map文件不是JavaScript文件，并且不包含有效的JavaScript代码，因此会弹出uglify()插件。

将framework.js.map写入文件系统之后，确实没有理由再将该文件保留在流中。 framework.js的乙烯基文件对象仍具有一个.sourceMap属性，该属性可承载迄今为止所有的转换，这意味着您可以从流中删除framework.js.map文件。

的gulp-filter插件让我们你做到这一点：

var filter = require('gulp-filter'); 

gulp.task('typescript', function(){ 
    return tsProject.src() 
    .pipe(sourcemaps.init()) 
    .pipe(tsProject()).js 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest("dist")) 
    .pipe(filter('**/*.js')) // only let JavaScript files through here 
    .pipe(uglify()) 
    .pipe(rename({suffix:'.min'})) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest("dist")); 
}); 

.pipe(filter('**/*.js'))后只有framework.js文件将在视频流和uglify()不会扔了了。

Answer 2

好像那种黑客，但它的工作原理

gulp.src('TypeScript/Test.ts') 
    .pipe(plumber()) 
    .pipe(sourcemaps.init()) 
    .pipe(ts(tsOptions)).js 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('./wwwroot/test')) 
    .pipe(uglify()) 
    .pipe(rename({ extname: '.min.js' })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('./wwwroot/test')); 

神奇的是在plumber。水管工阻止异常停止进程。但是为什么发生异常的主要利益。所以，这很清楚。在你的代码中，你通过.pipe(sourcemaps.write('.')) // Write sourcemap for non-minified version创建源图，然后尝试丑化它。是的，sourcemap不是js，并且发生异常。用plumber这个例外忽略，你实现了你的目标。

但是我可以想出一些错误，我建议你找到更多的真正的解决方案。