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

Question

我是 gulp 的新手，遇到了一个很常见的问题。我想做的是将 typescript 编译成 javascript，为它创建一个 sourcemap，然后运行 ​​uglify。我想要丑化和非丑化 js 的源映射。

我要实现的是以下文件结构:

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

这是我的 gulp 任务:

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() 调用将为缩小版本的文件生成正确的源映射。

有什么办法解决这个问题吗？

编辑:这不完全是 gulp: uglify and 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 的 vinyl 文件对象仍然有一个 .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( ) 不会再吐了。