146

In my gulp.js file I'm streaming all HTML files from the examples folder into the build folder.

To create the gulp task is not difficult:

var gulp = require('gulp');

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

But I can't figure out how retrieve the file names found (and processed) in the task, or I can't find the right plugin.

Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
dkastl
  • 1,598
  • 2
  • 13
  • 15
  • If you’ve solved your problem, you should either post your answer below. You should *not* simply edit your question with the solution. – Andrew Marshall Jun 17 '15 at 15:31
  • 2
    @AndrewMarshall ... as my comment to the edit, that you deleted, explains, I don't want to claim to have found the correct answer but want to give the credits to the answer that deserves it. That's why I didn't post the small modification as an answer. If you think, that removing my edit is better for the users (or just complies with the rules of this site), then I'm OK with that. For anyone else, just click at the edit history to see what was there before. – dkastl Jun 17 '15 at 16:42

7 Answers7

183

I'm not sure how you want to use the file names, but one of these should help:

  • If you just want to see the names, you can use something like gulp-debug, which lists the details of the vinyl file. Insert this anywhere you want a list, like so:

    var gulp = require('gulp'),
    debug = require('gulp-debug');

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

  • Another option is gulp-filelog, which I haven't used, but sounds similar (it might be a bit cleaner).

  • Another options is gulp-filesize, which outputs both the file and it's size.

  • If you want more control, you can use something like gulp-tap, which lets you provide your own function and look at the files in the pipe.

OverZealous
  • 39,252
  • 15
  • 98
  • 100
  • 7
    Thank you! The "log" plugins where not what I was looking for, because it only writes to the console log. But `gulp-tap` allows to get the path for each file, so I can use it for updating my list in another HTML file. – dkastl Feb 16 '14 at 08:31
  • What if I want to store all the src files in an array? debug doesn't give many options. – Abhinav Singi Aug 17 '15 at 15:21
25

I found this plugin to be doing what I was expecting: gulp-using

Simple usage example: Search all files in project with .jsx extension

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

Output:

[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
  • 4,162
  • 8
  • 43
  • 65
13

Here is another simple way.

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(null, file);
  });
};

gulp.task("do", function() {
 return gulp.src('./examples/*.html')
   .pipe(logFile(es))
   .pipe(gulp.dest('./build'));
});
Nick
  • 1,174
  • 11
  • 20
  • 5
    You know, most people don't know coffeescript, so it would be much more beneficial to just write the answer in the most basic way to the maximum number of readers would benefit :) – vsync Sep 27 '16 at 14:00
  • For me `es.map` throws an error: `SyntaxError: Unexpected token .` – vsync Sep 27 '16 at 14:06
  • 2
    +1 for this solution (without plugins). But there's a bug, instead `return cb();` it should be `cb(null, file);`. Otherwise the files will be filtered out and won't go further down the pipe chain. More info [check docs for es.map()](https://www.npmjs.com/package/event-stream#map-asyncfunction) – Dimitry K Jul 07 '17 at 19:34
5

You can use the gulp-filenames module to get the array of paths. You can even group them by namespaces: 

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
  • 13,940
  • 35
  • 121
  • 205
3

For my case gulp-ignore was perfect. As option you may pass a function there:

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

And the task would look like this:

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

gulp.task('task', function() {
  gulp.src('./**/*.js')
    .pipe(gulpIgnore.exclude(condition))
    .pipe(gulp.dest('./dist/'));
});
Lazyexpert
  • 3,106
  • 1
  • 19
  • 33
0

If you want to use @OverZealous' answer (https://stackoverflow.com/a/21806974/1019307) in Typescript, you need to import instead of require:

import * as debug from 'gulp-debug';

...

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

(I also added a title).

Community
  • 1
  • 1
HankCa
  • 9,129
  • 8
  • 62
  • 83
  • why `import` instead of `require` ? – vsync Sep 27 '16 at 14:09
  • Yeah I don't know. That was in my early days of JS development and in reflection i should have put more investigation in to why that worked for me. But it did and thus why I put it up! – HankCa Feb 05 '19 at 05:39
0

I use gulp-flatmap

I even can get every html page browser tab to be auto named after the file name

for more info, you might find this gulp-boilerplate usful

Mohamed Talaat
  • 171
  • 7