はじめに
前回はgulpfile.jsに関数を定義してコマンドで実行するところまで説明しました。
まだの方はこちらを参照してください。
今回はgulpのsrcとdestという機能を使ってファイルのコピーをコマンドで実行するところまで説明していきます。
プラグインはまだ使いませんが、ここからgulpの機能をどんどん使っていくので気になる方は参考にしてください。
その他gulpのおすすめのプラグインはこちら
gulpの使い方まとめについてはこちら。
gulpfile.jsのテンプレート紹介についてはこちら。
それではgulpの使い方に移ります。
事前準備
事前準備としてdistフォルダとsrcフォルダを作成しましょう。
またsrcフォルダの中にindex.htmlを作成します。
test
├ node_modules
├ dist
├ src
│ └ index.html
├ gulpfile.js
├ package-lock.json
└ package.json今回のゴールは以下です。
gulpのコマンドを実行してdistフォルダの中にsrcフォルダのindex.htmlをコピーする
gulpfile.jsを編集する
まずは完成形を記載しておきます。
コメントを多めに記述しているのでコードだけじゃ分からないという方は参考にしてください。
//----------------------------------------------------------------------
// モード
//----------------------------------------------------------------------
// strictモードで実行
"use strict";
//----------------------------------------------------------------------
// モジュール読み込み
//----------------------------------------------------------------------
// gulpのモジュール読み込み方法は2通り (どちらか記述すれば大丈夫)
const gulp = require("gulp");
const { src, dest, series, parallel, watch } = require("gulp");
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
// function 関数名(コールバック関数名) {
// src("処理させたいファイル(またはフォルダ)を指定")
// .pipe(指定ファイルを処理1)
// .pipe(指定ファイルを処理2)
// .pipe(指定ファイルを処理3)
// ・
// ・
// ・
// .pipe(dest("処理後ファイル(またはフォルダ)の出力先を指定"));
//
// コールバック関数名();
// }
function copy(done) {
src("./src/index.html")
.pipe(dest("./dist/"));
done();
}
//----------------------------------------------------------------------
// タスク定義
//----------------------------------------------------------------------
// exports.コマンド名 = 関数名;
exports.copy = copy;
/************************************************************************/
/* END OF FILE */
/************************************************************************/フォルダの構成やgulpの記述についてはこちらを参考にさせていただいています。
非常に分かりやすいです。
それではセクションごとに説明していきます。
モジュール読み込み
//----------------------------------------------------------------------
// モジュール読み込み
//----------------------------------------------------------------------
// gulpのモジュール読み込み方法は2通り (どちらか記述すれば大丈夫)
const gulp = require("gulp");
const { src, dest, series, parallel, watch } = require("gulp");gulpのモジュール読み込みをしています。
コメント中にも記載していますが、読み込みはどちらか1つ記述すれば問題ありません。
読み込みの違いによって下記のように記述の仕方が変わります。
const gulp = require("gulp");
function aaa(done){
gulp.src(...)
.pipe(gulp.dest(...));
done();
}const { src, dest, series, parallel, watch } = require("gulp");
function aaa(done){
src(...) // gulp. を省略できる
.pipe(dest(...)); // gulp. を省略できる
done();
}後者の読み込み方法の方がコードが簡潔で見通しが良くなりますね。
関数定義
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
// function 関数名(コールバック関数名) {
// src("処理させたいファイル(またはフォルダ)を指定")
// .pipe(指定ファイルを処理1)
// .pipe(指定ファイルを処理2)
// .pipe(指定ファイルを処理3)
// ・
// ・
// ・
// .pipe(dest("処理後ファイル(またはフォルダ)の出力先を指定"));
//
// コールバック関数名();
// }
function copy(done) {
src("./src/index.html")
.pipe(dest("./dist/"));
done();
}ファイルをコピーするためのcopy 関数を作成しました。
コピーさせたいファイルやフォルダをsrc()の中に指定しましょう。
出力先をdest()の中に指定しましょう。
タスク定義
//----------------------------------------------------------------------
// タスク定義
//----------------------------------------------------------------------
// exports.コマンド名 = 関数名;
exports.copy = copy;コマンド名を「copy」としました。
コマンドを実行しよう
それではgulpでcopyコマンドを実行しましょう。
npx gulp copy「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。
gulpのインストール先が異なる可能性があります。
以下のようにdistフォルダにindex.htmlが作成されていれば正しく動作しています。
test
├ node_modules
├ dist
│ └ index.html(追加)
├ src
│ └ index.html
├ gulpfile.js
├ package-lock.json
└ package.jsonおわりに
以上gulpのsrcとdestという機能を使ってファイルのコピーをコマンドで実行するところまで説明しました。
いかがだったでしょうか。
今回はプラグインを使っていませんが、プラグインを使ってコピーする前にファイルの圧縮や結合をすることでgulp本来の実力を発揮することができます。
次回gulpのseriesとparallelという機能を使って複数タスク実行する方法について説明していきます。
コメント