Gulp.jsファイルでは、すべてのHTMLファイルをexamples
フォルダーからbuild
フォルダーにストリーミングしています。
Gulpタスクを作成することは難しくありません。
var gulp = require('gulp');
gulp.task('examples', function() {
return gulp.src('./examples/*.html')
.pipe(gulp.dest('./build'));
});
しかし、タスクで見つかった(および処理された)ファイル名を取得する方法がわからないか、適切なプラグインが見つかりません。
ファイル名の使用方法がわかりませんが、次のいずれかが役立ちます。
名前だけを表示したい場合は、 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
のようなものを使用できます。これにより、独自の関数を提供し、パイプ内のファイルを確認できます。
このプラグインは私が期待していたことをしていることがわかりました: 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
別の簡単な方法を次に示します。
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'));
});
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
私の場合、 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/'));
});
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
も追加しました)。