8. Gulp 플러그인 활용 - 2

플러그인 설정과 활용 예제

Gulp는 강력한 태스크 러너이자 빌드 도구로, 다양한 플러그인을 활용하여 프로젝트의 빌드 및 자동화 작업을 효율적으로 수행할 수 있습니다. 이번 포스팅에서는 Gulp 플러그인을 설정하고 활용하는 예제를 다루겠습니다.

1. Gulp 플러그인 설치

Gulp 플러그인은 npm을 통해 간단하게 설치할 수 있습니다. 예를 들어, 프로젝트에 필요한 기본적인 플러그인인 gulp와 gulp-sass를 설치하는 명령은 다음과 같습니다.

npm install --save-dev gulp gulp-sass

2. Gulpfile.js 작성

Gulp의 태스크는 주로 Gulpfile.js 파일에 작성됩니다. 아래는 간단한 Gulpfile.js 예제입니다.

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

// Sass 컴파일 태스크
gulp.task('sass', function () {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
});

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

위 코드에서는 gulp-sass 플러그인을 사용하여 Sass 파일을 CSS로 컴파일하는 기본적인 태스크를 설정했습니다.

3. 플러그인을 사용한 예제

3.1. Sass 파일 컴파일

프로젝트 구조:

project
│   Gulpfile.js
│
└───src
│   └───scss
│       │   styles.scss
│
└───dist
    └───css
        │   styles.css

 

styles.scss 파일:

// src/scss/styles.scss

$primary-color: #3498db;

body {
  background-color: $primary-color;
}

위와 같이 styles.scss 파일을 작성한 후, Gulp를 실행하면 styles.css 파일이 dist/css 폴더에 생성됩니다.

3.2. 기본 태스크 실행

터미널에서 다음 명령을 실행하여 기본 태스크를 실행할 수 있습니다.

gulp

 

이 명령은 default로 등록된 기본 태스크를 실행하며, 위에서 작성한 sass 태스크가 실행됩니다. 결과물인 styles.css는 dist/css 폴더에 저장됩니다.

 

이렇게 Gulp 플러그인을 활용하여 Sass 파일을 CSS로 컴파일하는 예제를 통해, Gulp가 어떻게 효과적으로 플러그인을 활용하는지 알아보았습니다. 프로젝트의 복잡성에 따라 다양한 플러그인을 조합하여 사용할 수 있으며, 이는 프로젝트의 빌드 및 자동화 작업을 효과적으로 수행할 수 있는 강력한 도구입니다.