こちらの記事ではタスクランナーのGulpを使ってファイルをコピーする方法について解説します。
Gulpでファイルコピーのタスクを作ることで、無駄な手作業をせずにファイルをコピーすることができるのでオススメです。
先輩くん下記の記事でGulpのインストール方法について解説しています。
Gulpのインストールをまだしていない人はぜひ参考にしてください！
- 今月出版されたNode.js超入門 第3版の改訂版
- 最新のNode.jsを学ぶことができる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
ディレクトリ構造
今回使用するサンプルコードでは以下のようなディレクトリ構造で正しく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ディレクトリ内にコピーされます。
ワイルドカードを使う方法
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を使ったファイルをコピーする方法について解説しました。重要なポイントを忘れないようおさらいを兼ねて下記にまとめました。
- src(gulp.src)にコピーしたいファイルを指定する
- dest(gulp.dest)にコピー先を指定する
