はじめに
今回はgulp-uglifyを使ってJavaScriptファイルを圧縮する方法について説明します。
JavaScriptファイルが重たいと読み込みに時間が掛かってwebページの表示に時間が掛かるなどの問題があります。
ファイルが軽くなるとその分webページの表示速度が速くなり、SEO的にも有利になるため積極的に圧縮するようにしましょう。
その他gulpのおすすめのプラグインはこちら
gulpの使い方まとめについてはこちら。
gulpfile.jsのテンプレート紹介についてはこちら。
それではgulpでJavasCriptを圧縮する方法の説明に移ります。
JavaScriptを圧縮する目的
JavaScriptを圧縮するメリットとして以下3つのメリットがあります。
基本的にはcssファイルを圧縮するメリットと同じですね。
JavaScriptを圧縮する一番の目的は、読み込み時間を圧縮させてwebページの表示速度を向上させることです。
もう一点、ファイルを圧縮させると変数名を分かりにくく変換してくれたり、コメントや改行を削除してくれたりするのでソースコードの難読化にも有効です。
今回は以下2つのプラグインを使ってcssの圧縮をしていきます。
| プラグイン名 | 内容 |
| gulp-uglify | JavaScriptファイルを圧縮する |
| gulp-plumber | watch中にエラーが発生してもwatchが止まらないようにする |
cssファイルを圧縮する方法についてはこちら。
ディレクトリ構成
今回のディレクトリ構成は下記になります。
test
├ node_modules
├ dist
│ └ js
├ src
│ └ js
│ └ index.js
├ gulpfile.js
├ package-lock.json
└ package.jsonindex.js に対して圧縮を行い、圧縮後のファイルをdist/js に出力します。
プラグインをインストールしよう
それではgulpのプラグインをインストールしていきましょう。
npm i -D gulp-uglify
下記コマンドをターミナルで実行してgulp-uglifyをインストールします。
npm i -D gulp-uglifygulp-uglify 公式
npm i -D gulp-plumber
こちらも同様にインストールします。
npm i -D gulp-plumbergulp-plumber 公式
gulpfile.jsを編集しよう
プラグインのインストールが完了したらgulpfile.jsを編集していきましょう。
//----------------------------------------------------------------------
// モード
//----------------------------------------------------------------------
"use strict";
//----------------------------------------------------------------------
// モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch, tree } = require("gulp");
const uglify = require("gulp-uglify");
const plumber = require("gulp-plumber");
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
function js(done) {
src("./src/js/**/*.js")
.pipe(plumber()) // watch中にエラーが発生してもwatchが止まらないようにする
.pipe(uglify()) // コード内の不要な改行やインデントを削除
.pipe(dest("./dist/js/"));
done();
}
//----------------------------------------------------------------------
// タスク定義
//----------------------------------------------------------------------
exports.js = series(js);
/************************************************************************/
/* END OF FILE */
/************************************************************************/コマンドを実行しよう
gulpfile.jsの編集が完了したらコマンドを実行しましょう。
npx gulp js「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。
gulpのインストール先が異なる可能性があります。
以下のようになれば正しくJavaScriptを圧縮できています。
[00:00:00] Starting 'js'...
[00:00:00] Starting 'js'...
[00:00:00] Finished 'js' after 11 ms
[00:00:00] Finished 'js' after 14 msおわりに
以上gulp-uglifyを使ってJavaScriptファイルを圧縮する方法について説明しました。
いかがだったでしょうか。
webページの表示速度にこだわる方はぜひ導入を検討してみてください。
コメント