이미지 스프라이트 자동화하기

gulp로 이미지 스프라이트를 자동화하는 task를 구성해봤습니다.  아래 샘플은 여러 개의 스프라이트를 만들 수 있고 레티나 대응도 가능하기 때문에 프로젝트를 효율적으로 관리할 수 있습니다.

샘플 프로젝트의 디렉토리 구조

default task를 실행하면 src/img-sprites의 각 폴더 단위로 스프라이트를 생성하게 됩니다. 생성된 스프라이트 이미지는 dist/img/sprite에 생성되고, scss파일은 src/vendors으로 저장됩니다. scss파일을 확인하면 각 이미지마다 다양한 변수가 만들어져 있기 때문에 css작성시 참조할 수 있습니다.

@2x 파일명의 이미지를 추가하여 레티나 대응을 위한 한 벌의 이미지 세트를 사용할 수도 있습니다. 레티나 세트의 scss에는 retina-sprite등의 mixin이 추가됩니다. 또는 2x, 3x의 고해상도 이미지만 사용하면서 각종 변수를 참조하여 1/2, 1/3으로 나누는 mixin을 만들어도 됩니다.

그리고 gulp-watch 모듈로 이미지폴더를 감시해서 작업중에 이미지를 추가하거나 삭제하면 스프라이트를 다시 생성한 후 scss를 컴파일하도록 되어있습니다.