gulp 用プラグイン gulp-concat でファイルを一つにまとめる方法

phi phi on gulp

gulp-concat でファイルを一つにまとめる方法です.

[Github] - [Download]

1. まとめたいファイルを用意する

今回は scripts フォルダに

a.js

var a = function() {  
    console.log("aだよー");
};

b.js

var b = function() {  
    console.log("bだよー");
};

というファイルをそれぞれ作りました.

ディレクトリの構成はこんな感じ

gulp-test  
├─ gulpfile.js
├─ scripts
│  ├─ a.js
│  └─ b.js
├─ node_modules.js
└─ package.json

2. gulp-concat をインストール

下記コマンドでインストールできます.

$ npm install --save-dev gulp-concat

3. gulpfile.js に concat 用タスクを追加

gulpfile.js に下記のようなタスクを登録します.

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

gulp.task("default", function() {  
  var files = ['./scripts/a.js', './scripts/b.js'];
  gulp.src(files)
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./build'))
    ;
});

タスク内でやっていることは

  • gulp.src に concat したいファイルのリストを渡して実行
  • pipe で concat を実行. 引数には concat 後のファイルを名を指定
  • gulp.dest でファイルを出力

です.

4. タスクを実行

default タスクにしてあるので

$ gulp

と打つだけでタスクが実行されます.

a.js と b.js がつながった all.js というファイル

var a = function() {  
    console.log("aだよー");
};

var b = function() {  
    console.log("bだよー");
};

が build フォルダに 出力されているのがわかるかと思います.