CODEWITHSUNDEEP
gulp
dkastl
dkastl

Reputation: 1598

Get the current file name in gulp.src()

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.

Upvotes: 146

Views: 114237

Answers (7)

Mohamed Talaat
Mohamed Talaat

Reputation: 196

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

Upvotes: 0

Nick
Nick

Reputation: 1274

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

Upvotes: 14

HankCa
HankCa

Reputation: 9629

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).

Upvotes: 0

Lazyexpert
Lazyexpert

Reputation: 3154

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

Upvotes: 4

serge
serge

Reputation: 15229

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

Upvotes: 6

Vikram
Vikram

Reputation: 4190

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

Upvotes: 26

OverZealous
OverZealous

Reputation: 39570

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.

Upvotes: 183

Related Questions