#4. Glup로 퍼블리싱 개발환경 만들기 - Watch와 BrowserSync

일단 지난시간까지 우리는 Gulp를 이용해 HTML파일과 SCSS파일을 배포하는 작업을 진행했었다. 오늘은 이런 HTML 파일과 SCSS파일을 수정하거나 파일이 추가되었을 때 Gulp가 감지한 뒤에 해당 작업을 자동배포하는 것을 작업해보려고 한다. 그냥 콘솔에 "gulp" 라는 네글자만 입력하면 모든 소스를 알아서 배포하겠지만 개발자는 게으름뱅이들이라서 이런 작업조차 자동으로 처리해줘야지 안 그러면 스트레스를 받아 화를 낸다.

개발자는 게으름의 상징같은 존재들이다.

지난 시간 작업했던 gulpfile.js 에 코드를 추가하기 전에 몇가지 패키지를 설치하도록 하자.

 

$ npm install gulp-watch -D
$ npm install browser-sync -D

이렇게 설치하고 난 뒤에 gulpfile.js 파일에 아래의 내용을 추가하자.

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']));
        
        resolve();
    });
});

gulp.task( 'default', gulp.series(['scss:compile', 'html', 'nodemon:start', 'watch']));

gulp의 task로 'watch'를 추가하는데 gulp.watch 메서드를 이용해 감시할 파일의 종류를 지정할 수 있다. 감시하는 해당 파일의 변경이 감지되면 수행할 task를 지정할 수 있다.

이제 gulp를 실행한 후 HTML 파일을 수정해보자.

watch가 실행되는 것을 확인할 수 있다.

 

그리고 HTML 코드를 수정하면 아래와같이 재배포 되는 것을 확인할 수 있다.

 

이렇게 재배포된 코드를 확인 하기 위해서는 브라우저에서 변경된 내용을 보기 위해서는 "새로고침"을 해야하는데 앞서 이야기 했듯 개발자가 만약 게으름에도 신(神)이 있다면 그것의 현신(現神)이라고 이야기 할 정도로 게으르다.

 

게으름은 보람이 있다고 믿는 개발자

그래서 새로고침도 알아서 자동으로 해주기를 바라는 마음에서 작업을 browser sync라는 패키지의 기능을 사용할 거다. 이 패키지는 위에서 미리 설치했으니 바로 gulpfile.js 를 수정해주자.

var gulp = require('gulp');
var scss = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var nodemon = require('gulp-nodemon');
var browserSync = require('browser-sync');

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

gulp.task( 'scss:compile', () => {
    return new Promise( resolve => {
        var options = {
            outputStyle: "nested" // nested, expanded, compact, compressed
            , indentType: "space" // space, tab
            , indentWidth: 4 // 
            , precision: 8
            , sourceComments: true // 코멘트 제거 여부
        };

        gulp.src( PATH.ASSETS.STYLE + '/*.scss' )
            .pipe( sourcemaps.init() )
            .pipe( scss(options) )
            .pipe( sourcemaps.write() )
            .pipe( gulp.dest( DEST_PATH.ASSETS.STYLE) )
            .pipe( browserSync.reload({stream: true}) );
        
        resolve();
    });
});

gulp.task( 'html', () => {
    return new Promise( resolve => {
        gulp.src( PATH.HTML + '/*.html' )
            .pipe( gulp.dest( DEST_PATH.HTML ) )
            .pipe( browserSync.reload({stream: true}) );

        resolve();
    });
});

gulp.task( 'nodemon:start', () => {
    return new Promise( resolve => {
        nodemon({
            script: 'app.js'
            , watch: DEST_PATH.HTML
        });

        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']));
        
        resolve();
    });
});


gulp.task('browserSync', () => {
    return new Promise( resolve => {
        browserSync.init( null, {
            proxy: 'http://localhost:8005'
            , port: 8006
        });

        resolve();
    });
});

gulp.task( 'default', gulp.series(['scss:compile', 'html', 'nodemon:start', 'browserSync', 'watch']));

gulpfile.js 파일의 전문이다. 일단 잘 봐야할 부분은 browserSync라는 task가 하나 추가 되었다. 이 녀석은 localhost의 8005번 포트를 프록시로 삼아 페이지에 뭔가 변경량이 변경한 것 같으면 바로 새로고침을 자동으로 수행한다. 그리고 browserSync와 watch의 task 수행 순서를 잘 봐야한다.

watch는 일단 감시자 역할을 수행하는 task라서 종료되는게 아니라 계속 프로세스를 붙잡고 있게되고 browserSync보다 앞에 있으면 browserSync는 실행할 수가 없어서 새로고침을 수행할 수 없게된다. 그래서 browserSync를 watch보다 앞에 두고 watch가 리소스를 감시하면서 뭔가 코드의 변경이 발생하면 지정된 task를 재배포하게 되고 재배포된 리소스를 감지하여 browserSync가 동작하게 되는 것을 이해하면 되겠다.

이해를 도와주려고 다이어그램을 만들어봤는데 생각보다 복잡한......

그래서 각 Task 파이프에 BrowserSync 내용을 추가한 내용을 위의 코드에서 확인해 볼 수 있다.

위의 코드를 적용한 뒤 gulp를 다시 실행해보면 아래의 화면을 확인할 수 있고 자동으로 Browser도 실행되는 것을 확인할 수 있다.

 

 

 

이제 javascript, 웹폰트, 그리고 이미지 파일들을 적절하게 배포하는 것들이 남았다. 조금만 더 작업하면 이제 퍼블리싱작업도 스마트하게 진행 할 수 있을거다.

 

그러면 오늘은 이만!

 

안녕!