#7. Glup로 퍼블리싱 개발환경 만들기 - 최종장

Gulp 시리즈마지막 이야기를 진행하려고 한다.

일단 이미지부터 보자.

 

이미지가 좀 복잡한데 천천히 설명해보겠다. 우리가 프로젝트를 진행하는 상황에서 images 디렉토리에 download.gif 파일이 필요없음을 깨달았다고 생각하자. 하지만 과거에 이미 한번 배포를 진행한 상황이었고, 필요없는 파일을 뒤늦게 삭제한뒤 재배포를 진행하면 어떻게 될 것인가.

 

그 결과가 위의 이미지이다. output 디렉토리를 초기화하고 진행하지 않아서 과거의 잔재(?)들이 남아있는채로 배포가 완료되어버렸다. 그래서 우리는 지금 해야할 일은 output 디렉토리를 초기화하는 과정이 필요하다.

 

패키지 하나를 설치하자.

$ npm install del -D

del 이라는 패키지인데 이건 파일을 삭제할 때 사용하는 패키지다.  어떻게 쓰는 거냐면 아래와 같이 gulpfile.js를 수정해보면 생각보다 간단하다는 것을 알 수 있다.

//
//  생략...
//
var del = require('del');

//
//  생략...
//
gulp.task('clean', () => {
    return new Promise( resolve => {
        del.sync(DEST_PATH.HTML);
        
        resolve();
    });
});

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

이렇게 dest 디렉토리를 del.sync 함수로 날려버리고 차근차근 배포를 진행하면 되겠다.

 

그래서 gulp를 실행하면 아래와 같이 주르륵 실행한다.

그리고 맨 처음 clean이 실행되는 것을 확인할 수 있고 dist 디렉토리가 지워졌다가 다시 생기는 것을 확인 할 수 있을거다. 이로써 필요없는 파일이 모두 정리되고 소스파일과 배포파일의 버전을 맞춰주는 작업까지 마무리 되었다.

 

사실 gulp에는 더 많은 기능들이 숨어있는데 예를 들어서 scss 파일을 미리 캐싱하고 있다가 뭔가 수정사항이 발생하면 파일을 교체하는 것이 아닌 수정된 부분만 맞춰준다던지 html 코드를 압축해준다던지 여러가지 기능을 가진 플러그인들이 있는데 나는 어디까지나 위의 과정이면 충분한 것 같아서 여기까지만 작업을 정리하려고 한다.

 

각자 gulp 플러그인에 대해서 알아보고 자신에게 맞게 셋팅하길 바라면서 나는 오늘 여기서 안녕

드디어 Gulp 시리즈 완료!