サイト制作に関するメモ書き

HOME > その他 > GulpでJavaScriptのファイルを結合する

GulpでJavaScriptのファイルを結合する

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');

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP