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

Posted

技术标签:

【中文标题】在 gulp.src() 中获取当前文件名【英文标题】:Get the current file name in gulp.src() 【发布时间】:2014-03-15 10:35:25 【问题描述】:

在我的 gulp.js 文件中,我将所有 html 文件从 examples 文件夹流式传输到 build 文件夹中。

创建 gulp 任务并不难:

var gulp = require('gulp');

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

但我不知道如何检索在任务中找到(和处理)的文件名,或者我找不到合适的插件。

【问题讨论】:

如果你已经解决了你的问题,你应该在下面发布你的答案。您应该简单地使用解决方案编辑您的问题。 @AndrewMarshall ...作为我对您删除的编辑的评论,解释说,我不想声称找到了正确的答案,但想将功劳归功于应得的答案它。这就是为什么我没有发布小的修改作为答案。如果您认为删除我的编辑对用户来说更好(或者只是符合本网站的规则),那么我可以接受。对于其他人,只需单击编辑历史记录即可查看之前的内容。 【参考方案1】:

我不确定你想如何使用文件名,但其中之一应该会有所帮助:

如果您只想查看名称,可以使用gulp-debug 之类的名称,其中列出了乙烯基文件的详细信息。将其插入您想要列表的任何位置,如下所示:

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 之类的东西,它可以让您提供自己的功能并查看管道中的文件。

【讨论】:

谢谢! “日志”插件不是我想要的,因为它只写入控制台日志。但是gulp-tap 允许获取每个文件的路径,因此我可以使用它来更新另一个 HTML 文件中的列表。 如果我想将所有的 src 文件存储在一个数组中怎么办? debug 没有提供很多选项。【参考方案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

【讨论】:

gulp-using 做了我想要的,非常感谢。【参考方案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'));
);

【讨论】:

你知道,大多数人都不知道coffeescript,所以用最基本的方式写答案会更有利于最大数量的读者受益:) 对我来说es.map 抛出错误:SyntaxError: Unexpected token . 这个解决方案+1(没有插件)。但是有一个错误,而不是return cb(); 它应该是cb(null, file);。否则,文件将被过滤掉,并且不会在管道链中更进一步。更多信息check docs for es.map()【参考方案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 

【讨论】:

【参考方案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/'));
);

【讨论】:

【参考方案6】:

如果你想在 Typescript 中使用@OverZealous 的答案(https://***.com/a/21806974/1019307),你需要import 而不是require

import * as debug from 'gulp-debug';

...

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

(我还添加了title)。

【讨论】:

为什么是import 而不是require 是的,我不知道。那是在我早期的 JS 开发中,经过反思,我应该更多地调查为什么这对我有用。但它确实如此,这也是我提出它的原因!

以上是关于在 gulp.src() 中获取当前文件名的主要内容,如果未能解决你的问题,请参考以下文章

使用 gulp.src() 列出数组中的所有文件

#每天五分钟之IT技能包# 前端自动化构建利器 gulp 方法篇

gulp-API介绍

gulp学习

gulp

gulp-uglify 压缩javascript文件