web-dev-qa-db-ja.com

グロブを1つのディレクトリにフラット化する

Gulp内では、gulp.srcを使用して、ディレクトリからすべてのフォントファイルを選択しています。

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

ただし、ツリー全体をcomponentsディレクトリから再作成するのではなく、これらすべてのフォントファイルを1つのディレクトリに並べて表示したいと思います。

Gulp、Gulp Utils、およびnpm-glob APIを調べても、簡単にスキップできたものの、実際には役に立ちませんでした。

これについて行くための最良の方法は何でしょうか？

node.jsgulp
28
Mark

私は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

36
Mangled Deutz

もう1つのオプションは、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));
});
19
daviestar

もう1つのオプションは、globライブラリを使用してパスのロブを解除し、ファイルパスをgulp.srcに渡すことです。 gulp srcがローブされていないファイルパスを受信すると、相対ディレクトリは維持されず、指定した宛先ディレクトリのルートにファイルをコピーするだけです。 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'));
});
3
Corban Brook