gulp:ディレクトリ・ファイル構成を維持してdestする

gulp:ディレクトリ・ファイル構成を維持してdestする

基本的すぎる内容ですが、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()での指定時にアスタリスクとスラッシュを組み合わせて/**/*と指定すれば容易に実装でき、この方法であれば今後ディレクトリやファイルが増えた際も変更する必要がないです。

gulpfile.js

gulp.task('default', function() {
    gulp.src('src/**/*')
        .pipe(gulp.dest('dist'));
});

上記をgulpfile.jsに記述し、このサンプルではこのタスクをデフォルトタスクとして設定しているので$ gulpを実行すれば、「src」と同じディレクトリ・ファイル構成のまま「dist」に出力されます。
ただし、当たり前ですがこの場合はすべてのディレクトリ・ファイルとなるので、その中に出力したくないものがある場合は別途指定する必要があります。
例えば個人的にもよく利用する方法だと、対象外としたいディレクトリ・ファイル名には_をつけておき、それを!と組み合わせて以下のように記述すれば_が付いたディレクトリ・ファイルは「dist」には出力されなくなります。

gulpfile.js

gulp.task('default', function() {
    gulp.src([
        'src/**/*',
        '!src/_**/*',
        '!src/**/_*'
    ])
    .pipe(gulp.dest('dist'));
});

個別に指定

上で紹介した方法はとりあえず全ディレクトリ・ファイルを対象とし、その後除外したいものを指定するというものでしたが、除外したいものが多すぎるとか必要なディレクトリ・ファイルだけ指定する方が早いという時は以下のような記述で実装できます。

gulpfile.js

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を用いた形で記述すればもう少しスッキリした記述で実装できます。

gulpfile.js

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を組み合わせて記述しましょう。

以上、gulpでディレクトリ・ファイル構成を維持してdestする方法でした。
普段このようなことをしたい時は上のいずれかの方法をよく利用しているのですが、もっとシンプルにとか汎用性高いといった良い指定方法があれば是非教えてください。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。