Gulp:为缩小版和非缩小版脚本生成源映射
Gulp: Generate sourcemaps for both minified and non-minified scripts
我是 gulp 的新手并且 运行 遇到了一个问题,这可能是一个很常见的场景。我正在尝试做的是将打字稿编译成 javascript,为它创建一个 sourcemap,然后 运行ning 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']);
如您所见,我 运行ning 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.dest()
看起来有点像 hack,但它确实有效
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,然后尝试对其进行丑化。是的,sourcemap 不是 js,并且会发生异常。对于 plumber
,此异常将被忽略并且您实现了目标。
但我可能发现了一些错误,我建议你找到更正确的解决方案。
问题是在第一个 .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()
不会再抛出。
我是 gulp 的新手并且 运行 遇到了一个问题,这可能是一个很常见的场景。我正在尝试做的是将打字稿编译成 javascript,为它创建一个 sourcemap,然后 运行ning 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']);
如您所见,我 运行ning 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() 调用将为缩小版本的文件生成正确的源映射。
有什么解决办法吗?
编辑:这不完全是
看起来有点像 hack,但它确实有效
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,然后尝试对其进行丑化。是的,sourcemap 不是 js,并且会发生异常。对于 plumber
,此异常将被忽略并且您实现了目标。
但我可能发现了一些错误,我建议你找到更正确的解决方案。
问题是在第一个 .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()
不会再抛出。