javascript - Gulp:为缩小和非缩小脚本生成源映射

我是新手，可能遇到了一个很常见的问题。我想做的是将Typescript编译为javascript，为其创建一个sourcemap，然后运行uglify。我想为ugliyfied和非uglified js提供一个sourcemap。

我想要达到的是以下文件结构:

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的副本，因为我需要编写多次对gulp.dest()的调用的源 map

最佳答案

问题是在第一个.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()将不再抛出。

关于javascript - Gulp:为缩小和非缩小脚本生成源映射，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39674934/