Gulp는 웹 개발 작업을 자동화하는 도구입니다. Gulpfile은 Gulp 작업을 정의하는 JavaScript 파일입니다. 이번 포스트에서는 Gulpfile 예제를 소개하고 어떻게 사용하는지 알아보겠습니다.

Gulpfile 준비

우선 Gulp를 사용하려면 Node.js와 Gulp를 전역으로 설치해야 합니다. 이제 프로젝트 폴더에서 npm init 명령어를 실행하여 package.json 파일을 생성합니다. 그런 다음 Gulp를 설치합니다.

$ npm install -g gulp
$ npm install --save-dev gulp

이제 Gulpfile을 생성하고 필요한 플러그인을 설치해보겠습니다.

Gulpfile 생성 및 설정

프로젝트 폴더에 gulpfile.js 파일을 생성하고 다음과 같이 작성합니다.

// Gulp 모듈 가져오기
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');

// Sass를 CSS로 컴파일하는 Gulp 작업
gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

// 파일 변경 감지 및 자동 실행
gulp.task('watch', function() {
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

// 기본 Gulp 작업 설정
gulp.task('default', gulp.series('sass', 'watch'));

이 예제에서는 gulp-sass, gulp-autoprefixer, gulp-clean-css 플러그인을 사용하여 Sass를 CSS로 컴파일하고 자동으로 prefix를 추가하며 CSS 파일을 압축합니다.

Gulp 실행

이제 생성한 Gulpfile을 실행해보겠습니다. 프로젝트 폴더에서 다음 명령어를 실행합니다.

$ gulp

이렇게 하면 Gulp는 sass 작업을 실행하고 파일 변경을 감지하여 자동으로 작업을 실행합니다. 컴파일된 CSS 파일은 dist/css 폴더에 생성됩니다.

이제 Gulpfile 예제를 통해 Gulp의 기본 개념과 사용법을 알아보았습니다. Gulp를 사용하여 웹 개발 작업을 효율적으로 자동화할 수 있습니다.

#Gulp #웹개발 #자동화