소개

Gulp.js는 자바스크립트 프로젝트의 워크플로우를 자동화하기 위한 툴이다. Gulp.js를 사용하면 HTML/CSS/JavaScript 파일의 변환, 번들링, 압축 등 다양한 작업들을 자동으로 수행할 수 있다. 이 글에서는 Gulp.js를 사용하여 자동화된 워크플로우를 구성하는 방법에 대해 알아보겠다.

Gulp.js 설치

Gulp.js를 사용하기 위해서는 Node.js와 npm이 설치되어 있어야 한다. 우선 Node.js를 다운로드해서 설치한 뒤, 터미널에서 다음 명령어를 입력하여 Gulp.js를 전역으로 설치한다.

npm install -g gulp

Gulpfile.js 작성

Gulp.js에서는 gulpfile.js라는 파일을 이용하여 워크플로우를 설정한다. 프로젝트 루트 디렉토리에 gulpfile.js를 생성한 뒤, 다음과 같이 작성한다.

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

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

gulp.task('scripts', function() {
  return gulp.src('src/js/*.js')
    .pipe(concat('bundle.js'))
    .pipe(minify())
    .pipe(gulp.dest('dist/js'));
});

gulp.task('default', gulp.parallel('sass', 'scripts'));

위의 예시 코드에서는 gulp-sass, gulp-concat, gulp-minify 등의 플러그인을 사용하여 SCSS 파일을 CSS로 변환하고, JavaScript 파일을 번들링하고 압축하는 작업을 수행한다. gulp.task 메소드를 사용하여 각 작업을 정의하고, gulp.parallel 메소드를 사용하여 작업들을 병렬로 실행하도록 설정하였다.

Gulp 실행

터미널에서 프로젝트 루트 디렉토리로 이동한 뒤, 다음 명령어를 입력하여 Gulp를 실행한다.

gulp

위 명령어는 default라는 이름의 Gulp 작업을 실행한다. 해당 작업은 sass와 scripts 작업이 병렬로 실행되도록 설정되어 있다. Gulp는 파일의 변경사항을 감지하고 해당 작업을 자동으로 실행해준다.

마무리

Gulp.js를 사용하면 자바스크립트 프로젝트의 개발 과정을 자동화하여 생산성을 향상시킬 수 있다. 위의 예시 코드를 참고하여 원하는 작업을 설정하고, Gulp를 실행하여 자동화된 워크플로우를 구성해보자.

더 자세한 정보는 Gulp.js 공식 문서를 참고하면 도움이 될 것이다.

#Gulp #워크플로우