Gulpでファイルコピーをする方法

こちらの記事ではタスクランナーのGulpを使ってファイルをコピーする方法について解説します。

Gulpでファイルコピーのタスクを作ることで、無駄な手作業をせずにファイルをコピーすることができるのでオススメです。

先輩くん

下記の記事でGulpのインストール方法について解説しています。
Gulpのインストールをまだしていない人はぜひ参考にしてください！

あわせて読みたい

Gulpのインストール方法について解説 こちらの記事では、Gulpのインストール方法について分かりやすく解説しています。 実際にGulpの処理を記述して、処理を実行させるサンプル付きなのでGulpを使ったことが…

Node.jsの学習におすすめ書籍

Node.js超入門［第4版］

総合評価

( 5 )

メリット

• 今月出版されたNode.js超入門 第3版の改訂版
• 最新のNode.jsを学ぶことができる

Node.js超入門［第4版］ [ 掌田津耶乃 ]

楽天ブックス

¥3,300 （2025/07/08 06:14時点 | 楽天市場調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

• 美しいコードが書けるが自然と書けるようになる
• 他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

ディレクトリ構造

今回使用するサンプルコードでは以下のようなディレクトリ構造で正しくGulpが実行できます。

sample
  |- assets
  |     |- index.html
  |     |- test.html
  |     |- style.css
  |     |- js
  |        |- index.js
  |- dist
  |- gulpfile.js

今回のサンプルコードでは、コピーしたファイルはdistディレクトリ内に格納されます。

プロジェクトによってディレクトリ名や構造が違うと思いますので、各々でカスタマイズしてください。

一つのファイルをコピーする方法

1つのファイルをコピーする場合は、srcで指定するファイル名を記述します。

const {src, dest} = require('gulp');

function copyFiles(){
    return src('./assets/index.html')
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

上記のサンプルコードでは、assetsディレクトリ内のindex.htmlファイルがdistディレクトリ内にコピーされます。

複数のファイルをコピーする方法

複数のファイルをコピーする方法は複数あるため、見出しを分けて解説します。

配列を使う方法

1つ目の方法は、配列を使った方法になります。

srcで指定するファイルを配列指定することで、複数のファイルをコピーすることができます。

const {src, dest} = require('gulp');

function copyFiles(){
    return src(['./assets/index.html', './assets/test.html'])
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

上記のサンプルコードでは、assetsディレクトリ内のindex.htmlファイルとtest.htmlがdistディレクトリ内にコピーされます。

配列を使った方法では、コピーしたいファイルが追加されたらgulpfile.jsを書き換える必要があったり、コピーしたファイルが膨大な量になるとコードの可読性が低くなるデメリットがあります。

ワイルドカードを使う方法

2つ目の方法は、ワイルドカードを使った方法になります。
ワイルドカードを使うことで、配列を使った方法で取り上げたデメリットを無くすことができます。

const {src, dest} = require('gulp');

function copyFiles(){
    return src('./assets/*')
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

上記のサンプルコードでは、assetsディレクトリ内の全てのファイルがdistディレクトリ内にコピーされます。

特定のファイルのみコピーする方法

3つ目の方法は、ワイルドカードとファイルの拡張子を指定する方法です。

この方法を使うことで、指定したディレクトリ内にある特定のファイルのみコピーすることができます。

const {src, dest} = require('gulp');

function copyFiles(){
    return src('./assets/*.html')
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

上記のサンプルコードでは、assetsディレクトリ内にあるファイル拡張子が.htmlのみdistディレクトリ内にコピーされます。

ディレクトリ構造を維持したままコピーする方法

ディレクトリ構造を維持したままコピーする場合は、srcで指定するファイル箇所に**を記述します。

const {src, dest} = require('gulp');

function copyFiles(){
    return src('./assets/**')
        .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

上記のサンプルコードでは、assetsディレクトリ内にある全てのファイルとディレクトリをdistディレクトリ内にコピーします。

まとめ

今回はGulpを使ったファイルをコピーする方法について解説しました。重要なポイントを忘れないようおさらいを兼ねて下記にまとめました。