Holen Sie sich den aktuellen Dateinamen in gulp.src ()

In meiner Datei gulp.js streame ich alle HTML-Dateien aus dem examplesOrdner in den buildOrdner.

Die Schluckaufgabe zu erstellen ist nicht schwierig:

var gulp = require('gulp');

gulp.task('examples', function() {
    return gulp.src('./examples/*.html')
        .pipe(gulp.dest('./build'));
});

Aber ich kann nicht herausfinden, wie die in der Aufgabe gefundenen (und verarbeiteten) Dateinamen abgerufen werden, oder ich kann nicht das richtige Plugin finden.

Ich bin nicht sicher, wie Sie die Dateinamen verwenden möchten, aber einer davon sollte helfen:

• Wenn Sie nur die Namen sehen möchten, können Sie so etwas wie verwenden gulp-debug, das die Details der Vinyl-Datei auflistet. Fügen Sie dies an einer beliebigen Stelle ein, an der Sie eine Liste erstellen möchten:

  var gulp = require('gulp'),
      debug = require('gulp-debug');
  
  gulp.task('examples', function() {
      return gulp.src('./examples/*.html')
          .pipe(debug())
          .pipe(gulp.dest('./build'));
  });

• Eine andere Option ist gulp-filelog, die ich nicht verwendet habe, aber ähnlich klingt (es könnte ein bisschen sauberer sein).

• Eine weitere Option ist gulp-filesizedie Ausgabe der Datei und ihrer Größe.

• Wenn Sie mehr Kontrolle wünschen, können Sie so etwas wie verwenden gulp-tap, mit dem Sie Ihre eigene Funktion bereitstellen und die Dateien in der Pipe anzeigen können.

Ich fand, dass dieses Plugin das tut, was ich erwartet hatte: Schlucken

Einfaches Verwendungsbeispiel: Durchsuchen Sie alle Dateien im Projekt mit der Erweiterung .jsx

gulp.task('reactify', function(){
        gulp.src(['../**/*.jsx']) 
            .pipe(using({}));
        ....
    });

Ausgabe:

[gulp] Using gulpfile /app/build/gulpfile.js
[gulp] Starting 'reactify'...
[gulp] Finished 'reactify' after 2.92 ms
[gulp] Using file /app/staging/web/content/view/logon.jsx
[gulp] Using file /app/staging/web/content/view/components/rauth.jsx

Hier ist ein anderer einfacher Weg.

var es, log, logFile;

es = require('event-stream');

log = require('gulp-util').log;

logFile = function(es) {
  return es.map(function(file, cb) {
    log(file.path);
    return cb();
  });
};

gulp.task("do", function() {
 return gulp.src('./examples/*.html')
   .pipe(logFile(es))
   .pipe(gulp.dest('./build'));
});

Sie können das Modul gulp-filenames verwenden , um das Array von Pfaden abzurufen. Sie können sie sogar nach Namespaces gruppieren:

var filenames = require("gulp-filenames");

gulp.src("./src/*.coffee")
    .pipe(filenames("coffeescript"))
    .pipe(gulp.dest("./dist"));

gulp.src("./src/*.js")
  .pipe(filenames("javascript"))
  .pipe(gulp.dest("./dist"));

filenames.get("coffeescript") // ["a.coffee","b.coffee"]  
                              // Do Something With it 

Für meinen Fall war das Schlucken-Ignorieren perfekt. Optional können Sie dort eine Funktion übergeben:

function condition(file) {
 // do whatever with file.path
 // return boolean true if needed to exclude file 
}

Und die Aufgabe würde so aussehen:

var gulpIgnore = require('gulp-ignore');

gulp.task('task', function() {
  gulp.src('./**/*.js')
    .pipe(gulpIgnore.exclude(condition))
    .pipe(gulp.dest('./dist/'));
});

Wenn Sie die Antwort von @OverZealous ( https://stackoverflow.com/a/21806974/1019307 ) in Typescript verwenden möchten , müssen Sie importanstelle von require:

import * as debug from 'gulp-debug';

...

    return gulp.src('./examples/*.html')
        .pipe(debug({title: 'example src:'}))
        .pipe(gulp.dest('./build'));

(Ich habe auch a hinzugefügt title).