matey-imagemin v1.1.0

이미지 용량 줄이기

언제 사용하는 걸까요?

• 포토샵에서 이미지를 웹용으로 저장 하지 않아서 용량이 크게 저장됐을 때
• 포토샵에서 웹용으로 저장했지만 그래도 용량을 더 줄이고 싶을 때
• 운영단에서 넘겨준 이미지의 용량이 너무 클 때(에디터로 저장한 이미지 등)

이런 이벤트는 바쁜 프로젝트 와중에 뜬금없이 발생합니다.  

한두 개일 때는 문제가 되지않지만, 10개~100개일 때가 문제입니다.  

100개의 이미지를 단순 작업으로 줄여야 한다고 생각하면...;;  

시간 낭비 + 정신건강 = 돈낭비 불만이 up uP UP~  

홈페이지 오픈 직전 images폴더를 imagemin 한후 배포 하는 것도 하나의 방법이 되겠습니다.  

시작해볼까요?  

기본 준비

1. node.js 설치 https://nodejs.org/en/download/
   Windows Installer (.msi) 를 설치하는게 좋겠습니다.
2. gulp 설치
   node.js 설치와 동시에 npm(node package modules)이 설치되기 때문에 npm을 이용해서 설치 합니다.

npm install -g gulp

global로 설치해야 커맨드 창에서 gulp문법을 사용할 수 있습니다.

matey-imagemin 설치

설치하려는 폴더에서

npm install matey-imagemin

matey-imagemin은 node-modules/matey-imagemin/ 경로에 설치됩니다.

의존 모듈 설치

matey-imagemin을 만들때 사용된 모듈을 설치해야 합니다.
node-modules/matey-imagemin/ 경로에서

npm install

package.json의 내용을 참조하여 node_modules/ 폴더에 설치됩니다.

이미지 준비

src/ 폴더에 이미지 넣기
matey-imagemin은 src/ 폴더에서 dist/ 폴더로 이미지를 뱉어 냅니다.
dist폴더는 자동으로 생성되지만 변환전 이미지는 src/ 폴더안에 넣어둬야 합니다.

실행

설명글 보기

gulp

변환시작

gulp imagemin

dist/ 폴더가 생성되고 저용량으로 변환된 이미지가 저장됩니다.

여기까지 따라 하시느라 고생하셨습니다.
"지금의 고생이 프로젝트 진행중에 겪어야 할지도 모르는 고생의 정도를 줄여줄 것입니다."
- midking -