Question

我是gulp的新手并遇到了一个可能是非常常见的问题。我正在尝试的东西是将打字稿编译成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 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的乙烯基文件对象仍然具有.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创建源图，然后尝试对其进行uglify。是的，sourcemap不是js，异常发生。使用plumber时，此例外会忽略，您实现了目标。

但我可能已经弄错了，我建议你找到更多的真实解决方案。

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

2 个答案: