Gulp src 忽略部分 glob 路径以进行递归复制

Question

我想将一些 openui5 资源文件从 Bower 包复制到我的输出文件夹中。它们都有一个共同的前缀(openui5-)。它们都有一个名为“资源”的子文件夹。我想将该内容从该子文件夹复制到输出中的一个常见“资源”文件夹。

我想使用 glob 来通过 gulp 复制它们。现在我必须明确给出每条路径

['bower_components/openui5-sap.m/resources/**/*',
 'bower_components/openui5-sap.ui.core/resources/**/*',
 'bower_components/openui5-themelib_sap_belize/resources/**/*']

我想使用这样的模式:

'bower_components/openui5-*/resources/**/*'

但是如果我这样做，我也会复制完整的模块名称，所以我的资源文件夹如下所示:

out/resources/
+ -- openui5-sap.m/resources/...
+ -- openui5-sap.ui.core/resources/...
+ -- openui5-themelib_sap_belize/resources/...

据我了解，这是因为默认情况下 gulp.src 会采用第一个 glob(位于模块名称中)并从那里生成递归结构。

有没有办法忽略输出的部分 glob 模式或使用另一个 glob 修剪输出路径？

我尝试并搜索了任何解决方案，但我找不到任何东西。

gulp-rename 似乎使整个层次结构变得扁平:

gulp.task('copyui5resources', function() {
    gulp.src('bower_components/openui5-*/**/*')
        .pipe(rename({ dirname: '' }))
        .pipe(gulp.dest('out/resources'));
});

使用基本选项也没有帮助。似乎只复制了其中的一部分:

gulp.task('copyui5resources', function() {
    gulp.src('bower_components/openui5-*/**/*', {base: 'bower_components/openui5-*'})
        .pipe(gulp.dest('out/resources'));
});

这是一张屏幕截图，其中包含我的输入文件夹结构和到目前为止的 gulp 任务。感谢您的帮助!

Answer 1

尝试使用gulp-rename，您的方向是正确的。但是，dirname 选项对于您想要完成的任务来说不够强大，因为它只能替换整个目录结构。您只想替换其中的一部分。

对于像这样的情况，gulp-rename 可以提供一个函数，该函数允许您使用 JavaScript 提供的所有功能(包括 string.replace)来更改 dirname ()。

这意味着你可以这样做:

var gulp = require('gulp');
var rename = require('gulp-rename');

gulp.task('default', function() {
  return gulp.src('bower_components/openui5-*/resources/**/*')
    .pipe(rename(f => f.dirname = f.dirname.replace(/openui5-.*?\//, '')))
    .pipe(gulp.dest('out/'));
});