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

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를 컴파일하도록 되어있습니다.

“이미지 스프라이트 자동화하기”에 대한 5개의 생각

  1. 지금도 운영하고 계신지는 모르겠지만 정말 고급정보 감사드립니다… 영알못이라 npm 가도.. 이게 뭔소리인가….;; 구글링을 아무리 해도 스프라이트에 대한 한글로 설명된 곳은 찾기가 힘들더라고요.

    하시는 모든일 잘되길 바랍니다!

    진짜루 감사합니다!.

    1. 도움이 되서 저도 기쁘네요.
      물론 여기는 지금도 운영중입니다 ^^;

  2. 질문이있습니다..

    npm install –save-dev gulp-sass-glob
    npm install –save-dev del

    둘 다 4048 에러가 나오는데…

    혹시 다른 방식으로 설치를 해야 하는건가요..

    실습해보고 있는데 잘 모르겠네요 ㅠ

      1. 권한이 문제였떤건지… 관리자권한으로 cmd 실행해서 하니 어찌저찌 설치는 했는데 굉장히 헷갈리네요 ㅠㅡㅠ 예제삼아 열심히 공부해보겠습니다.

        감사합니다!

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.