gulpで何かしらのタスクを実行後などにgulp.dest()
する際、ディレクトリ・ファイル構成をそのまま維持して出力させる指定方法の備忘録です。
サンプルのディレクトリ・ファイル構成と実装したい動きについて
ここで紹介しているものは下記のようなファイル構成のものを使用していると想定します。
また、動きとしてはgulp.dest()
使用時にこの構成のまま/dist
に出力する(/src
が/dist
になる感じ)というものになります。
└─ /src
├─ index.html
├─ /css
│ └─ style.css
├─ /js
│ └─ script.js
└─ /images
├─ img_01.jpg
├─ img_02.jpg
└─ img_03.jpg
/**/*で指定
手っ取り早くディレクトリ・ファイル構成を維持しつつすべてをgulp.dest()
したいときは、下記のようにgulp.src()
での指定時にアスタリスクとスラッシュを組み合わせて/**/*
と指定すれば容易に実装でき、この方法であれば今後ディレクトリやファイルが増えた際も変更する必要がないです。
gulp.task('default', function() {
gulp.src('src/**/*')
.pipe(gulp.dest('dist'));
});
上記をgulpfile.js
に記述し、このサンプルではこのタスクをデフォルトタスクとして設定しているので$ gulp
を実行すれば、/src
と同じディレクトリ・ファイル構成のまま/distに出力されます。
ただし、当たり前ですがこの場合はすべてのディレクトリ・ファイルとなるので、その中に出力したくないものがある場合は別途指定する必要があります。
例えば、個人的にもよく利用する方法だと対象外としたいディレクトリ・ファイル名には_
をつけておき、それを!
と組み合わせて以下のように記述すれば_
が付いたディレクトリ・ファイルは/dist
には出力されなくなります。
gulp.task('default', function() {
gulp.src([
'src/**/*',
'!src/_**/*',
'!src/**/_*'
])
.pipe(gulp.dest('dist'));
});
個別に指定
上で紹介した方法はとりあえず全ディレクトリ・ファイルを対象とし、その後除外したいものを指定するというものでしたが、除外したいものが多すぎるとか必要なディレクトリ・ファイルだけ指定する方が早いという時は下記のような記述で実装できます。
gulp.task('default', function() {
gulp.src('src/**/*.html')
.pipe(gulp.dest('dest'));
gulp.src('src/css/**')
.pipe(gulp.dest('dest/css'));
gulp.src('src/js/**')
.pipe(gulp.dest('dest/js'));
gulp.src('src/images/**')
.pipe(gulp.dest('dest/images'));
});
上記をgulpfile.js
に記述し$ gulp
を実行すれば、ディレクトリ・ファイルを細かく指定していることもあって冒頭で述べたように/src
と同じ構成のまま/dist
に出力することが可能です。
ただ、これだとちょっと長ったらしい感じがするのと特に今回のサンプルの場合だと要は/src
と同じ構成で/dist
に出力をさせることができればいいので、その場合は下記のようにgulp.src()
のオプションにあるbase
を用いた形で記述すればもう少しスッキリした記述で実装できます。
gulp.task('default', function() {
gulp.src([
'src/**/*.html',
'src/css/**',
'src/js/**',
'src/images/**'
], {
base: 'src'
})
.pipe(gulp.dest('dist'));
});
base
は処理対象のベースディレクトリを指定するもので、今回のサンプルの場合ではbase: 'src'
と記述することで/src
の構成のまま/dist
に出力することが可能になります。
ちなみに、gulp.src()
でbase
を指定せずgulp.dest()
をすると構成関係なくすべてgulp.dest()
で指定したディレクトリ直下に出力されるので、gulp.src()
を先ほどのような記述で指定して且つディレクトリ・ファイル構成を維持してgulp.dest()
を行いたいときは、base
を組み合わせて記述しましょう。