今回は、「gulp」でJSファイルを結合する方法を試したいと思います。


node.js_016_02


作業フォルダでnpmでgulp-concatをローカルインストールします。


npm install --save-dev gulp-concat


node.js_021_01


gulpfile.js


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

gulp.task('js', function() {
gulp.src('./sample/*.js')
.pipe(concat('script.js'))
.pipe(gulp.dest('./sample/'));
console.log('JSを結合しました。');
});

gulp.task('default', ['js'])


作業フォルダでgulpを実行すると下記のようにコマンドプロンプトに表示されます。


gulp


node.js_021_02

処理が完了すると、「script01.js」と「script02.js」を結合した「script.js」が作成されます。

node.js_021_03


script01.js


var sample01;

sample01="サンプル01!!";

alert(sample01)


script02.js


var sample02;

sample02="サンプル02!!";

alert(sample02)


script.js


var sample01;

sample01="サンプル01!!";

alert(sample01);

var sample02;

sample02="サンプル02!!";

alert(sample02)




結合のモジュール読込み:


var concat = require("gulp-concat")


指定したJSファイルを結合:


gulp.src('./sample/*.js')
.pipe(concat('script.js'))
.pipe(gulp.dest('./sample/'))


gulp-concatモジュールを利用することによりJSファイルの結合を手軽に実行することができます。







Q&A