[걸프(Gulp)] 5. gulp.spritesmith (이미지스프라이트 만들기)

이미지 스프라이트 란 웹 사이트 성능 최적화 방법중 하나로 쓰이는 방법 중 하나 입니다.

이것은 여러장의 이미지를 한장의 png 파일로 만들어서 그 이미지를 사용합니다.

왜 이렇게 하냐면

여러개의 이미지를 웹 사이트에서 보여주려고 하면 이미지의 갯수만큼 서버에 이미지를 요청하는 작업이 반복됩니다.

여러번 이미지를 요청하는건 사이트 로딩을 더디게 만들죠. 또한 이미지 파일이 여러장인 것 보다 한장인게 용량이 더 적게 차지합니다.

어떤 이미지를 이미지 스프라이트 기법을 통해 만드느냐면

대표적으로 메뉴 와 아이콘 등이 있습니다.

이런 스프라이트 이미지를 수작업으로 만들 수 있지만 이미지 사이의 간격 등 이런 귀찮고 번거로운 작업을 일일히 손으로 재가면서 하기엔 시간이 너무 많이 걸리는 작업입니다. 따라서 명령어 한번에 이미지 스프라이트를 만들어 보려 합니다.

1. 이미지 스프라이트를 사용하기 위해 다음의 패키지를 설치합니다.

npm install --save-dev gulp.spritesmith

2. 저는 폴더 구성을 다음과 같이 했습니다.

- gulpSetting 바로 하위에 sp_img 폴더를 만들고 스프라이트 이미지를 만들 이미지들을 넣었습니다.

- src 폴더 하위에 img 폴더를 만들었고 이 폴더는 sp_img 폴더에 들어있던 이미지들이 한장의 이미지로 합쳐져서 저장될 폴더 입니다.

3. gulpfile.js 를 수정합니다.

저는 이전에 만들어 놨던 셋팅들이 있어서 그대로 사용하겠습니다.

추가된 라인은 4, 49~59번 라인 입니다.

4번 라인 spritesmith = require('gulp.spritesmith'); 은 gulp.spritesmith 라는 모듈을 가져옵니다.

49~59 번 라인은 안에 있는 동작을 수행해 주는 코드인데요.

51 번 라인은 변수를 써서 작업을 하였습니다. 이유는 도출될 이미지와, css 파일을 알아보기 쉽게 정리하기 위해서 입니다.

53~55번 라인은 순서대로 합쳐진 이미지의 이름, 이미지 사이의 간격, css 가이드 입니다.

var fileinclude = require('gulp-file-include'),
    sass = require('gulp-sass'),
    connect = require('gulp-connect'),
    spritesmith = require('gulp.spritesmith');
    gulp = require('gulp');
 
// html include
gulp.task('fileinclude', function(){
    gulp.src(['./app/src/index.html'])
    .pipe(fileinclude({
        prefix:'@@',
        basepath:'@file'
    }))
    .pipe(gulp.dest('./'));
});
 
// Sass
gulp.task('sass', function(){
    return gulp.src('./app/scssfile/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./app/src/css'));
});
 
gulp.task('sass:watch', function(){
    gulp.watch('./app/scssfile/*.scss', ['sass']);
});
 
// gulp 서버
gulp.task('connect',function(){
    connect.server({
        root: './app/src',
        livereload: true,
        port: 8001
    })
});
 
gulp.task('html', function(){
    gulp.src('./app/src/*.html')
    .pipe(connect.reload());
});
 
gulp.task('watch', function(){
    gulp.watch(['./app/src/*.html'],['html']) // html reload
    gulp.watch(['./app/src/scssfile/*.scss'],['sass']) // sass 자동 컴파일
});
 
gulp.task('default',['connect', 'watch']);
 
// image sprite
gulp.task('sprite', function(){
    var spriteData = gulp.src('./sp_img/*.png')
    .pipe(spritesmith({
        imgName: 'sp_all.png',
        padding: 4,
        cssName: 'sp_all.css'
    }));
    spriteData.img.pipe(gulp.dest('./app/src/img'));
    spriteData.css.pipe(gulp.dest('./app/src/css'));
});

4. 마지막으로 gulp sprite 를 cmd에 입력해 주면

이미지 스프라이트 가 자동적으로 생성되고

css 가이드가 바로 나옵니다.

gulp image sprite 간단 사용법 : http://coodle.tistory.com/13

image sprite option : https://docs.omniref.com/js/npm/gulp.spritesmith/3.1.0#label-Getting+Started

이미지 스프라이트로 웹 사이트 성능 최적화 : http://nuli.navercorp.com/sharing/blog/post/23818