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

您可以从文件中获取属性，对其进行一些简单的迭代：

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 for current working directory
file.base for base path
等

Answer 2

你试过gulp-filenames吗？我不确定它在这种情况下是如何工作的，但它会将新的版本化文件名存储在内存中。像这样：

// Certain files aren't compressed by GAE even if requested so 'canary' 
// needs to be of a type and size to trigger compression
$.get('canary').done(function(data, textStatus, jqXHR){
  // request succeeded
  var contentEncoding = jqXHR.getResponseHeader('Content-Encoding');
  if(contentEncoding != null) {
    if(!['gzip','deflate','sdch','br'].every(function(v,i,a){
      return contentEncoding.indexOf(v) < 0;
    })) {
      // accepted compression found, initiate remainder of page load
      return;
    }
  }
  // no acceptable compression, kill page
}).fail(function( jqXHR, textStatus, errorThrown ) {
  // request failed, kill page
});

然后您可以稍后使用

获取文件名

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

在转换后的gulp流中访问文件名

2 个答案: