gulp-sourcemaps如何从src方法中检索匹配的path
我正在使用gulp来构build项目,并使用gulp-sourcemaps来生成源图。
我有几个这样的成员:
public |-- src |-- comp1 | |-- c1-a.js | |-- c1-b.js | |-- comp2 |-- c2-a.js |-- c2-b.js
我想build立他们到以下结构:
public |-- dist | |-- comp1 | | |-- c1-a.min.js | | |-- c1-a.min.js.map | | |-- c1-b.min.js | | |-- c1-b.min.js.map | | | |-- comp2 | |-- c2-a.min.js | |-- c2-a.min.js.map | |-- c2-b.min.js | |-- c2-a.min.js.map | |-- src/
目前我的吞咽任务可以生成正确的path文件:
gulp.task('component', function() { gulp.src('./public/src/**/*.js', {base: './public/src'}) .pipe(sourcemaps.init()) .pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '/src/' // here's the problem })) .pipe(gulp.dest('./public/dist')) })
但是有两个问题:
-
映射文件中的
sourceRoot
不正确:期望"sourceRoot":"/src/comp1/"
但结果为"sourceRoot":"/src/"
-
sourceMappingURL
在压缩文件中也没有:期望sourceMappingURL=c1-a.min.js.map
但结果是sourceMappingURL=../../comp1/c1-a.min.js.map
如何将**
部分附加到sourceRoot
并修复sourceMappingURL?
你的sourceRoot
被设置为/src/
因为这就是你在这里所说的:
gulp.src('./public/src/**/*.js', {base: './public/src'})
你已经设置了{base: './public/src'}
所以下面的所有东西都会把相对于src
path对待,所以这是正确的sourceRoot
。 但是在映射的顶部,它应该有相对于"sources":[...]
中的path的部分(例如"sources":["comp1/c1-a.min.js.map"]
)。
不过,如果你真的想改变sourceRoot,你可以使用sourceRoot
选项来gulp-sourcemaps ,但是你的sources
是错误的。 然而,gulp-sourcemaps版本2.0.0-alpha(你必须在你的package.json
预先mapSources
因为它是预发行的)也有一个mapSources
选项来让你修改它们。
同样,您可以使用sourceMappingURLPrefix
或sourceMappingURL
来更改sourceMappingURL。 在后一种情况下,您将获得完整的file
对象,因此您可以检查例如cwd
, base
等。在debuggingnpm / gulp任务时, console.debug
或Visual Studio Code可以是一个很大的帮助 ! 该文章展示了如何设置断点,检查variables等,我发现非常有用。