在gulp.src()中获取当前文件名

Question

在我的gulp.js文件中，我正在将examples文件夹中的所有HTML文件流式传输到build文件夹中。

创建gulp任务并不困难：

var gulp = require('gulp');

gulp.task('examples', function() {
    return gulp.src('./examples/*.html')
        .pipe(gulp.dest('./build'));
});

但我无法弄清楚如何检索任务中找到（并处理）的文件名，或者我找不到合适的插件。

- dkastl

---

如果您已经解决了问题，应该在下面发布您的答案。您不应该仅仅通过编辑问题来提供解决方案。 - Andrew Marshall

@AndrewMarshall ...作为我对你删除的编辑的评论所解释的，我不想声称已经找到了正确的答案，但是想要将荣誉归功于值得的答案。这就是为什么我没有将小修改发布为答案。如果您认为删除我的编辑对用户更好（或只是符合该网站的规则），那么我可以接受。对于其他任何人，只需单击编辑历史记录即可查看之前的内容。 - dkastl

Answer 1

我不确定你想如何使用文件名，但以下其中一个应该会有所帮助：

• 如果你只是想查看文件名，可以使用类似gulp-debug的工具，它会列出vinyl文件的详细信息。在需要列出列表的任何位置插入此工具即可：

  var gulp = require('gulp'),
      debug = require('gulp-debug');
  
  gulp.task('examples', function() {
      return gulp.src('./examples/*.html')
          .pipe(debug())
          .pipe(gulp.dest('./build'));
  });
  

• 另一个选项是gulp-filelog，我没有使用过，但听起来类似（可能更简洁）。

• 另一个选项是gulp-filesize，它输出文件和文件大小。

• 如果您想要更多控制权，可以使用gulp-tap之类的工具，它可以让您提供自己的函数并查看管道中的文件。

- OverZealous

---

谢谢！“log”插件不符合我要找的东西，因为它只会写入控制台日志。但是 gulp-tap 插件允许获取每个文件的路径，所以我可以用它来更新另一个 HTML 文件中的列表。 - dkastl

如果我想将所有的源文件存储在一个数组中怎么办？ 调试没有太多选项。 - Abhinav Singi

Answer 2

我发现这个插件做到了我所期望的： gulp-using

简单使用示例：搜索项目中所有扩展名为.jsx的文件

gulp.task('reactify', function(){
        gulp.src(['../**/*.jsx']) 
            .pipe(using({}));
        ....
    });

输出：

[gulp] Using gulpfile /app/build/gulpfile.js
[gulp] Starting 'reactify'...
[gulp] Finished 'reactify' after 2.92 ms
[gulp] Using file /app/staging/web/content/view/logon.jsx
[gulp] Using file /app/staging/web/content/view/components/rauth.jsx

- Vikram

---

gulp-using 做了我想要的，非常感谢。 - sghosh968

Answer 3

这里是另一种简单的方法。

var es, log, logFile;

es = require('event-stream');

log = require('gulp-util').log;

logFile = function(es) {
  return es.map(function(file, cb) {
    log(file.path);
    return cb(null, file);
  });
};

gulp.task("do", function() {
 return gulp.src('./examples/*.html')
   .pipe(logFile(es))
   .pipe(gulp.dest('./build'));
});

- Nick

---

你知道，大多数人不了解Coffeescript，因此最好以最基本的方式回答问题，让尽可能多的读者受益 :) - vsync

对我来说，es.map 抛出了一个错误：SyntaxError: Unexpected token . - vsync

这个解决方案很好（无需插件），但有一个错误，应该将 return cb(); 改为 cb(null, file);。否则文件将被过滤掉，无法继续传递到下一个管道。更多信息请查看 es.map() 的文档。 - Dimitry K

Answer 4

你可以使用 gulp-filenames 模块获取路径数组。你还可以按命名空间分组：

var filenames = require("gulp-filenames");

gulp.src("./src/*.coffee")
    .pipe(filenames("coffeescript"))
    .pipe(gulp.dest("./dist"));

gulp.src("./src/*.js")
  .pipe(filenames("javascript"))
  .pipe(gulp.dest("./dist"));

filenames.get("coffeescript") // ["a.coffee","b.coffee"]  
                              // Do Something With it 

- serge

Answer 5

对于我的情况，gulp-ignore非常完美。 作为选项，你可以在那里传递一个函数:

function condition(file) {
 // do whatever with file.path
 // return boolean true if needed to exclude file 
}

任务看起来会像这样：

var gulpIgnore = require('gulp-ignore');

gulp.task('task', function() {
  gulp.src('./**/*.js')
    .pipe(gulpIgnore.exclude(condition))
    .pipe(gulp.dest('./dist/'));
});

- Lazyexpert

Answer 6

如果您想在TypeScript中使用@OverZealous的答案(https://dev59.com/e2Eh5IYBdhLWcg3w_Xr5#21806974)，您需要使用import而不是require:

import * as debug from 'gulp-debug';

...

    return gulp.src('./examples/*.html')
        .pipe(debug({title: 'example src:'}))
        .pipe(gulp.dest('./build'));

我还添加了一个title。

- HankCa

---

为什么要使用 import 而不是 require？ - vsync

是的，我不知道。那是我 JS 开发早期的经历，回想起来，我应该更深入地研究为什么它对我有效。但它确实有效，这就是我发布它的原因！ - HankCa

Answer 7

我使用 gulp-flatmap

我甚至可以让每个 HTML 页面浏览器选项卡根据文件名自动命名

更多信息，请查看这个 gulp-boilerplate 会很有用

- Mohamed Talaat