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

概要

　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　← これを出力する

インストール

　まずはプロジェクトに gulp と gulp-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() で出力先を指定しています。