11. 자동화 작업 구성 - 3

Live Reload와 Browser Sync

개발 중인 웹 애플리케이션에서 실시간으로 변경 사항을 확인하고 반영하는 것은 매우 중요합니다. 이를 위해 Live Reload와 Browser Sync와 같은 도구를 사용하여 개발자는 수정한 코드를 브라우저에서 즉시 확인할 수 있습니다.

1. Live Reload란?

Live Reload는 소스 코드를 수정하고 저장했을 때 브라우저를 새로 고침하는 도구입니다. Gulp에서는 gulp-livereload 플러그인을 사용하여 Live Reload를 구현할 수 있습니다.

npm install --save-dev gulp-livereload

2. Browser Sync 도구 사용

Browser Sync는 더 나아가 여러 브라우저 간에 동기화된 테스팅, 외부 기기에서의 라이브 테스팅과 같은 기능을 제공하는 도구입니다. Gulp에서는 browser-sync 플러그인을 사용합니다.

npm install --save-dev browser-sync

3. Live Reload 및 Browser Sync 통합

Gulpfile.js에 아래와 같이 Live Reload 및 Browser Sync를 통합한 예제를 작성할 수 있습니다.

const gulp = require('gulp');
const sass = require('gulp-sass');
const watch = require('gulp-watch');
const livereload = require('gulp-livereload');
const browserSync = require('browser-sync').create();

// Sass 컴파일 태스크
gulp.task('sass', function () {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.stream()); // Browser Sync에 변경사항 전달
});

// Watch 및 자동 빌드 태스크
gulp.task('watch', function () {
  // Live Reload 활성화
  livereload.listen();

  // Sass 파일 변경 감지 및 컴파일 태스크 실행
  watch('./src/scss/**/*.scss', gulp.series('sass'))
    .pipe(livereload()); // 변경 감지 시 Live Reload 실행
});

// Browser Sync 설정
gulp.task('browser-sync', function () {
  browserSync.init({
    server: {
      baseDir: './', // 웹 서버 기준 디렉토리
    },
  });

  // Watch 및 브라우저 동기화
  gulp.watch('./src/scss/**/*.scss', gulp.series('sass')).on('change', browserSync.reload);
  gulp.watch('./*.html').on('change', browserSync.reload);
});

// 기본 태스크 설정 (default)
gulp.task('default', gulp.parallel('watch', 'browser-sync'));

4. 실행 방법

터미널에서 다음 명령을 실행하여 Live Reload 및 Browser Sync를 활성화합니다.

gulp

 

이제 변경 사항을 저장하면 브라우저가 자동으로 새로 고쳐지며, Browser Sync를 사용하면 다양한 디바이스에서 동기화된 테스팅이 가능해집니다. 개발 과정에서 실시간으로 변화를 확인하여 작업하는 데 큰 도움이 됩니다.