Flatten glob bis auf ein Verzeichnis

Question

Innerhalb Gulp, ich gulp.src bin mit jeder Font-Datei aus einem Verzeichnis auszuwählen:

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

Allerdings würde Ich mag all diese Schriftart-Dateien haben, in einem Verzeichnis Seite aufzuzuwickeln -By-Side-statt die gesamte Struktur aus dem components Verzeichnis neu erstellt.

In den Schluck zu schauen, half mir Gulp Utils und npm-glob APIs nicht wirklich, obwohl ich leicht davon hätte überspringen können.

Was wäre der beste Weg, um dies zu tun?

Answer 1

ich schluck-abflachen verwenden würde:

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

, wie diese intern durchgeführt wird, überprüfen Sie: https://github.com/armed/gulp-flatten/blob/master/index.js

Answer 2

Eine weitere Option ist die glob-Bibliothek zu benutzen, um Ihre Pfade zu unglob, und dann den Pass Dateipfade in gulp.src. Wenn gulp src unglobbierte Dateipfade empfängt, wird das relative Verzeichnis nicht beibehalten und kopiert die Datei einfach in das Stammverzeichnis des Zielverzeichnisses, das Sie angeben. Es kann auch nützlich sein, die Pfade zuerst zu entfernen, wenn Sie vor dem Festlegen von src eine benutzerdefinierte Filterung oder Anhängen durchführen müssen.

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

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

Answer 3

Eine weitere Option ist es, den Dateipfad innerhalb gulp.dest einfach zu umschreiben:

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'; 
     })); 
}); 

Sie auch diese Technik mit gulp-changed verwenden können:

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)); 
});