1.1.0 • Published 10 years ago

matey-imagemin v1.1.0

Weekly downloads
-
License
ISC
Repository
-
Last release
10 years ago

이미지 용량 줄이기

언제 사용하는 걸까요?

  • 포토샵에서 이미지를 웹용으로 저장 하지 않아서 용량이 크게 저장됐을 때
  • 포토샵에서 웹용으로 저장했지만 그래도 용량을 더 줄이고 싶을 때
  • 운영단에서 넘겨준 이미지의 용량이 너무 클 때(에디터로 저장한 이미지 등)
이런 이벤트는 바쁜 프로젝트 와중에 뜬금없이 발생합니다.  

한두 개일 때는 문제가 되지않지만, 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 -

1.1.0

10 years ago

1.0.9

10 years ago

1.0.8

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago