Gulpを利用してJavaScriptとCSSを圧縮する

サイト速度を最適化するために、GulpでJSとCSSの圧縮を試してみました。

Gulpが導入されいることを前提に今回の記事を書いているので、まだ導入していない方は、以下の記事を参考に導入までを行ってください。

takedajs.hatenablog.jp

今回、JSとCSSの圧縮には、以下のプラグインを利用しました。
JS : gulp-uglify
CSS: gulp-clean-css

CSS圧縮にgulp-minify-cssを利用している記事が多くあったのですが、 gulp-minify-cssは非推奨になっており、gulp-clean-cssが推奨されてるみたいです。 https://www.npmjs.com/package/gulp-minify-css

圧縮プラグイン導入

・JSを圧縮するプラグインを導入

npm install gulp-uglify --save-dev

・CSSを圧縮するプラグインを導入

npm install gulp-clean-css --save-dev

・２つのプラグインが導入されたか確認

npm ls --depth=0

圧縮タスクを作成

gulpfile.jsに以下のコードを記述します。

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');

//JS圧縮
gulp.task('minify-js', function() {
    return gulp.src("js/*.js")
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
        //.pipe(gulp.dest('js')); 上書きする場合
});

//CSS圧縮
gulp.task('minify-css', function() {
    return gulp.src("css/*.css")
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css/'));
        //.pipe(gulp.dest('css')); 上書きする場合
});

JSとCSSともそれぞれのディレクトリ配下に置いたファイルを圧縮し、dist/~に圧縮したファイルを保存しています。

タスク実行と結果

JSとCSSそれぞれの圧縮前後でのコードを比較してみます。

JSの圧縮

・ターミナルで以下のタスクを実行

gulp minify-js

・圧縮前のコード(46バイト)

function test() {
    alert('テスト');
}

・圧縮後のコード(35バイト)

function test(){alert("テスト")}

CSSの圧縮

・ターミナルで以下のタスクを実行

gulp minify-css

・圧縮前のコード(47バイト)

a {
    margin: 10px;
    text-align: center;
}

・圧縮後のコード(32バイト)

a{margin:10px;text-align:center}

まとめ

Gulpを利用して簡単にJSとCSSの圧縮をすることができました。
圧縮されたあとのコードは、ファイルサイズが小さくなっているので、ページ速度に少なからず良い影響がでますね。