gulp의 watch로 minify, merge 자동화해보기

 

이전 포스팅 바로가기

 

이전에 포스팅에서 minify, merge를 진행해봤었는데요, 이번엔 자동화를 시켜보겠습니다.

 

 

gulp 실행후 minify, merge가 끝나고나서,

다시 원본파일을 수정하면 cmd에 gulp를 입력해서 실행해야하기때문에,

이 번거로움을 없애고자 자동화를 시켜보도록하겠습니다.

자동화는 gulp의 메소드 watch를 이용해서 실행합니다.

 

watch는 gulp의 메서드로 제공되고 있으며 내가 지정한 파일을 지켜보고 있다가 그 파일에 변화가 생기면

자동으로 설정된 행동을 진행해줍니다.

지난 코드에서 이어서 진행하겠습니다.

 

gulpfile.js

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

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

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

gulp.task('default', gulp.series('concat', 'watch'));

 

1.

사용자가 gulp를 실행하면 default가 실행되고 gulp.series에 의해 concat과 watch가 순서대로 실행됩니다.

 

2.

concat이 먼저 실행되므로 gulp.task('concat')함수가 실행되고 minify와 merge가 실행됩니다.

 

3.

그 후 watch가 실행됩니다.

gulp.task('watch')함수가 실행됩니다.

gulp.watch() 메서드에서 첫번째 파라미터는 내가 지켜볼 파일의 경로이고

두번째 파라미터는 내가 지켜보는 파일에 변화가 생겼을 경우 실행하게될 함수입니다.

즉, src/js/*.js (src > js 폴더의 .js 확장자를 가진 모든 파일)에 변화가 생겼을 경우 gulp.task('concat')이 실행됩니다.

 

 

 

gulp 실행을 해보겠습니다.

cmd

gulp

 

Starting 'watch'라고 되어있고 Finished 'watch'가 없으면 watch가 '실행 중'인 상태입니다.

 

 

 

watch가 정상적으로 동작하는지 확인하기 위해, js파일을 수정해보도록 하겠습니다.

예제를 위해 name 값을 수정해보겠지만 어떠한 부분이 수정되더라도 상관없습니다.

src > js > index.js

var sayHelloFunc = require('./sayHello');
console.log(sayHelloFunc('J.K?????'));

 

 

수정을 하고 파일 저장을 마치면 cmd 창에 변화가 생깁니다.

cmd 상태

 

 

병합 및 압축이 완료되어 아웃풋으로 나온 main.min.js도 수정된 것을 확인할 수 있습니다.

dist > main.min.js