Access file name in the transformed gulp stream

Question

I have the following gulp task configured:

  var assets = plugins.useref.assets({searchPath: './'}),
        css = plugins.filter('**/main.css'),
        html = plugins.filter('**/*.html');
    return gulp
        .src(config.html.srcheader)
        .pipe(plugins.plumber())
        // collect all assets from source file by the means of useref
        .pipe(assets)
        //// minify main.css
        .pipe(css)
        .pipe(plugins.csso())
        .pipe(css.restore())
        //// Take inventory of the file names for future rev numbers
        .pipe(plugins.rev())
        //// Apply the concat and file replacement with useref
        .pipe(gulp.dest(config.rootdir))
        .pipe(assets.restore())
        .pipe(plugins.useref())
        //// Replace the file names in the html with rev numbers
        .pipe(plugins.revReplace())
        .pipe(transformStream())
        //// rename source
        .pipe(html)
        .pipe(plugins.rename(config.html.customer.targetheader))
        .pipe(gulp.dest(config.html.dir));

The code takes css files, minifies them, adds a revision (e.g. main-abcde123.css), replaces the occurrence of the source file with the processed file. This is done by the means of gulp-useref/gulp-rev/gulp-rev-replace plugins (plugins is an object with all loaded plugins i.e. plugins.useref - refers to gulp-useref plugin) This code works fine. I'm trying to make some modifications with the result css file in the same stream. That is done by the means of transformStream() function which looks as follows:

function transformStream() {

    var collect = function(file, enc, cb) {

        console.log(file);
        return cb();
    }

    var emit = function(cb) {
        return cb();
    }

    return through.obj(collect, emit);
}

In this context through is gulp-through2 plugin.

Please take a look at the following code console.log(file);. I'm trying to get the file name of the minified css. The code above displays the following:

<File "assets/main-34d85b66.css" <Buffer 40 63 68 61 72 73 65 74 20 22 55 54 46 2d 38 22 3b 40 66 6f 6e 74 2d 66 61 63 65 7b 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a 22 6d 74 63 22 3b 73 72 63 3a ... >>

i.e. it contains not the file name but some kind of a buffer. I read the through2 documentation but it did not clarified the things.

So, my question is: how I can access the actual file name?

Answer 1

You can grab the properties from file from doing some simple iteration over it:

for (var property in file) {
  console.log(property);
}

/*
  history               
  cwd                   
  base                  
  stat                  
  _contents             
  isBuffer              
  isStream              
  isNull                
  isDirectory           
  clone                 
  pipe                  
  inspect  
*/

If you're looking for file name only, then file.relative is what you need.

• file.history will give you working directory + file name
• file.cwd for current working directory
• file.base for base path
• etc.

Answer 2

Have you tried gulp-filenames? I'm not sure how it would work in this context, but it will store the new, versioned file name in memory. Something like this:

...
return gulp
    .src(config.html.srcheader)
    .pipe(plugins.plumber())
    .pipe(assets)
    .pipe(css)
    .pipe(plugins.csso())
    .pipe(css.restore())
    .pipe(plugins.rev())
    .pipe(gulp.dest(config.rootdir))
    .pipe(assets.restore())
    .pipe(plugins.useref())
    .pipe(plugins.revReplace())
    .pipe(plugins.fileNames('my-css-file'))
 }

Then you can get the filename later with

function transformStream() {
    var fileName = plugins.fileNames.get('my-css-file')
}