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這個例外忽略，你實現了你的目標。

但是我可以想出一些錯誤，我建議你找到更多的真正的解決方案。