[Gulp] 이미지 최적화 ( gulp-image, gulp-imagemin )

먼저 gulp에 대해 잘 모르겠다면 아래 게시물을 먼저 확인 후 참고 부탁드린다.

https://leeda-cloud.tistory.com/64

[Gulp] Gulp 노마드코더 (Babel,Task,Pug,이미지 최적화,SASS,Autoprefixer,Minify,Browserify,GH Pages)

위의 게시물을 보면 기본 세팅에 대해 정리되어 있다.

gulpfile.babel.js를 기준으로 글을 작성하므로 헷갈리면 위의 게시물을  참고하면 좋다.

 

 

이미지 최적화는 PNG, JPEG, GIF 및 SVG 이미지들을 축소해 준다.

 

gulp-image는 노마드 코더에서 배웠던 것이고 , gulp-imagemin은 따로 찾아 사용해 본 것인데  gulp dev 시 둘의 시간 차이가 보였다. 그러므로 둘 중 원하는 걸 골라서 하면 좋을 것 같기에 둘 다 정리해 보기로 했다.

 

 

gulp-image

 

gulp-image 설치 (단 그냥 따라서 설치하면 에러가 발생해서 6.2.1로 버전을 낮춘 후 설치했다.)

npm install --save-dev gulp-image
npm install --save-dev gulp-image@6.2.1 //윗 버전이 에러걸릴 시 이 버전으로 사용

 

아래 환경에 속한다면 해당 환경에 맞는 걸 추가로 설치하자. 

•  brew install libjpeg libpng  macOS에서
•  apt-get install -y libjpeg libpng 우분투에서
•  npm install -g windows-build-tools 윈도우에서

 

gulpfile.babel.js에 추가

import gulp from "gulp";
import image from "gulp-image";

const routes = {
  img: {
    src: "src/img/**/*", // 내가 저장한 이미지 경로 
    dest: "build/img",// 변환시킬 이미지 경로 
  },
};

const img = () =>
  gulp.src(routes.img.src).pipe(image()).pipe(gulp.dest(routes.img.dest));
  //내가 저장한 이미지 경로에서 이미지들을 가져와 gulp-image로 변환 후 dest에 적힌 위치로 저장한다.
  
   
const watch = () => {
      gulp.watch(routes.img.src, img);
};  


const prepare = gulp.series([img]);   
export const dev = gulp.series([prepare])

 

https://www.npmjs.com/package/gulp-image

gulp-image

 

 

 

 

 

 

gulp-imagemin

 

gulp-imagemin 설치 (단 그냥 따라서 설치하면 에러가 발생해서 7.0.1로 버전을 낮춘 후 설치했다.)

npm install --save-dev gulp-imagemin
npm install --save-dev gulp-imagemin@7.0.1 //윗 버전이 에러걸릴 시 이 버전으로 사용

 

gulpfile.babel.js에 추가

import gulp from "gulp";
import imagemin from "gulp-imagemin";

const routes = {
  img: {
    src: "src/img/**/*", // 내가 저장한 이미지 경로 
    dest: "build/img",// 변환시킬 이미지 경로 
  },
};

const img = () =>
  gulp.src(routes.img.src).pipe(imagemin()).pipe(gulp.dest(routes.img.dest));
  //내가 저장한 이미지 경로에서 이미지들을 가져와 gulp-imagemin으로 변환 후 dest에 적힌 위치로 저장한다.
  
   
const watch = () => {
      gulp.watch(routes.img.src, img);
};  


const prepare = gulp.series([img]);   
export const dev = gulp.series([prepare])

 

https://www.npmjs.com/package/gulp-imagemin

gulp-imagemin