예를 들어, SCSS 파일을 컴파일하고 압축된 CSS 파일을 생성하는 작업을 자동화할 수 있습니다. 아래는 gulp를 사용하여 SCSS 파일을 컴파일하는 간단한 예시입니다.

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

gulp.task('sass', () => {
  return gulp.src('src/scss/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('watch', () => {
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

gulp.task('default', gulp.series('sass', 'watch'));

위의 코드에서 gulp.task 함수를 사용하여 작업을 정의합니다. sass 작업은 src/scss/main.scss 파일을 선택하고, Sass 컴파일러를 사용하여 CSS로 변환한 후 dist/css 폴더에 저장합니다. watch 작업은 SCSS 파일의 변경을 감지하고, 변경이 있을 경우 sass 작업을 실행합니다. 마지막으로 default 작업은 sass 작업과 watch 작업을 연달아 실행합니다.

이제 터미널에서 gulp 명령어를 실행하면 gulp가 작업을 수행하고 SCSS 파일의 변경을 감지하여 자동으로 컴파일합니다. 이렇게 하면 개발 중에 반복적인 작업을 자동화하여 생산성을 높일 수 있습니다.

#gulp #웹개발