gulp로 이미지 압축

소개

「이 기사를 보면 gulp로 화상을 압축하는 순서를 알 수 있다!」라고 하는 기사입니다.

이미지의 압축 툴은 여러가지 있어, 유명한 곳이라면 TinyPNG 를 사용하고 있는 분도 많다고 생각합니다.
그러나, 프로덕션 공개 전의 화상등을 외부 서비스로 압축하는 것은 어떻습니까, 라고 하는 회사도 있다고 생각하므로, 이번은 gulp를 사용해 로컬 환경에서 압축하는 방법을 정리했습니다.

참고가되면 꼭 LGTM을 부탁드립니다! !

사전 준비

gulp의 환경 구축 방법에 대해서는, 이전 gulp 초입문 라고 하는 기사를 집필하고 있으므로, 그쪽을 참고로 해 주세요.
환경 구축은 이쪽의 기사를 바탕으로 되어 있는 것으로 진행해 갑니다.

gulp 초입문

디렉토리 구성은 다음과 같습니다. src 부하가 개발 환경에서 dist 부하로 압축된 이미지가 토출됩니다.

디렉토리 구조

プロジェクト名
 ├ dist
 │  └ image
 ├ node_modules
 ├ src 
 │  └ image
 ├ package.json
 └ gulpfile.js

사용할 플러그인입니다.


플러그인
버전


Node.js
12.14.1

npm
6.13.4

npm
6.13.4

gulp
4.0.2

gulp-imagemin
7.1.0

imagemin-gifsicle
7.0.0

imagemin-mozjpeg
9.0.0

imagemin-pngquant
9.0.1

imagemin-svgo
8.0.0

플러그인 설치

터미널

$ npm install --save-dev gulp-imagemin imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo

설치가 완료되면 package.json에 플러그인이 추가됩니다.

gulpfile.js에 설명

gulpfile.js

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const imageminGif = require('imagemin-gifsicle');
const imageminSvg = require('imagemin-svgo');

var paths = {
    srcDir: './src',
    dstDir: './dist'
}

// 画像を格納しているフォルダのパス
var srcGlob = paths.srcDir + '/image';
var dstGlob = paths.dstDir + '/image';

// jpg,png,gif,svg画像の圧縮タスク
function imageMin() {
    return (
        // 参照するフォルダのパスを記述する
        gulp.src(srcGlob + '/**/*.+(jpg|jpeg|png|gif|svg)')
            .pipe(imagemin([
                // pngの圧縮
                pngquant({
                    quality: [0.6, 0.8]
                }),
                // jpgの圧縮
                mozjpeg({
                    quality: 85,
                    progressive: true
                }),
                // gifの圧縮
                imageminGif({
                    interlaced: false,
                    optimizationLevel: 3,
                    colors: 180
                }),
                // SVGの圧縮
                imageminSvg()
            ]
            ))
            // 圧縮したファイルの吐き出し先のパス
            .pipe(gulp.dest(dstGlob))
    );
}

// imageフォルダ配下に変更があれば自動でコンパイルしてくれる
function watchFile(done) {
    gulp.watch(srcGlob + '/**/*.+(jpg|jpeg|png|gif|svg)', imageMin);
    done();
}

// タスクの実行
exports.default = gulp.series(imageMin, watchFile);

작업 실행

마지막으로 명령을 두드리면 실행됩니다.

터미널

$ npx gulp

watch 에서 감시 상태가 되어 있으므로 image 폴더 아래에 이미지가 추가되면 자동으로 압축해 줍니다.

마지막으로

끝까지 봐 주셔서 감사합니다.
안건 등에 따라 디렉토리 구성 등 어레인지하여 사용해 주시면 감사하겠습니다.

「참고가 되었어!」라고 하는 분은, 꼭 LGTM을 부탁합니다! !