[springboot] bower/gulp를 이용한 라이브러리 관리

- Goal

springboot 프로젝트에 bower,gulp를 이용한 frontend library 관리

- Time

15min

- Enviroment

java 1.8, STS3.7

- Tutorial

아래 포스팅에 이어서 작성합니다. 

2016/11/14 - [Springboot] - [springboot] sts로 springboot + gradle + thymeleaf 프로젝트 만들기

.bowerrc 파일 작성

{
    "directory":"src/main/resources/static/bower_components",
    "json":"bower.json"
}

콘솔창에서 bower init 으로 bower.json 파일 생성 하고 jquery를 예제로 설치

>> bower init
 
>> bower install jquery --save 

폴더 구조는 아래와 같이 bower_components 폴더가 생성 됨 

(이미 한번 테스트 후에 작성한 포스트라 gulp관련 파일도 포함 되어 있으나 실제로는 없을꺼에요..ㅎㅎㅎ)

우선 필요한 package를 npm을 이용하여 설치합니다. 그리고 --save-dev 명령어를 이용하여 package.json에 추가해 주도록 합니다 .

>> npm init
 
npm install gulp-uglify --save-dev
npm install gulp-concat --save-dev
npm install gulp-rename --save-dev

이제 gulp를 이용하여 필요한 js 들을 모아 봅니다. (gulp 설치는 각자 알아서~)

gulpfile.js 파일 생성

var gulp = require('gulp'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename');
 
gulp.task('bower',function(){
gulp.src([
    'src/main/resources/static/bower_components/jquery/dist/jquery.min.js'    
])
.pipe((concat('components.js')))
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('src/main/resources/static/lib/'))
});
 
gulp.task('scripts', function() {
gulp.src('src/main/resources/static/js/**/*.js')
.pipe((concat('util.js')))
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('src/main/resources/static/lib/'))
});
 
gulp.task('watch',function(){
    gulp.watch(['src/main/resources/static/js/**/*.js'],['scripts']);
});
 
gulp.task('default',['bower','scripts','watch']);

내용은 복잡해보이나 특정위치에 파일을 압축하여(gulp-uglify) 하나로 묶어주고(gulp-concat) 이름을 변경(gulp-rename)하여 복사하고,

특정 위치 파일에 변화를 감지(watch)하다 변경되면 다시 합처주는 그런 기능입니다. 

자세한 내용은 아래 사이트에 정리가 잘되어 있읍니다. 

http://programmingsummaries.tistory.com/356

콘솔창에서 gulp를 실행시켜보면 아래와 같이 watch 상태로 대기상태가 됩니다. 

그리고 파일을 수정하면 watch(감시)가 동작하여 파일을 다시 묶어주는 과정을 반복합니다. 

이렇게 하면 파일들을 하나로 묶어서 배포가 가능합니다. 

모든 파일을 묶을지, 부분 부분 압축해서 가져 갈지는 사용하는 방법에 따라 선택 하시면 될거 같습니다.

소스는 아래 github에서 확인 가능합니다. 

https://github.com/beans9/webProject/tree/2.bower