サイト速度を改善する（その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アップロードするところまで自動化される方もいるかもしれませんが、今回の紹介はここまでにとどめておきます。
