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


138

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

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

var gulp = require('gulp');

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

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


問題を解決した場合は、以下に回答を投稿してください。ソリューションで質問を編集するだけではいけません
Andrew Marshall

2
@AndrewMarshall ...あなたが削除した編集への私のコメントとして、あなたが削除したと説明しています、私は正しい答えを見つけたと主張したくはありませんが、それに値する答えにクレジットを与えたいです。そのため、小さな変更を回答として投稿しませんでした。あなたが私の編集を削除することはユーザーにとってより良い(または単にこのサイトのルールに準拠している)と思うなら、私はそれで大丈夫です。他の人は、編集履歴をクリックして、以前の内容を確認してください。
dkastl 2015年

回答:


174

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

  • 名前だけを確認したい場合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を使用できます。これにより、独自の関数を提供し、パイプ内のファイルを確認できます。


7
ありがとうございました!「ログ」プラグインは、コンソールログにのみ書き込むため、探していたものとは異なります。しかしgulp-tap、各ファイルのパスを取得できるため、別のHTMLファイルのリストを更新するために使用できます。
dkastl 2014

すべてのsrcファイルを配列に格納する場合はどうなりますか?debugは多くのオプションを提供しません。
Abhinav Singi 2015

22

このプラグインが私が期待していたことをしていることがわかりました: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は私が探しいたものに感謝しました。
sghosh968 16

10

ここに別の簡単な方法があります。

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

5
ご存知のように、ほとんどの人は
コーヒースクリプトを

私にes.mapはエラーがスローされます:SyntaxError: Unexpected token .
vsync

1
このソリューションの+1(プラグインなし)。しかし、バグがあり、代わりにreturn cb(); それがあるはずですcb(null, file);。そうでない場合、ファイルはフィルターで除外され、パイプチェーンをさらに下に移動しません。詳細情報es.map()のドキュメントをチェック
Dimitry K

5

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 

3

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

0

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)。


なぜimport代わりにrequire
vsync '27

ええ、わかりません。それは私のJS開発の初期の頃のことでした。反省して、なぜそれが私にとってうまくいったのかについてさらに調査する必要がありました。しかし、それはそうしたので、なぜ私はそれを立てたのですか!
HankCa
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.