GULPで複数のJavaScriptファイルをまとめる方法(gulp-concat)

2021年7月27日GULP

GULPで複数のJavaScriptファイルをまとめる方法を紹介します。

GULPで複数のJavaScriptファイルをまとめる手順

gulp-concatを使用します。

• gulp-concatをインストール
• gulpfile.jsに記述

gulp-concatをインストール

npm i gulp-concat --save-dev

gulpfile.jsに記述

const gulp = require("gulp");
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const concat = require('gulp-concat');

// JavaScript
gulp.task('javascript', function() {
  return gulp
    .src('./src/js/**/*.js')
    .pipe(concat('project.js'))//project.jsに他のjsファイルをconcat
    .pipe(uglify()) //minify
    .pipe(rename({
      suffix: ".min",
    }))
    .pipe(gulp.dest('./dist/js'))
})

concat('フォルダ名’)で指定したフォルダ名で出力されます。

JavaScriptファイルの順番を指定したいとき

また、JavaScriptファイルの実行される順番を指定したいときは次のようにsrcを変更します。

// .src('./src/js/**/*.js')
.src(['./src/js/first.js', './src/js/second.js']) //concatの順番を指定したいとき

上のようにすると、first.jsが先に出力されるようにまとめられます。