gulp #006 – gulpでJSファイルを結合

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

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

npm install --save-dev gulp-concat

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

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

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ファイルの結合を手軽に実行することができます。

• 参考文献
  gulp