【gulp】gulp-uglifyを使ってJavaScriptファイルを簡単に圧縮する方法

JavaScriptファイルを効率的に圧縮して、ウェブサイトのパフォーマンスを向上させたいですか？この記事では、Gulpとgulp-uglifyを使用してJavaScriptファイルを圧縮する方法をステップバイステップで紹介します。

プロジェクトのセットアップ

まずはプロジェクトをセットアップしましょう。以下のコマンドを実行して、プロジェクトフォルダを作成し、npmを使って初期化します。

mkdir my-project
cd my-project
npm init -y

必要なパッケージのインストール

次に、Gulpとgulp-uglifyをインストールします。以下のコマンドを実行してください。

npm install --save-dev gulp gulp-uglify

Gulpfileの作成

プロジェクトのルートディレクトリにgulpfile.jsを作成し、以下の内容を追加します。

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

// JavaScriptの圧縮タスク
gulp.task('compress', function () {
    return gulp.src('src/js/*.js')  // 圧縮するファイルのパス
        .pipe(uglify())             // uglifyで圧縮
        .pipe(rename({ extname: '.min.js' }))  // 圧縮後のファイル名の変更（オプション）
        .pipe(gulp.dest('dist/js')); // 出力先ディレクトリ
});

// デフォルトタスクの設定
gulp.task('default', gulp.series('compress'));

ディレクトリ構造の設定

以下のようなディレクトリ構造を作成します。

my-project/
├── src/
│   └── js/
│       └── app.js  // 圧縮したいJavaScriptファイル
├── dist/
│   └── js/         // 圧縮後のファイルが保存されるディレクトリ
├── gulpfile.js
└── package.json

JavaScriptファイルの追加

src/js/ディレクトリに圧縮したいJavaScriptファイル（例：app.js）を追加します。

// src/js/app.js
console.log('Hello, world!');

Gulpタスクの実行

以下のコマンドを実行して、Gulpタスクを実行します。

gulp

これにより、src/js/ディレクトリ内のJavaScriptファイルが圧縮され、dist/js/ディレクトリに.min.jsファイルとして保存されます。

追加オプションについて

gulp-uglifyには様々なオプションがあります。以下にいくつかの主要なオプションとその使い方を紹介します。

圧縮レベルの設定

uglify()関数には詳細な設定を渡すことができます。例えば、圧縮レベルを設定する場合は以下のようにします。

gulp.task('compress', function () {
    return gulp.src('src/js/*.js')
        .pipe(uglify({ compress: { drop_console: true } }))  // console.logを削除
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest('dist/js'));
});

この例では、drop_console: trueを指定することで、console.log文を削除します。

mangleオプション

mangleオプションを使用して変数名の難読化を制御できます。

gulp.task('compress', function () {
    return gulp.src('src/js/*.js')
        .pipe(uglify({ mangle: { toplevel: true } }))  // グローバル変数名も難読化
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest('dist/js'));
});

出力オプション

出力フォーマットを指定するためのoutputオプションもあります。

gulp.task('compress', function () {
    return gulp.src('src/js/*.js')
        .pipe(uglify({
            output: {
                beautify: false, // 可読性のある形式にしない
                comments: false  // コメントを削除
            }
        }))
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest('dist/js'));
});

まとめ

gulp-uglifyを使用することで、JavaScriptファイルの圧縮を簡単に実行できます。さらに、各種オプションを利用することで、圧縮の詳細な制御が可能です。これで、あなたのウェブサイトのパフォーマンスをさらに向上させる準備が整いました。ぜひ、試してみてください。