Pobierz aktualną nazwę pliku w gulp.src ()

138

W moim pliku gulp.js przesyłam strumieniowo wszystkie pliki HTML z examplesfolderu do buildfolderu.

Tworzenie zadania łyka nie jest trudne:

var gulp = require('gulp');

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

Ale nie mogę dowiedzieć się, jak odzyskać nazwy plików znalezione (i przetworzone) w zadaniu lub nie mogę znaleźć odpowiedniej wtyczki.

dkastl
źródło
Jeśli rozwiązałeś problem, prześlij swoją odpowiedź poniżej. Należy nie wystarczy zmodyfikować zapytanie z roztworem.
Andrew Marshall
2
@AndrewMarshall ... jak wyjaśnia mój komentarz do zmiany, którą usunąłeś, nie chcę twierdzić, że znalazłem poprawną odpowiedź, ale chcę przyznać uznanie odpowiedzi, która na to zasługuje. Dlatego nie zamieściłem tej małej modyfikacji jako odpowiedzi. Jeśli uważasz, że usunięcie mojej zmiany jest lepsze dla użytkowników (lub po prostu jest zgodne z zasadami tej witryny), to nie przeszkadza mi to. W przypadku innych osób wystarczy kliknąć historię edycji, aby zobaczyć, co było tam wcześniej.
dkastl

Odpowiedzi:

174

Nie jestem pewien, jak chcesz używać nazw plików, ale jedna z nich powinna pomóc:

  • Jeśli chcesz tylko zobaczyć nazwy, możesz użyć czegoś takiego jak gulp-debug , który zawiera szczegóły pliku winylowego. Wstaw to w dowolnym miejscu listy, na przykład:

    var gulp = require('gulp'),
        debug = require('gulp-debug');
    
    gulp.task('examples', function() {
        return gulp.src('./examples/*.html')
            .pipe(debug())
            .pipe(gulp.dest('./build'));
    });
  • Inną opcją jest gulp-filelog, której nie używałem, ale brzmi podobnie (może być trochę czystsza).

  • Inną opcją jest gulp-filesize , która wyświetla zarówno plik, jak i jego rozmiar.

  • Jeśli chcesz mieć większą kontrolę, możesz użyć czegoś takiego gulp-tap, co pozwala zapewnić własną funkcję i przeglądać pliki w potoku.

OverZealous
źródło
7
Dziękuję Ci! Wtyczki "log" nie były tym, czego szukałem, ponieważ zapisuje tylko do dziennika konsoli. Ale gulp-tappozwala uzyskać ścieżkę do każdego pliku, więc mogę go użyć do aktualizacji mojej listy w innym pliku HTML.
dkastl
A jeśli chcę przechowywać wszystkie pliki src w tablicy? debug nie daje wielu opcji.
Abhinav Singi
22

Zauważyłem, że ta wtyczka robi to, czego się spodziewałem: używanie łyka

Prosty przykład użycia: Przeszukuj wszystkie pliki w projekcie z rozszerzeniem .jsx

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

Wynik:

[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
Vikram
źródło
łykanie zrobiło to, czego szukałem, wielkie dzięki.
sghosh968
10

Oto inny prosty sposób.

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'));
});
Nacięcie
źródło
5
Wiesz, większość ludzi nie zna skryptu kawowego, więc o wiele bardziej korzystne byłoby napisanie odpowiedzi w najbardziej podstawowy sposób, aby skorzystała na tym maksymalna liczba czytelników :)
vsync
U mnie es.mapwyrzuca błąd:SyntaxError: Unexpected token .
vsync
1
+1 za to rozwiązanie (bez wtyczek). Ale jest błąd, zamiast return cb(); tego powinien być cb(null, file);. W przeciwnym razie pliki zostaną odfiltrowane i nie przejdą dalej w łańcuchu potoków. Więcej informacji znajduje się w dokumentacji es.map ()
Dimitry K.
5

Możesz użyć modułu gulp-filenames , aby uzyskać tablicę ścieżek. Możesz nawet pogrupować je według przestrzeni nazw:

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 
Serge
źródło
3

W moim przypadku gulp-ignore był doskonały. Opcjonalnie możesz tam przekazać funkcję:

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

A zadanie wyglądałoby tak:

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

gulp.task('task', function() {
  gulp.src('./**/*.js')
    .pipe(gulpIgnore.exclude(condition))
    .pipe(gulp.dest('./dist/'));
});
Lazyexpert
źródło
0

Jeśli chcesz użyć odpowiedzi @OverZealous '( https://stackoverflow.com/a/21806974/1019307 ) w Typescript, musisz importzamiast require:

import * as debug from 'gulp-debug';

...

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

(Dodałem też a title).

HankCa
źródło
dlaczego importzamiast require?
vsync,
Tak, nie wiem. To było na początku mojego rozwoju JS i zastanawiając się, powinienem był dokładniej zbadać, dlaczego to zadziałało w moim przypadku. Ale tak się stało i dlaczego to postawiłem!
HankCa