Gulp.js는 JavaScript 기반의 태스크 러너로, 웹 프로젝트의 자동화를 도와주는 도구입니다. 이 예제에서는 Gulp.js를 사용하여 Sass 파일을 컴파일하고, CSS 파일을 압축하는 작업을 자동화하는 방법을 알려드리겠습니다.

1. Gulp 설치하기

Gulp를 사용하기 위해서는 먼저 Node.js와 npm이 설치되어 있어야 합니다. 설치되어 있다면, 아래 명령어를 사용하여 Gulp를 전역으로 설치합니다.

npm install -g gulp

2. 프로젝트 설정하기

프로젝트 폴더에 package.json 파일을 생성한 후, 아래 명령어를 사용하여 Gulp를 프로젝트 종속 모듈로 설치합니다.

npm install gulp --save-dev

3. Gulp로 Sass 컴파일하기

프로젝트 폴더에 gulpfile.js라는 파일을 생성한 후, 아래 코드를 추가합니다.

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

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

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

위 코드는 src/styles 폴더 내의 모든 .scss 파일을 컴파일하여 dist/css 폴더로 출력하는 작업을 정의합니다.

4. Gulp로 CSS 압축하기

Gulp로 CSS를 압축하기 위해 gulp-clean-css 패키지를 설치합니다.

npm install gulp-clean-css --save-dev

그리고 gulpfile.js에 아래 코드를 추가합니다.

const cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', function () {
  return gulp.src('dist/css/*.css')
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass', 'minify-css'));

위 코드는 dist/css 폴더 내의 모든 CSS 파일을 압축하여 덮어쓰는 작업을 정의합니다.

5. Gulp 실행하기

터미널에서 아래 명령어를 사용하여 Gulp를 실행합니다.

gulp

이제 Gulp는 src/styles 폴더 내의 .scss 파일이 변경될 때마다 자동으로 컴파일하고, 압축된 CSS 파일을 생성합니다.

Gulp를 사용하면 웹 프로젝트의 번거로운 작업들을 자동화하여 생산성을 향상시킬 수 있습니다.

#Gulp #프로젝트자동화