Доступ к имени файла в преобразованном потоке потока

Question

У меня настроена следующая задача gulp:

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

Код принимает файлы CSS, минимизирует их, добавляет ревизию (например, main-abcde123.css), заменяет вхождение исходного файла обработанным файлом. Это делается с помощью плагинов gulp-useref/gulp-rev/gulp-rev-replace (plugins является объектом со всеми загруженными плагинами, т.е. plugins.useref - относится к плагину gulp-useref). Этот код работает нормально. Я пытаюсь внести некоторые изменения с результатом файла CSS в том же потоке. Это делается с помощью transformStream() функция, которая выглядит следующим образом:

function transformStream() {

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

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

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

    return through.obj(collect, emit);
}

В данном контексте through является gulp-through2 плагин.

Пожалуйста, посмотрите на следующий код console.log(file);, Я пытаюсь получить имя файла уменьшенного CSS. Код выше отображает следующее:

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

т.е. он содержит не имя файла, а какой-то буфер. Я прочитал through2 документация, но это не разъяснило вещи.

Итак, мой вопрос: как я могу получить доступ к реальному имени файла?

Answer 1

Вы пробовали gulp-имена файлов? Я не уверен, как это будет работать в этом контексте, но он будет хранить новое, версионное имя файла в памяти. Что-то вроде этого:

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

Затем вы можете получить имя файла позже с

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

Answer 2

Вы можете получить свойства из файла, выполнив несколько простых итераций:

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

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

Если вы ищете только имя файла, то file.relative это то, что вам нужно.

• file.history даст вам рабочий каталог + имя файла
• file.cwd для текущего рабочего каталога
• file.base для базового пути
• и т.п.