Gulpで複数のjsファイルの結合を試してみます。
設定方法
Gulpの環境を用意して、gulp-concatをインストールします。
npm install gulp-concat --save-dev
gulpfile.jsファイルに処理を記述します。
gulp-plumberも入っていますが、無くても処理自体には問題ありません。
gulpfile.js
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
concat = require('gulp-concat');
gulp.task('js', function () {
gulp.src('./dev/_js/*.js')
.pipe(plumber())
.pipe(concat('script.js'))
.pipe(gulp.dest('./dev/assets/js/'));
});
/dev/_js/ 以下にjsファイルを用意します。
今回は以下の3ファイルを用意しました。
a.js
console.log('A');
b.js
console.log('B');
c.js
console.log('C');
以下のコマンドを実行します。
gulp js
/dev/assets/js/に3ファイルを結合したscript.jsが生成されました。
script.js
console.log('A');
console.log('B');
console.log('C');
順番を指定する
結合する順番を指定してみます。
gulpfile.jsのsrc()に配列形式でファイル名を指定します。
gulpfile.js
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
concat = require('gulp-concat');
gulp.task('js', function () {
gulp.src([
'./dev/_js/c.js',
'./dev/_js/b.js',
'./dev/_js/a.js'
])
.pipe(plumber())
.pipe(concat('script.js'))
.pipe(gulp.dest('./dev/assets/js/'));
});
結合を実行すると、以下のように指定した順番になりました。
script.js
console.log('C');
console.log('B');
console.log('A');
【参考サイト】
コメントが承認されるまで時間がかかります。