Gulp는 자바스크립트 기반의 빌드 도구로, 웹 개발 프로세스를 자동화하기 위해 사용됩니다. 이번 예제에서는 Gulp를 사용하여 SCSS 파일을 CSS로 컴파일하는 간단한 웹 개발 프로세스를 구축해보겠습니다.

개발 환경 설정

먼저, Gulp를 사용하기 위해 개발 환경을 설정해야 합니다. 아래의 명령을 터미널에서 실행하여 개발 의존성 모듈을 설치합니다:

npm init -y
npm install gulp gulp-sass --save-dev

Gulp 작업 설정

이제 Gulp 작업을 설정해보겠습니다. 프로젝트 디렉토리에 gulpfile.js라는 이름의 파일을 생성하고, 아래의 코드 예제를 추가합니다:

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

gulp.task('sass', function() {
  return gulp.src('src/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

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

위의 코드에서는 gulp-sass 패키지를 사용하여 SCSS 파일을 CSS로 변환하는 sass 작업을 정의하였습니다. gulp.src를 사용하여 SCSS 파일들을 선택하고, .pipe(sass())를 사용하여 SCSS를 CSS로 컴파일합니다. 컴파일된 CSS 파일은 gulp.dest를 사용하여 dist/css 디렉토리에 저장됩니다.

Gulp 실행

이제 Gulp를 실행해보겠습니다. 터미널에서 아래의 명령을 실행합니다:

gulp

위의 명령을 실행하면 gulpfile.js에 정의된 default 작업이 실행되고, SCSS 파일이 CSS로 변환됩니다. 변환된 CSS 파일은 dist/css 디렉토리에 저장됩니다.

결론

이 예제에서는 Gulp를 사용하여 SCSS 파일을 CSS로 변환하는 간단한 웹 개발 프로세스를 구축하는 방법을 살펴보았습니다. Gulp는 더 복잡한 작업들을 자동화하는데 사용할 수 있으며, 웹 개발에서 생산성을 향상시킬 수 있는 강력한 도구입니다.

#webdevelopment #gulp