javascript - 使用 gulp 展平父目录但不展平子目录

Question

我组织了我的代码，以便它在文件夹名称上有一些关键字，例如 _DIRECTIVE。我的意图是使用 gulp.src("**/*_DIRECTIVE/**/*") 编写一个识别文件夹命名模式的 gulp 任务。我想复制所有包含 _DIRECTVE 关键字的文件夹(及其子文件夹)，并将它们放在一个单独的文件夹中。

我的文件夹结构看起来像

src
   |-folder-name_1_DIRECTVE/
   | |-subfolder/
   | | |-subsubfolder/
   | |   |-file.js
   | |
   | |-file.js
   |
   |-folder/
   | |-folder-name_2_DIRECTVE/
   |   |-subfolder/
   |   | |-subsubfolder/
   |   |   |-file.js
   |   |
   |   |-file.js
   |
   |
   |-folder/
     |-subfolderfolder/
       |-folder-name_3_DIRECTVE/
         |-subfolder/
         | |-subsubfolder/
         |   |-file.js
         |
         |-file.js

使用 gulp 我希望输出为

output
       |-folder-name_1_DIRECTVE/
       | |-subfolder/
       | | |-subsubfolder/
       | |   |-file.js
       | |
       | |-file.js
       |
       |-folder-name_2_DIRECTVE/
       | |-subfolder/
       | | |-subsubfolder/
       | |   |-file.js
       | |
       | |-file.js
       |
       |-folder-name_3_DIRECTVE/
         |-subfolder/
         | |-subsubfolder/
         |   |-file.js
         |
         |-file.js

我尝试使用 gulp-flatten 但它没有帮助，因为它还展平了我的 _DIRECTIVE 文件夹下的子文件夹。

请帮忙

Answer 1

您可以使用 gulp-rename使用回调函数删除相应的父文件夹:

gulp.task('copy', function() {
  return gulp.src(['src/**/*_DIRECTIVE/**/*.js'])
    .pipe(rename(function(path) {
      path.dirname = path.dirname.replace(/^(.+[\\\/])?(?=[^\\\/]+_DIRECTIVE)/, '');
    }))
    .pipe(gulp.dest('output'));
});

假设文件夹结构与您的问题类似，为清楚起见更改了文件名:

$ find src -type f
src/top-level_DIRECTIVE/directive1.js
src/top-level_DIRECTIVE/subfolder1/subsubfolder1/directive1-sub.js
src/folder-2/nested-2_DIRECTIVE/directive2.js
src/folder-2/nested-2_DIRECTIVE/subfolder2/subsubfolder2/directive2-sub.js
src/folder-3/double-nested/nested-3_DIRECTIVE/directive3.js
src/folder-3/double-nested/nested-3_DIRECTIVE/subfolder3/subsubfolder3/directive3-sub.js

$ gulp copy

$ find output -type f
output/top-level_DIRECTIVE/directive1.js
output/top-level_DIRECTIVE/subfolder1/subsubfolder1/directive1-sub.js
output/nested-2_DIRECTIVE/directive2.js
output/nested-2_DIRECTIVE/subfolder2/subsubfolder2/directive2-sub.js
output/nested-3_DIRECTIVE/directive3.js
output/nested-3_DIRECTIVE/subfolder3/subsubfolder3/directive3-sub.js

---

说明:

path.dirname 将传递相对于源模式“基础”的文件名:

• 对于gulp.src('src/**/*.js'):

  src/a.js ⇒ path.dirname == "a.js"
src/nested/folder/b.js ⇒ path.dirname == "nested/folder/b.js"

• 对于gulp.src('src/directives/**'):

  src/directives/tab-directive/tabs.js ⇒ path.dirname == "tab-directive/tabs.js"

当您在重命名回调中更改传递的对象时，文件路径将附加到输出路径:

.pipe(gulp.rename(function (path) {
    path.basename = 'flat-' + path.basename;
});
// renames to:
output/some-directory/flat-file1.js
output/other-directory/flat-file2.js

要从路径中删除 *_DIRECTIVE 目录的父目录，请使用正则表达式:

path.dirname = path.dirname.replace(/(.+[\\\/])?(?=[^\\\/]+_DIRECTIVE)/, '');

/^(.+[\\\/])?(?=[^\\\/]+_DIRECTIVE)/

 ^                                    at the start of the string
  (        )?                         match an optional group
   .+                                 with 1 or more characters
     [\\\/]                           and ending with a directory separator (\ or /)
             (?=                  )   followed by a group which is excluded from the match
                [^\\\/]+              which has a folder-name (no \, /)
                        _DIRECTIVE    followed by a literal _DIRECTIVE