[정리중] spring boot 프로젝트에 gulp 적용

gulp 는 node.js 기반의 프로세스 자동화 도구 라고 한다.

여러 문서를 읽어 보니 단순, 반복적인 태스크 들을 실행해 준다는 느낌이 들었다.

gulp 를 이용 하려는 목적은 기존에 작성된 spring boot 프로젝트에 포함된 javascript, css 의 minify(uglify) 하기 위해서다.

 

비슷한 도구들로는 webpack 외 많이 있었지만, 소규모 프로젝트에는 gulp가 적합 하다고 하여 사용해 보았다.

 

1. node.js 설치

https://nodejs.org/en/download 에 방문 하여, 개발 환경에 맞는 설치 파일을 다운로드 받아 설치 한다.
설치 과정에 특별한 사항은 없으므로 생략 한다.

본인의 경우 Windows Binary 64bit zip 파일을 받아 압축 해제 하고 PATH에 설정해 주었다.

참고 : node 명령을 사용 하기위해서는 환경변수에 등록 한다.

2. node.js 설치 확인

C:\Users\freecatz>node -v
v20.10.0

* 위와 같이 나타난다면 정상 설치 및 설정 완료

C:\Users\freecatz>node -v
'node'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

* 위와 같이 나타난다면 설치나 설정에 문제가 있으므로 다시 확인 한다.

 

3. 스프링 부트 프로젝트 루트 디렉토리로 이동

개발하는 환경에 따라 터미널 이나 cmd 창을 열어 이동 한다.
D:\workspace\intellij\private\freecatz.pe.kr> npm i gulp -g
D:\workspace\intellij\private\freecatz.pe.kr> npm i gulp --save-dev
D:\workspace\intellij\private\freecatz.pe.kr> npm i gulp-uglify-es --save-dev

위의 명령을 이용 하면, 프로젝트 디렉토리 아래 node_modules 디렉토리와 package.json, package-lock.json 파일이 생성 된다.

필요시 버젼관리 시스템에 포함 시키고, 다른 컴퓨터에서 해당 프로젝트 환경 구성시 npm install 명령으로 한번에 설치가 가능 하다.

 

4. gulp 버젼 확인

D:\workspace\intellij\private\freecatz.pe.kr>gulp -version
CLI version: 2.3.0
Local version: 4.0.2

 

5. gulpfile.js 파일 생성

프로젝트 루트 디렉토리에 gulpfile.js 파일을 생성 한다.

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

const ENV = {
    JS_SRC_PATH : 'src/main/javascript/**/*.js',
    JS_DEST_PATH : 'src/main/resources/static/js/',
};


gulp.task('uglify-js', async function() {
    return gulp.src(ENV.JS_SRC_PATH)
        .pipe(uglify())
        .pipe(gulp.dest(ENV.JS_DEST_PATH));
});

gulp.task('watch', async function() {
    gulp.watch(ENV.JS_SRC_PATH, gulp.series(['uglify-js']));
});


gulp.task('default', gulp.series(['uglify-js', 'watch']));

 

6. gulp 실행

D:\workspace\intellij\private\freecatz.pe.kr> gulp
[16:55:08] Using gulpfile D:\workspace\intellij\private\freecatz.pe.kr\gulpfile.js
[16:55:08] Starting 'default'...
[16:55:08] Starting 'uglify-js'...
[16:55:08] Finished 'uglify-js' after 8.6 ms
[16:55:08] Starting 'watch'...
[16:55:08] Finished 'watch' after 8.21 ms
[16:55:08] Finished 'default' after 19 ms
[16:55:20] Starting 'uglify-js'...
[16:55:20] Finished 'uglify-js' after 2.77 ms
[16:55:28] Starting 'uglify-js'...
[16:55:28] Finished 'uglify-js' after 2.29 ms
[16:55:44] Starting 'uglify-js'...
[16:55:44] Finished 'uglify-js' after 2.04 ms
[16:55:46] Starting 'uglify-js'...
[16:55:46] Finished 'uglify-js' after 1.85 ms