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

Question

我是新手,并且遇到了一个可能是非常常见的问题.我正在尝试的东西是将打字稿编译成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的完全重复,因为我需要编写多个源图,多次调用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()不会扔了了.