前回は Gulp を使って Scss のコンパイルを自動化しましたが、今回はさらに処理を追加して画像ファイルの圧縮と SVG スプライトの生成も Gulp で自動化したので、その方法を書き残しておきます。
＊SVGスプライトとは
複数のSVGファイルを1つのファイルにまとめ、id を使って必要なデータのみを呼び出して表示させる手法です。アイコンやロゴなどのデータをまとめておくことで、管理がしやすくなったり実装がラクになるといったメリットがあります。＊参考
＊環境
- macOS
- Node 11.14.0
- gulp 4.0.2
- gulp-sass 4.0.2
- merge-stream 2.0.0
- gulp-svgmin 2.2.0
- gulp-svgstore 7.0.1
- gulp-rename 2.0.0
＊インストール
前回の続きから始めます。Node.js や Gulp のインストールは下記記事を参照してください。
下記コマンドを実行して、必要なプラグインをインストールします。
// 1つのタスクで複数の処理を実行
$ npm install merge-stream --save-dev
// SVGを圧縮
$ npm install gulp-svgmin --save-dev
// 複数SVGファイルを1つにまとめる
$ npm install gulp-svgstore --save-dev
// ファイル名を変更
$ npm install gulp-rename --save-dev
＊Gulpファイルの編集
対象/出力ディレクトリに SVGファイルの格納先をそれぞれ指定します。task()のなかでsvgmin()でファイルを圧縮し、svgstore({ inlineSvg: true })でSVGを1つにまとめ、rename()でファイル名を指定しています。前回行った、SCSS をコンパイルする処理と今回追加した処理を1つのコマンドで行いたかったので、merge()を使って処理をまとめています。<gulpfile.js>
const gulp = require('gulp')
const sass = require('gulp-sass')
// ----- ↓追加 -----
const merge = require('merge-stream')
const svgmin = require('gulp-svgmin')
const svgstore = require('gulp-svgstore')
const rename = require('gulp-rename')
const devDir = 'dev/'
const dev = {
'scss': devDir + 'assets/scss/**.scss',
// ----- ↓追加 -----
'svg': devDir + 'assets/svg/*.svg'
}
const destDir = 'dest/'
const dest = {
'css': destDir + 'assets/css',
// ----- ↓追加 -----
'svg': destDir + 'assets/svg'
}
gulp.task('sass', () => {
const sc = gulp.src(dev.scss)
.pipe(sass())
.pipe(gulp.dest(dest.css))
// ----- ↓追加 -----
const svg = gulp.src(dev.svg)
.pipe(svgmin())
.pipe(svgstore({ inlineSvg: true }))
.pipe(rename('sprite.min.svg'))
.pipe(gulp.dest(dest.svg))
return merge(sc, svg)
})
下記コマンドを実行すると
dest/assets/svgディレクト配下にsprite.min.svgというファイルが作成されます。$ gulp sass
<実行後のディレクトリ構成>
├── dest
| └── assets
| ├── css
| │ └── main.css
| └── svg
| └── sprite.min.svg
├── dev
| └── assets
| ├── scss
| │ └── main.scss
| └── svg
| ├── balloon.svg
| └── car.svg
├── gulpfile.js
├── index.html
├── node_modules
├── package-lock.json
└── package.json
＊SVGスプライトの使い方
実際に HTML ファイルから SVG スプライトを使ってみます。プロジェクトディレクトリの直下にindex.htmlを作成します。<svg>要素のなかで<use>要素を使い、SVG スプライトのファイルを指定して#のあとに id を指定することで SVG データを呼び出すことができます。<index.html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<svg class="car">
<use xlink:href="dest/assets/svg/sprite.min.svg#car"></use>
</svg>
</body>
</html>
<ブラウザでの表示>
＊所感
gulp-svg-spriteというプラグインもあるのですが、私の環境では SVG スプライトが出力されなかったのでsvg-storeを使いました。Gulpで処理を自動化しておくことで、画像の圧縮を忘れていたといったミス防止や作業の効率化をすることができました。これからも Gulp をうまく活用して効率的な開発をしていきたいと思います。Sign up here with your email
ConversionConversion EmoticonEmoticon