Gulp.js – 빌드 자동화 도구 사용하기

Gulp.js ?

Node.js 의 여러 모듈중 하나로 코드난독화, 최적화 등의 빌드 기능을 쉽게 처리할 수 있게 도와준다.

설치

다음 명령어를 통해 gulp를 전역으로 설치한다.

$ npm install gulp – g

다음 명령어를 통해 설치되어 있는 gulp의 버전을 확인 할 수 있다.

$ gulp -v

더 자세한 설치 방법은 링크 참조.

사용

  • 의존성 패키지를 설치

$ npm install--save-dev gulp gulp-util

  • gulp 플러그인을 설치

npm install--save-dev gulp-uglify gulp-concat

코드를 최소화/압축하는 uglify와 자바스크립트 파일들을 하나로 합쳐주는 concat 플러그인을 설치했다.

  • 프로젝트의 루트 폴더에 gulpfile.js 파일을 생성

사용할 플러그인을 선언하는 코드를 추가한다.

var gulp = require('gulp');
vargutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat  = require('gulp-concat');

 

작업을 정의하는 task() 메소드를 추가한다.
gulp.task('js', function() {
    gulp.src('./**/*.js')
        .pipe(uglify())
        .pipe(concat('min.js'))
        .pipe(gulp.dest('./dist'));
});

gulp.src('./**/*.js') 으로 타겟이 되는 js파일목록을 프로젝트에 포함되는 모든 폴더로 지정한다.
이어지는 작업들은 은 .pipe() 메소드를 통해 정의한다.
.pipe(uglify()) : 코드 난독화
.pipe(concat('min.js')) : src()a로 지정된 파일목록을 하나의 파일로 만들어 min.js 에 저장
.pipe(gulp.dest('./dist'));: 저장할 경로를 지정

  • js 태스크를 실행한다.

$ gulp.task('js');

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

w

%s에 연결하는 중