目的

Gulp4を使ってtest.jsをMinifyしてtest.min.jsを作成します。

環境

Npm 10.2.3
Gulp 4.0.2

1. JSファイルをMinifyするタスクを作成する

フォルダ構成

以下のフォルダ構成で行います。
src/test.jsをMinifyし、dst/test.min.jsを生成します。

Minifyタスク実行前

├ gulpfile.js
├ src/test.js
└ dst/

Minifyタスク実行後

├ gulpfile.js
├ src/test.js
└ dst/test.min.js 　← ここにMinifyしたファイルが生成される

必要なものをインストール

gulp-uglifyは、jsファイルのMinifyを行うため使用します。
gulp-renameは、Minifyしたファイル名を*.jsから*.min.jsに変更するために使用します。

npm install gulp gulp-uglify gulp-rename

gulpfile.jsの作成

gulpfile.js

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

gulp.task('js-minify', () => {
    return gulp.src(['./src/*.js'])
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(gulp.dest('./dst/'));
});

実行

Gulpコマンドを実行するとtest.min.jsを生成することができます。

gulp js-minify

2. 元となるJSと同じフォルダにMinifyしたファイルを生成する方法

元となるJSと同じフォルダにMinifyしたファイルを生成したい場合に、「1. JSファイルをMinifyするタスクを作成する」と同じ方法で行うと、Minifyしたファイルが増殖していきます。

その解決方法を説明したいと思います。

フォルダ構成

今回のフォルダ構成は以下のようになります。

タスク実行前

├ package.json
├ gulpfile.js
└ js
  └ test.js

タスク実行後

├ package.json
├ gulpfile.js
└ js
  ├ test.js
  └ test.min.js 　← ここにMinifyしたファイルが生成される

失敗パターン

「1. JSファイルをMinifyするタスクを作成する」からの変更箇所としては、gulp.src()とgulp.dest()のフォルダ指定を変更しています。

gulpfile.js

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

gulp.task('js-minify', () => {
    return gulp.src(['./js/*.js'])
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(gulp.dest('./js/'));
});

上記のgulpfile.jsでコマンドを実行する度に、ファイルが、みんみんみん...と無限に増えていきます。

解決方法

gulp.srcに、Minifyしたファイルを含めないように!./js/*.min.js'を追加します。
これで、Minifyファイルの増殖が防げます。

gulpfile.js

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

gulp.task('js-minify', () => {
    return gulp.src(['./js/*.js', '!./js/*.min.js'])
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(gulp.dest('./js/'));
});

おわりに

今回は、Gulp4でJSファイルをMinifyする方法を説明しました。

SCSS版の記事もあるので興味があればこちらもどうぞ！！

ここまで読んでいただきありがとうございました。