간단한 빌드시스템 GULP !

<간단한 빌드시스템 GULP>

간단하여 사용하기 편리한 gulp에 대해 간략한 소개와 설치 및 플러그인 사용을 함께 해보고자 합니다.

(위의 사진 클릭시, gulpjs.com 링크이동)

What is 'GULP'?  

- 컴파일 없이 파일을 최적화하고 생산성 있게 만들어주는 자동화된 빌드 시스템

노드 스트림의 장점을 이용하여, 필요에 맞게 플러그인들을 연결해 사용할 수 있습니다.

2000개 이상의 플러그인들이 있어 필요에 맞게 사용하시면 됩니다.

배우기도 쉽고, 사용하기도 쉬운 도구로 프로젝트를 수월하게 진행하도록 도와줄 것입니다.

---

GULP 설치

( ※ Gulp 는 Nodejs의 스트림을 기반으로 하기에 Node.js 설치가 선행되어야 합니다. )

1.  npm을 이용하여 전역에 gulp를 설치합니다.

$ npm install gulp -g

2. 프로젝트 루트로 이동한 후 로컬에 설치합니다. (단, package.json 파일이 있어야합니다.)

$ npm install gulp --save-dev

--save-dev를 추가하면서  디펜던시들을 devDependency를 가지고 설치가 된다. (gulp와 관련 딘펜던시들은 개발 과정까지만 필요하기 때문이다.)

같은 이유로 Gulp의 플러그인들 설치할 때에도 --save-dev 옵션을 줍니다.

$ npm install gulp-[플러그인1] --save-dev

3. gulpfile.js 생성하기 

프로젝트 루트에 gulpfile.js 라는 파일을 생성합니다. gulpfile.js 내부에는 Gulp에 관련된 설정을 하는 부분입니다.

var gulp = require('gulp');

gulp.task('default', function() {
    console.log('Awesome!');
});

사용할 플러그인들을 require 한 후, (플러그인 사용전에 npm으로 설치가 되있어야합니다.)

task함수의 default는 gulp를 실행했을때 기본적으로 실행되는 모듈입니다.

$ gulp

입력하시면 default에 해당하는 스크립트가 실행되어 console 창에 'Awesome!'이라는 문구가 뜨는걸 확인 하실 수 있습니다.

---

Gulp 플러그인 사용하기 ('gulp-uglify')

2000가지가 넘는 플러그인들 중에서 코드를 공백을 제거하고 간단하게 만들어주는 'gulp-uglify' 를 같이 실행해보겠습니다.

우선, npm으로 플러그인을 설치합니다.

$ npm install --save-dev gulp-uglify

gulpfile.js에서 gulp-uglify 플러그인을 request합니다.

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

그 외, 변수도 지정해 줍니다.

var paths = {
 "dest": {
"js" : dist+'/js'
} 
}

src폴더 내의 모든 js파일을 선택하여 압축한 후 지정해준 path로 js파일로 만들어 저장합니다.

gulp.dest함수는 지정 경로에 파일을 저장하는 함수입니다. 

gulp.task('uglify-js', function() {
   gulp.src('src/*.js')
.pipe(uglify())
.pipe(gulp.dest(paths.dest+ 'js'));
});

이제 실행시키면 지정한 경로( dist/js ) 에 uglify가 적용된 스크립트 파일이 생성 될 겁니다.

$ gulp uglify-js

짜잔!

'uglify' 외에도 gulp-concat, gulp-zip, gulp-clone 등등 정말 다양한 기능들을 활용할 수 있습니다.
잘 활용하여 모두 편리한 프로젝트 진행하셨으면 좋겠습니다. 감사합니다!