10. 자동화 작업 구성 - 2

자동 빌드 (Auto Build)

자동 빌드는 소스 코드가 변경될 때마다 자동으로 빌드 작업을 실행하여 개발자가 수동으로 빌드 명령을 입력하지 않아도 되는 편리한 기능입니다. Gulp를 사용하여 프로젝트에 자동 빌드를 설정하는 방법에 대해 알아보겠습니다.

1. Gulp Watch와 함께 사용

자동 빌드를 설정하려면 먼저 gulp-watch와 같은 감시(Watch) 도구를 사용하여 파일 변경을 감지해야 합니다. Watch는 파일이 변경될 때 특정 작업을 실행하는 Gulp 플러그인 중 하나입니다.

npm install --save-dev gulp-watch

2. Watch와 빌드 작업 통합

이제 Watch와 함께 자동 빌드를 설정해봅시다. 아래는 예시로 Sass 파일을 컴파일하는 작업을 자동으로 수행하는 Gulpfile.js의 예제 코드입니다.

const gulp = require('gulp');
const sass = require('gulp-sass');
const watch = require('gulp-watch');

// Sass 컴파일 태스크
gulp.task('sass', function () {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
});

// Watch 및 자동 빌드 태스크
gulp.task('watch', function () {
  // Sass 파일 변경 감지 및 컴파일 태스크 실행
  watch('./src/scss/**/*.scss', gulp.series('sass'));
});

// 자동 빌드 실행
gulp.task('auto-build', gulp.series('sass', 'watch'));

// 기본 태스크 설정 (default)
gulp.task('default', gulp.series('auto-build'));

 

위 코드에서 gulp.series를 사용하여 auto-build 태스크를 생성했습니다. 이 태스크를 실행하면 Watch가 시작되고, 파일 변경을 감지할 때마다 sass 태스크가 자동으로 실행됩니다.

3. 자동 빌드 실행

터미널에서 다음 명령을 실행하여 자동 빌드를 시작합니다.

gulp

 

이제 Gulp는 지속적으로 파일 변경을 감지하고 변경이 있을 때마다 자동으로 Sass 파일을 컴파일합니다. 자동 빌드를 통해 개발 작업의 효율성을 높일 수 있습니다.

자동 빌드를 설정하면 개발자는 코드 수정 후 바로 변경된 내용을 확인할 수 있어 생산성이 향상되며, 프로젝트의 빌드 및 배포 작업을 간편하게 관리할 수 있습니다.