9. 자동화 작업 구성 - 1

파일 감시 (Watch)

Gulp를 사용하면 파일의 변경을 감지하고 자동으로 특정 작업을 수행하는 등 다양한 자동화 작업을 구성할 수 있습니다. 이번 포스팅에서는 Gulp의 중요한 기능 중 하나인 "파일 감시 (Watch)"에 대해 알아보겠습니다.

1. Gulp Watch 설치

먼저, Gulp의 Watch 기능을 사용하기 위해 gulp-watch 플러그인을 설치합니다.

npm install --save-dev gulp-watch

2. Watch 태스크 설정

Gulpfile.js 파일을 열고, Watch 태스크를 설정합니다.

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

// 기본 태스크 설정 (default)
gulp.task('default', gulp.series('sass', 'watch'));

 

위 코드에서는 gulp-watch 플러그인을 사용하여 watch 태스크를 설정했습니다. 이 태스크는 Sass 파일의 변경을 감지하면 자동으로 sass 태스크를 실행합니다.

3. Watch 태스크 실행

터미널에서 다음 명령을 실행하여 Watch 태스크를 실행합니다.

gulp

 

이제 Gulp는 지속적으로 파일 변경을 감지하고, 변경이 있을 때마다 지정된 작업을 실행합니다. 이를 통해 파일을 수정할 때마다 수동으로 빌드 명령을 실행하지 않아도 되므로 개발 작업의 효율성이 향상됩니다.

파일 감시를 통한 자동화 작업은 프로젝트의 생산성을 높이고 개발자가 집중해야 하는 핵심 작업에 더 많은 시간을 할애할 수 있도록 도와줍니다.