gulpやgrunt等のタスクランナーは
今やWeb開発にとって 切っても切れない重要なツールの1つとなりました。
babel, type-script, coffee-scriptのコンパイル、cssやjavascriptの圧縮。
上記のassetファイル以外にも
jpegやpng,SVGファイルのロスレス圧縮もよく耳にするようになりましたね。
特にSVGはファイルサイズがとても小さいので重宝しています。
( * 画像と言っても、実態はxmlファイルです )
その上、画像編集ソフトを使って編集する時も
レイヤー毎にパーツがちゃんと分けられている状態なので凄く使いやすいです。
今回は そのSVGに集点を置いてgulpでSVGファイルの圧縮を出来るプラグイン
「gulp-svgmin」の紹介をしていきます。
gulp-svgminのインストールはコマンドライン上で行うか
package.jsonに記載する方法の2種類です。
( node.jsとgulpの導入は事前に済ませておいてください )
# コマンドラインで行う場合
npm install gulp-svgmin --save-dev
# package.jsonのdevDependencies内に追加
# 下記の情報を追加した後、コマンドライン上で npm install が必要
"gulp-svgmin": "^1.2.1"
以上でgulp-svgminのインストールは完了です。
svgminはgulpのプラグインなので、"gulpfile.js"内で作業を行っていきます。
今回はどれぐらいsvgファイルを小さく出来たか検証する為に
人気のjsフレームワーク「Ember.js」のマスコットキャラクター tomster君を使いました。
圧縮前のSVGファイルは56KB。
カラー然り、色々なパーツが組み合わさっているせいかSVGにしては大きめです。
圧縮させるために"gulpfile.js"は下記のようにしました。
/* gulpfile.js */
var gulp = require('gulp');
// svgminのインポート
var svgmin = require('gulp-svgmin');
/*
* node.js: v5.5.0
* gulp: v3.9.1
*/
gulp.task('svg', () => {
return
// 読み込むsvgファイル
gulp.src("resources/svg/tomster.svg")
// svgを圧縮
.pipe(svgmin())
// 圧縮したsvgを static/imgフォルダに展開
.pipe(gulp.dest("static/img/"));
});
コマンドライン上でgulpを動かせばsvgファイルの圧縮の完了&指定フォルダに展開されます！
$ gulp svg # わかりやすくする為 "svg"というコマンド名にしました
[22:49:18] Using gulpfile ~/YourProjectFolder/gulpfile.js
[22:49:18] Starting 'default'...
[22:49:19] Finished 'default' after 323 m
ジャン!!
56KB -> 41KB 約23%ファイルサイズが小さくなりました！
Webサイト等で実際に使う場合は "gulp-imagemin"等を使って
imgフォルダ全体のロスレス圧縮を行う場合が多いと思われますが、
今回はsvgの圧縮にフォーカスを当てたので"gulp-svgmin"を使いました。
"gulp-svgmin" はWeb開発だけでなく、
SVGファイルで画像を扱っているデザイナーさんにも使えると思うので
"ファイルサイズを小さくしたい ..."とお考えのかたはゼヒ×2チェックしてください！
何よりSVG形式の画像は
中身はXMLなので、画像の劣化の心配がないのがいいですね。
GitHub: ben-eb/gulp-svgmin
