node.js 프로젝트 환경 설정(2/3): gulp를 활용한 node.js 개발 환경 설정

이전글: node.js 프로젝트 환경 설정(1/3): WebStorm과 node.js 설치
다음글: node.js 프로젝트 환경 설정(3/3): mocha와 gulp를 활용한 node.js 테스트 환경 설정


* node.js 프로젝트를 새로 만들 때 (프로젝트 폴더를 만든 후) 여기서부터의 내용을 적용하자.
먼저, package.json을 node.js 프로젝트의 root에 만든다. (참조: [node.js] node 모듈 설치와 관리를 위한 package.json 활용 )

$npm init

mocha를 활용한 node.js 프로젝트 테스트에서 사용했던 프로젝트의 폴더와 파일을 다시한번 사용해서 gulp를 이용한 node.js 개발 환경 설정을 알아보자.

1. gulp를 global하게 설치

$ npm install --global gulp

2. 프로젝트 내에 gulp 모듈 설치

$ npm install --save-dev gulp

3. 필요한 gulp plugin 설치
필요한 plugin은 아래와 같다.
- 로깅, console에서의 coloring out 등을 지원: gulp-util
- javascript 파일의 잠재 defect check: gulp-jshint
- javascript 파일 여러개를 합쳐서 하나로 만들기 (HTTP request를 줄이기): gulp-concat
- 합쳐진 javascript 파일으 사이즈 줄이기: gulp-uglify
- javascript 파일 이름 바꾸기: gulp-rename
- 파일 size 알려주기: gulp-filesize
- 폴더 지우기: gulp-clean
- 파일이 변경되었는지 확인하기: gulp-watch

$ npm install --save-dev gulp-util gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-filesize gulp-clean gulp-watch

4. gulpfile.js 작성
build를 위해 root 폴더 아래에 'build' 폴더를 만든다.
gulpfile.js을 프로젝트 root 폴더아래에 만든다. 아래와 같이 내용을 채워 본다.

<br /> var path = require('path');<br /> var gulp = require('gulp');<br /> var gutil = require('gulp-util');<br /> var lint = require('gulp-jshint');<br /> var concat = require('gulp-concat');<br /> var uglify = require('gulp-uglify');<br /> var rename = require('gulp-rename');<br /> var filesize = require('gulp-filesize');<br /> var clean = require('gulp-clean');<br /> var watch = require('gulp-watch');<br /> <br /> gulp.task('clean', function () {<br /> return gulp.src('build', {read: false})<br /> .pipe(clean());<br /> });<br /> <br /> gulp.task('build', function() {<br /> return gulp.src('src/*.js')<br /> .pipe(concat('src.js'))<br /> .pipe(gulp.dest('build'))<br /> .pipe(filesize())<br /> .pipe(uglify())<br /> .pipe(rename('src.min.js'))<br /> .pipe(gulp.dest('build'))<br /> .pipe(filesize())<br /> .on('error', gutil.log)<br /> });<br /> <br /> <br /> gulp.task('check', function() {<br /> return gulp.src('src/*.js')<br /> .pipe(lint())<br /> .pipe(lint.reporter('default'));<br /> });<br /> <br /> gulp.task('watch', function() {<br /> gulp.watch('src/*.js', ['check', 'build']);<br /> });<br /> <br /> gulp.task('default', ['check', 'build', 'watch']);<br />

watch는 파일을 모니터링을 하다가 변경이 생기면 정해진 task를 실행시킨다. 그리고 'default'는 wrapper task의 예를 보여준다.

5. gulp 실행
gulpfile.js가 있는 프로젝트 root 폴더에서 아래와 같이 task 명을 실행시켜서 어떤 결과가 발생하는지 확인해 보자.

$ gulp build

Webstorm의 경우엔 gulpfile.js위에서 오른쪽 마우스 버튼을 눌러 "show gulp tasks"를 실행하면 gulp task 창이 떠서 task들이 표시된다. 이때 'build'버튼을 누르면 아래와 같은 결과가 나와야 한다.

정리
1. gulp를 이용해서 프로젝트의 설정을 잡을 수 있다.
2. gulp plugin 중 유용한 것이 많이 있다. 확인해서 많이 사용해 보자.


다음글: node.js 프로젝트 환경 설정(3/3): mocha와 gulp를 활용한 node.js 테스트 환경 설정