[javascript] Gulp를 사용하여 자바스크립트 파일의 비동기 처리를 관리하는 방법

04 Dec 2023

javascript

Gulp는 자바스크립트 파일의 빌드 및 자동화 작업을 처리하는 강력한 도구입니다. 이 툴을 사용하면 자바스크립트 파일의 비동기 처리를 손쉽게 관리할 수 있습니다. 이 글에서는 Gulp를 사용하여 자바스크립트 파일의 비동기 처리를 관리하는 방법을 알아보겠습니다.

Gulp 설치하기

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

npm install -g gulp

프로젝트 설정

Gulp를 사용하기 위해 프로젝트의 루트 디렉토리에 package.json 파일을 생성해야 합니다. 아래 명령어를 사용하여 package.json 파일을 생성할 수 있습니다.

npm init

Gulp 시작하기

프로젝트 루트 디렉토리에 gulpfile.js 파일을 생성합니다.
gulpfile.js 파일에 아래와 같은 코드를 작성합니다.

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

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

위 코드는 scripts라는 이름의 Gulp 태스크를 정의합니다. 이 태스크는 src 폴더 내의 모든 자바스크립트 파일을 하나로 합치고, 압축하여 dist 폴더에 bundle.js 파일로 저장합니다.

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

gulp scripts

위 명령어를 실행하면 src 폴더 내의 자바스크립트 파일이 합쳐지고 압축된 후 dist 폴더에 bundle.js 파일로 저장됩니다.

Watch 기능 사용하기

Gulp의 Watch 기능을 사용하면 파일의 변경 사항을 감지하여 자동으로 태스크를 실행할 수 있습니다. 아래와 같이 gulp.watch 함수를 사용하여 Watch 태스크를 작성할 수 있습니다.

gulp.task('watch', function () {
  gulp.watch('src/*.js', gulp.series('scripts'));
});

위 코드는 src 폴더 내의 자바스크립트 파일의 변경 사항을 감지하면 자동으로 scripts 태스크를 실행합니다.

Watch 태스크를 실행하려면 터미널에서 아래 명령어를 사용합니다.

gulp watch

Watch 태스크를 실행하면 src 폴더 내의 자바스크립트 파일이 수정될 때마다 scripts 태스크가 자동으로 실행됩니다.

이제 Gulp를 사용하여 자바스크립트 파일의 비동기 처리를 관리하는 방법을 알았습니다. Gulp를 사용하면 프로젝트의 작업 흐름을 자동화하고 효율적으로 개발할 수 있습니다.