14

我是 gulp 的新手，遇到了一个很常见的问题。我正在尝试将 typescript 编译成 javascript，为它创建一个源映射，然后运行 ​​uglify。我想要一个用于 ugliyfied 和非 uglified 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() 调用将为文件的缩小版本生成正确的源映射。

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

编辑：这不完全是gulp: uglify 和 sourcemaps的副本，因为我需要编写多个 sourcemaps 并多次调用 gulp.dest()

4

2 回答 2

22

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

于 2016-09-24T11:29:39.620 回答
0

看起来像一种黑客，但它的工作原理

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这个例外忽略，你实现了你的目标。

但是我可能已经发现了一些错误，我建议您找到更真实的解决方案。

于 2016-09-24T10:28:07.873 回答