Gulpで複数のファイルを結合する方法 (gulp-concat)

投稿者 : OSCA

関東地方の美しい夜景を観にいこう。 夜景サイト「夜景散歩」で夜景スポットを検索

概要

 JavaScript や CSS をコーディングする際に、管理を便利にするために役割ごとにファイルを複数に分割して、実際に動作させる際には1つのファイルに結合して動かしたい場合があります。 本稿では Gulp で複数のファイルを結合する方法について解説します。 なお、Gulp で複数のファイルを結合するには gulp-concat モジュールが便利です。 本稿では gulp-concat を用いた方法を紹介します。

本稿のゴール

 本稿では、3つのファイル( src/file1.txt, src/file2.txt, src/file3.txt )を、1つのファイル( dest/file.txt )として結合して出力することをゴールとして解説します。

プロジェクト
 ├ gulpfile.js
 ├ /src
 │ ├ file1.txt
 │ ├ file2.txt
 │ └ file3.txt
 │
 └ /dest
   └ file.txt ← これを出力する

インストール

 まずはプロジェクトに gulpgulp-concat をインストールします。 それぞれのモジュールを次のように npm install コマンドでインストールします。

$ npm install -D gulp
$ npm install -D gulp-concat

利用方法

 それではファイルを結合するタスクを書いてみましょう。 gulpfile.js は次の通りです。

var gulp = require("gulp");
var concat = require('gulp-concat');

gulp.task("default", function() {
  return gulp.src(['src/file1.txt', 'src/file2.txt', 'src/file3.txt'])
    .pipe(concat('file.js'))
    .pipe(gulp.dest('dest/'));
});

 2行目で gulp-concat モジュールを読み込み concat として宣言しています。 タスクの記述では、src() で結合するファイルを指定し、concat() で結合後のファイル名を指定し、dest() で出力先を指定しています。

結合する順番を決定するには?

 ファイルの結合順番が重要な場合もあるでしょう。 ファイルの結合順序は src() で指定した順番で結合されます。 src/* などのようにワイルドカードで順番を指定するのではなく、一つずつ丁寧にファイル名を指定すると良いでしょう。

おわりに

 本稿では Gulp で複数のファイルを結合する方法として gulp-concat モジュールを利用する方法を紹介しました。 皆さんのWEB制作を楽にする手助けになれば幸いです。

Gulp入門に戻る

著者 : OSCA

OSCA

Java, PHP 系のWEBエンジニア。 WEBエンジニア向けコミュニティ「WEBエンジニア勉強会」を主催。
個人として何か一つでも世の中の多くの人に使ってもらえるものを作ろうと日々奮闘中。
@engineer_osca