#6. Glup로 퍼블리싱 개발환경 만들기 - Assets관리(하)

우리는 Gulp를 이용해 HTML, SCSS, Javascript까지 관리하고 관찰하고 자동으로 재배포하고 브라우저에 반영하는 것까지 자동화처리를 완료했다. 이제 남은 것은 자바스크립트 라이브러리, 이미지, 폰트를 배포하는 것까지 적용하면 될 것 같다. 일단 Vue.js와 jQuery를 라이브러리로 저장하고 이 것들을 dist 디렉토리에 복붙하는 task를 추가하자

 

jQuery와 vue는 알아서 다운로드 받자. 홈페이지 찾아가면 다운로드 받을 수 있도록 잘 해놨음.

 

암튼 이렇게 한 뒤에 gulpfile.js 파일에 아래의 내용을 추가하자.

 

gulpfile.js

//
//  생략...
//
// 소스 파일 경로
var PATH = {
    HTML: './workspace/html'
    , ASSETS:  {
        FONTS:      './workspace/assets/fonts'
        , IMAGES:   './workspace/assets/images'
        , STYLE:    './workspace/assets/style'
        , SCRIPT:   './workspace/assets/script'
        , LIB:      './workspace/assets/lib'
    }
},
// 산출물 경로
DEST_PATH = {
    HTML: './dist'
    , ASSETS: {
        FONTS:      './dist/assets/fonts'
        , IMAGES:   './dist/assets/images'
        , STYLE:    './dist/assets/style'
        , SCRIPT:   './dist/assets/script'
        , LIB:      './dist/assets/lib'
    }
};

//
//  생략...
//
gulp.task( 'library', () => {
    return new Promise( resolve => {
        gulp.src( PATH.ASSETS.LIB + '/*.js')
            .pipe( gulp.dest( DEST_PATH.ASSETS.LIB ));
        
        resolve();
    });
});

//
//  생략...
//

var allSeries = gulp.series([
    'scss:compile'
    , 'html'
    , 'script:build'
    , 'library'
    , 'nodemon:start'
    , 'browserSync'
    , 'watch']);

gulp.task( 'default', allSeries);

코드 모양새가 좀 바뀐 부분들을 일단 경로 지정하는 부분에 LIB 항목을 추가했다. 라이브러리 폴더 위치는 추가해줘야하니까. 그리고 "library" 테스크를 추가했는데 사실 라이브러리 파일이 추가되는 경우도 드믈고 수정이 있는 부분도 아니어서 watch나 browsersync를 적용할 필요가 없다고 판단했다.

 

마지막으로 업무 항목들이 넘나 많아져서 알아보기도 힘들고 이해하기도 힘들어보여서 allSeries라는 변수에 업무 목록을 빼서 이용하는 방식으로 변경하였다. 위의 코드를 작성하고 gulp로 실행하면 정상적으로 잘 동작하는 것을 확인할 수 있다.

자, 라이브러리 파일들도 잘 배포되었고 폰트 파일도 위와 같은 방법으로 배포해보도록 하자.

사실 폰트 파일이 확장자가 많다뿐이지 별로 다를게 없다. watch나 browsersync도 적용해줄 필요없고 그냥 작업폴더에서 배포폴더로 복사한다고 생각하면 간편하다.

 

폰트는 나눔고딕으로 하겠다.

이렇게 폰트를 assets/fonts 디렉토리에 넣어주고 gulpfile.js 파일에 아래와 같이 코드를 추가하자.

gulpfile.js

//
//  생략
//
gulp.task( 'fonts', () => {
    return new Promise( resolve => {
        gulp.src( PATH.ASSETS.FONTS + '/*.*')
            .pipe( gulp.dest( DEST_PATH.ASSETS.FONTS ));
        
        resolve();
    });
});

//
//  생략
//
var allSeries = gulp.series([
    'scss:compile'
    , 'html'
    , 'script:build'
    , 'fonts'
    , 'library'
    , 'nodemon:start'
    , 'browserSync'
    , 'watch']);

이렇게 코드를 추가해주면 폰트도 폰트 디렉토리에 적절하게 배치되어 적용되는 것을 볼 수 있다.

 

자, 여기까지 했으면 이제 이미지를 최적화하여 배포해줄 때가 온 것 같다.

이미지를 최적화 하는 이유는 JPG 파일 같은경우 Progressive 모드를 활성화하여 이미지 로딩시 사용자에게 보다 나은 경험을 제공한다거나 이미지의 용량을 줄인다거나 하는 최적화를 진행하여 사이트를 불러오는 속도를 개선하기 위함이다.

 

이게 의외로 효과가 좋으니 적절하게 적용하면 참 괜찮다. 추천할만하다.

 

패키지를 하나 설치하자.

$ npm install gulp-imagemin -D

그리고 gulpfile.js 파일을 아래처럼 수정하자

//
//  생략...
//
var imagemin = require('gulp-imagemin');

//
//  생략...
//
gulp.task( 'imagemin', () => {
    return new Promise( resolve => {
        gulp.src( PATH.ASSETS.IMAGES + '/*.*' )
            .pipe( imagemin([
                imagemin.gifsicle({interlaced: false}),
                imagemin.jpegtran({progressive: true}),
                imagemin.optipng({optimizationLevel: 5}),
                imagemin.svgo({
                    plugins: [
                        {removeViewBox: true},
                        {cleanupIDs: false}
                    ]
                })
            ]))
            .pipe( gulp.dest( DEST_PATH.ASSETS.IMAGES ) )
            .pipe( browserSync.reload({stream: true}) );
        resolve();
    });
});

//
//  생략...
//
gulp.task('watch', () => {
    return new Promise( resolve => {
        gulp.watch(PATH.HTML + "/**/*.html", gulp.series(['html']));
        gulp.watch(PATH.ASSETS.STYLE + "/**/*.scss", gulp.series(['scss:compile']));
        gulp.watch(PATH.ASSETS.SCRIPT + "/**/*.js", gulp.series(['script:build']));
        gulp.watch(PATH.ASSETS.IMAGES + "/**/*.*", gulp.series(['imagemin']));

        resolve();
    });
});

//
//  생략...
//
var allSeries = gulp.series([
    'scss:compile'
    , 'html'
    , 'script:build'
    , 'imagemin'
    , 'fonts'
    , 'library'
    , 'nodemon:start'
    , 'browserSync'
    , 'watch']);

일단 gif이미지에 interlaced 옵션을 true로 해보니까 용량을 줄여주는 것 같지 않아서 false로 설정을 했고 watch에 이미지 task를 추가하여 자동으로 배포할 수 있도록 작업을 했댜. 이렇게 작업을 진행한 뒤에 gulp를 실행시키면 아래와 같이 이미지가 배포되면서 최적화를 진행해 용량이 줄어드는것을 확인 할 수 있다.

 

눈꼽만큼이지만 용량이 줄어드는 것을 확인할 수 있다. 이런 최적화가 쌓이고 쌓이다 보면 분명이 성능에 영향을 끼치기 마련이다.

 

그리하여 이렇게 이미지, 라이브러리, 폰트와 같은 에셋파일들도 배포하는 것을 알아보았다.

이제 gulp의 최종장 "쓸모 없는 파일 제거하기"를 남겨두었다.

 

필요할 줄 알고 만들었던 파일이 나중에 쓸모가 없어지거나 하는 경우 배포과정에서 제거되지 않고 남아있는 경우 수동으로 지우는 일은 없어야 하지 않겠는가. 왜냐하면 개발자는 게으르니까.

 

그러면 다음시간에 알아보도록하자.

왜냐하면 난 게으르니까......