将 glob 扁平化到一个目录答案

【问题标题】：Flatten glob down to one directory将 glob 扁平化到一个目录
【发布时间】：2014-01-16 04:26:00
【问题描述】：

在 Gulp 中，我使用 gulp.src 从目录中选择每个字体文件：

gulp.task('copy-fonts', function() {
   gulp.src('components/**/*.{ttf,woff,eof,svg}')
   .pipe(gulp.dest('build/fonts'));
});

但是，我希望将所有这些字体文件并排放在一个目录中，而不是从 components 目录重新创建整个树。

查看 Gulp、Gulp Utils 和 npm-glob API 并没有真正帮助我，尽管我可以很容易地跳过它。

最好的方法是什么？

【问题讨论】：

标签： node.js gulp

【解决方案1】：

我会使用 gulp-flatten：

var flatten = require('gulp-flatten');
gulp.task('copy-fonts', function() {
  gulp.src('dependencies/**/*.{ttf,woff,eof,svg}')
  .pipe(flatten())
 .pipe(gulp.dest('build/fonts'));
});

至于这是如何在内部完成的，请查看：https://github.com/armed/gulp-flatten/blob/master/index.js

【讨论】：

哇！我想我搜索的不够努力。 NPM 中的示例几乎正是我的用例。
我建议通过这里的大多数条目来了解插件的可能性：gratimax.github.io/search-gulp-plugins - 这也是学习如何从那里的阅读源中滚动自己的好方法！跨度>
@MangledDeutz 链接已损坏
这对于从我的 ionic 组件库中收集所有 .scss 以导入应用程序非常有用。

【解决方案2】：

另一种选择是简单地重写gulp.dest中的文件路径：

var path = require('path');
gulp.task('copy-fonts', function() {
    return gulp.src('components/**/*.{ttf,woff,eof,svg}')
        .pipe(gulp.dest(function(file) {
            file.path = file.base + path.basename(file.path);
            return 'build/fonts';
        }));
});

您也可以将此技术与gulp-changed 一起使用：

var path = require('path');
var changed = require('gulp-changed');

gulp.task('copy-fonts', function() {
  var dest = 'build/fonts';
  return gulp.src('components/**/*.{ttf,woff,eof,svg}')
    .pipe(changed(function(file) {
      file.path = file.base + path.basename(file.path);
      return dest;
    }))
    .pipe(gulp.dest(dest));
});

【讨论】：

被低估的答案
这几乎对我有用，但我必须添加分隔符：file.path = path.join(file.base, path.basename(file.path));

【解决方案3】：

另一种选择是使用 glob 库来取消您的路径，然后将文件路径传递到 gulp.src。当 gulp src 接收到未分配的文件路径时，不会维护相对目录，而是简单地将文件复制到您指定的 dest 目录的根目录。如果您需要在设置 src 之前进行任何自定义过滤或附加，那么首先取消您的路径也很有用。

glob = require('glob');
gulp.task('copy-fonts', function() {
  files = glob.sync('dependencies/**/*.{ttf,woff,eof,svg}');

  gulp.src(files)
  .pipe(gulp.dest('build/fonts'));
});

【讨论】：