[javascript] Gulp를 사용하여 자바스크립트 파일이 변경될 때만 빌드하는 방법
Gulp는 자바스크립트 파일을 빌드하는 데 사용되는 인기있는 자동화 도구입니다. 이 블로그 포스트에서는 Gulp를 사용하여 자바스크립트 파일이 변경될 때만 빌드하는 방법을 알아보겠습니다.
Gulp 설치 및 설정
- Gulp를 설치합니다. 프로젝트의 루트 디렉토리에서 다음 명령을 실행합니다:
npm install gulp --save-dev
gulpfile.js라는 이름의 파일을 생성하고, 아래의 코드를 복사하여 붙여넣습니다:
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const cache = require('gulp-cached');
const watch = require('gulp-watch');
gulp.task('build', function() {
return gulp.src('src/**/*.js')
.pipe(cache('build'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('watch', function() {
gulp.watch('src/**/*.js', gulp.series('build'));
});
gulp.task('default', gulp.series('watch'));
- 필요한 경우,
src와dist폴더를 생성합니다.src폴더는 원본 자바스크립트 파일을 포함할 위치이고,dist폴더는 빌드된 자바스크립트 파일을 포함할 위치입니다.
Gulp를 사용하여 빌드하기
위에서 작성한 gulpfile.js 파일에는 build 및 watch라는 두 가지 Gulp 태스크가 정의되어 있습니다. build 태스크는 src 폴더의 모든 자바스크립트 파일을 빌드하여 dist 폴더에 저장합니다. watch 태스크는 src 폴더의 자바스크립트 파일을 감시하고, 변경되면 build 태스크를 실행합니다.
빌드를 실행하려면 프로젝트의 루트 디렉토리에서 다음 명령을 실행합니다:
gulp build
Gulp는 src 폴더의 모든 자바스크립트 파일을 빌드하고, dist 폴더에 결과를 저장합니다.
Gulp를 사용하여 변경 사항을 실시간으로 감지하기
Gulp의 watch 태스크를 사용하여 변경 사항을 실시간으로 감지하여 자동으로 빌드하도록 설정할 수 있습니다.
빌드 및 감시를 시작하려면 프로젝트의 루트 디렉토리에서 다음 명령을 실행합니다:
gulp
이제 Gulp는 src 폴더의 자바스크립트 파일을 감시하며, 변경이 감지되면 자동으로 빌드합니다. 빌드된 파일은 dist 폴더에 저장됩니다.
결론
Gulp를 사용하여 자바스크립트 파일이 변경될 때만 빌드하는 방법에 대해 알아보았습니다. Gulp의 강력한 기능을 활용하여 개발 작업을 자동화하고 더욱 효율적으로 코드를 관리할 수 있습니다.