Gulp.js get filename from .src()

Question

I'm trying to use gulp-proceesshtml (https://github.com/julien/gulp-processhtml) to remove some unwanted code in my build version, the problem is that the task requires a filename to be given.

gulp.src('test.html').pipe(processhtml('test.html'));

But I can't figure out how this would work when I'm processing all HTML files in a folder

gulp.src('*.html).pipe(processhtml('filename here'));

Answer 1

Personally, it sounds like that's the wrong plugin for what you are trying to accomplish. See below.

However, because it's not clear what you are using it for, you can be able to use node-glob to process each file one-by-one:

var glob = require('glob')
    // you also need event-stream for merging the streams
    es = require('event-stream');

gulp.task('myTask', function() {
    var files = glob.sync('*.html'),
        streams;
    streams = files.map(function(file) {
                // add the *base* option if your files are stored in
                // multiple subdirectories
        return gulp.src(file, {base: 'relative/base/path'})
                // may need require('path').filename(file)
                .pipe(processhtml(file));
    });

    return es.merge.apply(es, streams);
});

This will create a single asynchronous stream out of every file that matches your initial pattern.

---

For simply removing some text from your files, you can use gulp-replace, like so:

var replace = require('gulp-replace');

gulp.src('*.html')
   // replaces all text between
   // <!-- remove-this --> and <!-- /remove-this -->
   .pipe(replace(/<!--\s*remove-this\s*-->[\s\S]*?<!--\s*\/remove-this\s*-->/g, ''));

Answer 2

I know this question is old, but for a shorter solution you can use gulp-tap, something like this:

.pipe(tap(function(file, t) {
    console.log(file.path);
 }))

if you need to use the filename in other step of the pipe you can store it in a variable and use it for next step.