Récupère le nom du fichier actuel dans gulp.src ()


138

Dans mon fichier gulp.js, je diffuse tous les fichiers HTML du examplesdossier dans le builddossier.

Créer la tâche gulp n'est pas difficile:

var gulp = require('gulp');

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

Mais je ne peux pas comprendre comment récupérer les noms de fichiers trouvés (et traités) dans la tâche, ou je ne trouve pas le bon plugin.


Si vous avez résolu votre problème, vous devez publier votre réponse ci-dessous. Vous ne devez pas simplement modifier votre question avec la solution.
Andrew Marshall

2
@AndrewMarshall ... comme mon commentaire à l'édition, que vous avez supprimé, explique, je ne veux pas prétendre avoir trouvé la bonne réponse mais je veux donner le crédit à la réponse qui le mérite. C'est pourquoi je n'ai pas posté la petite modification comme réponse. Si vous pensez que la suppression de ma modification est meilleure pour les utilisateurs (ou simplement conforme aux règles de ce site), alors je suis d'accord avec cela. Pour n'importe qui d'autre, cliquez simplement sur l'historique des modifications pour voir ce qu'il y avait auparavant.
dkastl

Réponses:


174

Je ne sais pas comment vous souhaitez utiliser les noms de fichiers, mais l'un de ceux-ci devrait vous aider:

  • Si vous voulez juste voir les noms, vous pouvez utiliser quelque chose comme gulp-debug, qui répertorie les détails du fichier vinyle. Insérez ceci partout où vous voulez une liste, comme ceci:

    var gulp = require('gulp'),
        debug = require('gulp-debug');
    
    gulp.task('examples', function() {
        return gulp.src('./examples/*.html')
            .pipe(debug())
            .pipe(gulp.dest('./build'));
    });
  • Une autre option est gulp-filelog, que je n'ai pas utilisée, mais qui semble similaire (cela pourrait être un peu plus propre).

  • Une autre option est gulp-filesize, qui génère à la fois le fichier et sa taille.

  • Si vous voulez plus de contrôle, vous pouvez utiliser quelque chose comme gulp-tap, qui vous permet de fournir votre propre fonction et de regarder les fichiers dans le tube.


7
Je vous remercie! Les plugins "log" n'étaient pas ce que je recherchais, car ils n'écrivent que dans le journal de la console. Mais gulp-tappermet d'obtenir le chemin de chaque fichier, donc je peux l'utiliser pour mettre à jour ma liste dans un autre fichier HTML.
dkastl

Que faire si je souhaite stocker tous les fichiers src dans un tableau? le débogage ne donne pas beaucoup d'options.
Abhinav Singi

22

J'ai trouvé que ce plugin faisait ce à quoi je m'attendais: gulp-using

Exemple d'utilisation simple: recherchez tous les fichiers du projet avec l'extension .jsx

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

Production:

[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

gulp-using a fait ce que je cherchais merci beaucoup.
sghosh968

10

Voici un autre moyen simple.

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

5
Vous savez, la plupart des gens ne connaissent pas coffeescript, il serait donc beaucoup plus avantageux d'écrire simplement la réponse de la manière la plus élémentaire pour que le nombre maximum de lecteurs en profite :)
vsync

Pour moi es.mapjette une erreur:SyntaxError: Unexpected token .
vsync

1
+1 pour cette solution (sans plugins). Mais il y a un bug, à la place return cb(); ça devrait être cb(null, file);. Sinon, les fichiers seront filtrés et n'iront pas plus loin dans la chaîne de tuyaux. Plus d'informations, consultez la documentation pour es.map ()
Dimitry K

5

Vous pouvez utiliser le module gulp-filenames pour obtenir le tableau des chemins. Vous pouvez même les regrouper par espaces de noms:

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 

3

Pour mon cas, gulp-ignore était parfait. En option vous pouvez y passer une fonction:

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

Et la tâche ressemblerait à ceci:

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

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

0

Si vous souhaitez utiliser la réponse de @OverZealous ( https://stackoverflow.com/a/21806974/1019307 ) dans Typescript, vous devez au importlieu de require:

import * as debug from 'gulp-debug';

...

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

(J'ai également ajouté a title).


pourquoi importau lieu de require?
vsync le

Ouais je ne sais pas. C'était à mes débuts dans le développement de JS et en réflexion, j'aurais dû enquêter davantage sur les raisons pour lesquelles cela a fonctionné pour moi. Mais c'est le cas et donc pourquoi je l'ai mis en place!
HankCa
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.