サイト速度を改善する(その2)

前回、サイト速度を改善する(その1)でgzipに圧縮することによるサイト速度の向上について紹介しました。今回は、そのgzip圧縮の作業を効率よく行う方法を紹介します。
Node.jsとgulpを使って圧縮の自動化を行います。ローカルのMac環境を例に圧縮の自動化を説明します。

Node.jsをインストールする

Node.jsの本家サイトからINSTALLをクリックすると環境に応じたファイルがダウンロードされますので、このファイルをインストールします。

gulpをインストール

ターミナルを立ち上げて次のコマンドを実行します。

$ npm install -g gulp

スーパーユーザーでインストールする場合

$ sudo npm install -g gulp

gulpファイルのjsファイルを設置したい場所を用意し、ターミナル上でその場所へ移動したのち次のコマンドを実行します。

$ npm install --save-dev gulp gulp-util

引き続きターミナルで使うモジュールを追加インストールします。watchはファイルの編集をチェックするのに使うモジュールです。gzipは名前の通り、gzipファイルを作成するのに使います。

$ npm install gulp-watch
$ npm install gulp-gzip

gulpfile.jsを作成

gulpの実行環境にgulpfile.jsを作成します。

var gulp = require("gulp");
var gutil = require("gulp-util");
var gzip = require("gulp-gzip");

var target_js = "/Applications/AMPPS/www/h767676764/html/**/*.js";
var target_css = "/Applications/AMPPS/www/h767676764/html/**/*.css";
var output_js = "/Applications/AMPPS/www/h767676764/html/";
var output_css = "/Applications/AMPPS/www/h767676764/html/";

gulp.task("default", function(){
	console.log("Run gulp.");
	gulp.run("watch");
});

gulp.task("compress", function(){
	gulp.src(target_js)
		.pipe(gzip())
		.pipe(gulp.dest(output_js));
	gulp.src(target_css)
		.pipe(gzip())
		.pipe(gulp.dest(output_css));
});

gulp.task("watch", function() {
	gulp.watch(target_js, function(event) {
		if( event.type == "add" || event.type == "changed" ){
			filegzip(event.path);
		}
	});
	gulp.watch(target_css, function(event) {
		if( event.type == "add" || event.type == "changed" ){
			filegzip(event.path);
		}
	});
});

function filegzip(strfile){
	var filename = strfile.split("/");
	filename = filename[filename.length - 1];
	gulp.src(strfile)
		.pipe(gzip())
		.pipe(gulp.dest(strfile.replace(filename, "")));
	console.log("gzip "+strfile);
	return true;
}

冒頭の、target_js、target_css、output_js、output_cssは環境にあわせて変更してください。この例では「/Applications/AMPPS/www/h767676764/html/」内の全てのJSとCSSファイルを対象にしています。

下記のコマンドを実行しますと、gulp.task("compress", function(){の部分が実行され、「/Applications/AMPPS/www/h767676764/html/」内の全てのJSとCSSファイルがgzip圧縮されます
※必ずバックアップを取り、自己責任で行ってください。

$ gulp compress

ファイル単体の変更により、自動的にgzip圧縮を実行する場合は、ターミナルで次のコマンドを実行します。
待機状態になりますので、中断しターミナルの入力待ち状態へ復帰するにはControl+X、Control+Cです。

$ gulp

$ gulp watch でもいいですが、上記のコードはdefaultの場合にwatchを実行するように設定してありますので、gulpコマンドだけでチェック状態になります。

これで、サイト内のJS、CSSファイルをgzip圧縮し、作業した場合も自動的にgzip圧縮も更新されるようになりました。人によってはFTPアップロードするところまで自動化される方もいるかもしれませんが、今回の紹介はここまでにとどめておきます。

同じタグ付けがされている記事