🥤 gulp 사용하기 (3) Image Optimization

gulp-image

 

공식 문서를 보면 이미지 압축에 대한 옵션이 많은 것을 볼 수 있다. 원하는 대로 설정하자.

const gulp = require('gulp');
const image = require('gulp-image');

gulp.task('image', () => {
  gulp.src('./fixtures/*')
    .pipe(image({
      pngquant: true,
      optipng: false,
      zopflipng: true,
      jpegRecompress: false,
      mozjpeg: true,
      gifsicle: true,
      svgo: true,
      concurrent: 10,
      quiet: true // defaults to false
    }))
    .pipe(gulp.dest('./dest'));
});

 

주의할 점이, 이미지 압축은 파일이 클 수록 시간이 오래 걸린다는 것이다. 

watch를 통해 실시간 빌드를 할 때 이미지 최적화를 watch 리스트에 끼워 넣는다면, 무언가 벡터 이미지를 추가할 때마다 이미지 압축을 시도할 것이다.

 

배포 전 필요할 때 한번만 압축을 하게 만드는 것이 현명할 듯하다.

 

import gulp from "gulp";
import gulppug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver";
import gulpimage from "gulp-image";

const routes = {
  pug: {
    watch: "src/**/*.pug",
    src: "src/*.pug",
    dest: "build",
  },
  img: {
    src: "src/img/*",
    dest: "build/img",
  },
};

//task
const clean = () => del(["build"]);

const pug = () =>
  gulp.src(routes.pug.src).pipe(gulppug()).pipe(gulp.dest(routes.pug.dest));

const image = () =>
  gulp.src(routes.img.src).pipe(gulpimage()).pipe(gulp.dest(routes.img.dest));

const webserver = () =>
  gulp.src("build").pipe(
    ws({
      port: 5000,
      livereload: true,
      open: true,
    })
  );

const watch = () => {
  gulp.watch(routes.pug.watch, pug);
};

// build delete for preventing conflict
const prepare = gulp.series([clean, image]);

// pug transcompile
const assets = gulp.series([pug]);

// execute webserver deamon
const postDev = gulp.parallel([webserver, watch]);

// package.json에서 script로 사용하기 위해 export
export const dev = gulp.series([prepare, assets, postDev]);

 

이미지 압축 결과는 다음과 같이 나온다.

 

✔ search.svg -> before=1.67 KB after=1.36 KB reduced=312 B(18.3%)