web-dev-qa-db-ja.com

gulp.src()で現在のファイル名を取得します

Gulp.jsファイルでは、すべてのHTMLファイルをexamplesフォルダーからbuildフォルダーにストリーミングしています。

Gulpタスクを作成することは難しくありません。

var gulp = require('gulp');

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

しかし、タスクで見つかった(および処理された)ファイル名を取得する方法がわからないか、適切なプラグインが見つかりません。

130
dkastl

ファイル名の使用方法がわかりませんが、次のいずれかが役立ちます。

  • 名前だけを表示したい場合は、 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'));
    });
    
  • もう1つのオプションは gulp-filelog です。これは使用していませんが、似ているように聞こえます(少しわかりやすいかもしれません)。

  • 別のオプションは gulp-filesize で、ファイルとそのサイズの両方を出力します。

  • さらに制御したい場合は、 gulp-tap のようなものを使用できます。これにより、独自の関数を提供し、パイプ内のファイルを確認できます。

164
OverZealous

このプラグインは私が期待していたことをしていることがわかりました: 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
21
Vikram

別の簡単な方法を次に示します。

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

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

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 
6
Serge

私の場合、 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/'));
});
3
Lazyexpert

TypeScriptで@OverZealousの回答( https://stackoverflow.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も追加しました)。

0
HankCa