访问转换后的gump流中的文件名

Question

我配置了以下gump任务：

  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替换插件来完成的（plugins是一个包含所有加载插件的对象，即plugins.useref-指的是gulp-user插件）此代码运行良好。我正在尝试对同一流中的结果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

您可以通过对文件进行一些简单的迭代来获取文件中的属性：

for (var property in file) {
  console.log(property);
}
/*
  history               
  cwd                   
  base                  
  stat                  
  _contents             
  isBuffer              
  isStream              
  isNull                
  isDirectory           
  clone                 
  pipe                  
  inspect  
*/

如果您只想查找文件名，那么file.rerelative就是您所需要的。

• file.history将为您提供工作目录+文件名
• 当前工作目录的file.cwd
• 基本路径的file.base
• 等等

Answer 2

您尝试过gullow文件名吗？我不确定它在这种情况下会如何工作，但它会将新的、版本化的文件名存储在内存中。类似这样的东西：

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