gulp - MoonGyeongHyeon/Keyword_Study GitHub Wiki

gulp

gulp란?

gulp는 steaming build system을 표방한다. 즉, node의 스트림 기능으로 인해 이득을 얻는 빌드 시스템이란 의미이다. 빌드 시스템은 프로젝트를 development, production, testing 등의 다른 빌드들로 빌드해준다. gulp는 이런 작업을 제대로 수행해주고 또 플러그인들을 통해 매우 확장성있게 작업할 수 있도록 도와준다.

만약 프로젝트를 운영(production)으로 빌드한다면, 아마도 javascript를 minify 하고 또 sass파일을 컴파일하고 코드에 오류는 없는지 체크하고 싶을 것이다. 이런걸 직접 수동으로 할 수도 있지만 'gulp task'를 작성해서 자동화할 수도 있다.

gulp 세팅하기

npm을 이용하여 gulp를 설치해보도록 하자.

$ npm install gulp -g
$ npm install gulp --save-dev

--save-dev 옵션을 추가하면 디펜던시들을 devDependency로만 설치하게 되는데, 이 옵션을 주는 이유는 gulp와 관련 디펜던시들은 어플리케이션 개발 과정까지만 필요하기 때문이다. gulp 플로그인들을 설치할 때도 같은 --save-dev 옵션을 주도록 하자.

$ npm install gulp-[plugin name] --save-dev

폴더 구조

먼저, src 폴더와 dist(distribution) 폴더를 만들자. src 폴더는 아무런 처리를 하지 않은 javascript와 압축하지 않은 css, 최적화하지 않은이미지들이 들어가게 된다. dist 폴더는 gulp에 의해 빌드된 파일들이 들어가게 될 것이다. 루트 디렉토리를 깨끗하게 유지하기 위해 /public 이라는 폴더 아래 src와 dist 폴더를 두자. 그럼 다음과 같은 구조가 될 것이다.

node_modules/
public/
	src/
		index.html
		img/
		js/
		scss/
	dist/
		index.html
		img/
		js/
		css/
	lib/
		vanilla.js
		fancybox.js
gulpfile.js
package.json

gulpfile.js

이 파일은 gulp의 설정이 담겨지게 된다. gulp의 문법이 있긴 하지만 매우 쉽고 다루기 좋다. 아래는 그 문법이다.

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

//...

gulp.task('combine-js', ['lint-js'], function () {
	return gulp.src('/public/js/**/*.js')
	.pipe(concat('all.js'))
	.pipe(gulp.dest('public/dist/js'));
});

//... 

gulp.task('default', ['combine-js']);

하나하나 보도록 하자.

gulp.task(name, deps, func)

gulp.task로 gulp task를 선언하게 되는데, 여기서 3개의 파라미터를 포함하며 두 번째 파라미터는 생략할 수 있다.

• name: task의 이름을 지정하며, 이름에는 공백이 포함되선 안된다.
• deps: 현재 선언하고 있는 task를 수행하기 전에 먼저 실행되어야 하는 task들의 배열이다. 위의 예제에서는 javascript 파일을 병합하는 task를 진행하기 전에 javascript lint를 먼저 수행하도록 되어있다.
• func: 실제 수행할 task의 내용을 정의하는 function이다.

만약 선행되어야 할 task가 없다면 gulp.task('name', [], fn); 과 같이 하면 된다. 물론, gulp.task('name', fn); 으로 해도 상관없다.

gulp.src(files)

gulp.src(files)는 파일이나 파일의 경로들이 포함된 배열 또는 string이다.

위 예제에서는 '/public/js/**/*.js'로 되어있는데, 이렇게 와일드카드 형태로 표현할 수도 있다. 아니면 배열 형태로 여러 파일들과 폴더를 긁어올 수도 있다.

gulp.src([
	'public/src/js/loginForm.js'
	'public/src/js/slider/*.js'
	'!public/src/js/slider/slider-beta.js'
	] ...);

위의 예에서는 'loginForm.js' 파일과 slider 폴더 안의 모든 .js 파일을 긁어오게 된다. 맨 앞에 '!' 표시가 되어있는 것은 해당 파일을 포함하지 말라는 뜻이다. 단, 바로 앞에 해당 파일을 포함하고 있을 떄만 사용해야 한다.

gulp.pipe(...)

pipe를 사용해서 task들의 결과물을 function들에게 전달할 수 있다. 좀 더 자세히 보자.

gulp.src('public/src/js/*.js')
	.pipe(stripDebug())
	.pipe(uglify())
	.pipe(concat('script.js'))
	.pipe(gulp.dest('public/dist/js'));

이 예제는 stripDebug, uglify, concat을 사용한다.

먼저, gulp는 public/src/js 폴더의 모든 js 파일들을 긁어온다. 그런 다음, 우리는 그걸 stripDebug에게로 파이핑해주게 되는데, stripDebug는 모든 console.log 들과 alert 들을 제거해준다. 그 다음으로 uglify로 파이핑해주게 되는데, uglify는 javascript를 압축해준다. 그 후에 우리는 이 파일들을 concat('script.js')로 파이핑해주는데, 이건 console.log와 alert들이 제거되고 압축된 모든 파일들을 script.js 파일 하나로 병합해준다. 마지막으로 우리는 이 파일을 gulp.dest로 보내게 되는데, 이를 통해 우리가 실제 사용하게 될 output 파일로 쓰여진다.

불필요한 콘솔 로그가 제거되고 압축된 하나의 js 파일을 얻었다.(public/dist/js/script.js)

gulp.task('default', []);

gulp.task('default', [])는 command-line에서 아무런 argument 없이 gulp를 실행했을 때 기본값으로 실행되는 task이다. 만약 특정 task를 실행하고 싶다면 아래와 같이 할 수 있다.

$ gulp task-name

gulpfile 빌드하기

이제 gulpfile이 대략 어떤 구조인지 알게되었다. 이제 실제로 gulpfile을 작성해보자. dist와 src 폴더 구조를 갖고 있다고 가정하겠다. 이 예제에서는 파일이 변경되었을 경우, javascript 파일 병합/압축 및 sass 파일을 컴파일한 뒤 브라우저를 리로드하는 gulpfile을 작성할 것이다.

이를 위해 우리는 아리와 같은 gulp-plugins가 필요하다. (위에서 이야기한 것처럼 gulp에서 사용되는 플러그인들은 devDependencies로 먼저 설치해주어야 한다.)

gulp-webserver: 웹서버처럼 동작하게 하는 플러그인.

gulp-concat: js 파일 병합을 위한 플러그인.

gulp-uglify: js 파일 압축을 위한 플러그인.

gulp-minify-html: html 파일 minify를 위한 플러그인

gulp-sass: sass 파일을 컴파일하기 위한 플러그인.

gulp-livereload: 웹 브라우저를 리로드하기 위한 플러그인.

프로젝트 밑에 gulpfile.js 파일을 생성한다. 그리고 필요한 플러그인들을 include하도록 한다.

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

경로를 객체에 담아두고 사용하면 유지보수가 편해진다.

var src = 'public/src';
var dist = 'public/dist';

var paths = {
    js: src + '/js/*.js',
    scss: src + '/scss/*.scss',
    html: src + '/**/*.html'
};

마지막으로, 실제 task들을 작성한다.

gulp.task('concat', function () {
    return gulp.src(paths.js)
        .pipe(uglify())
        .pipe(concat('combined.js'))
        .pipe(gulp.dest(dist + '/js'))
});

gulp.task('default', [ 'concat' ]);

command-line에서 'gulp' 또는 'gulp concat' 명령어를 입력하면 public/dist/js 폴더에 combined.js 라는 압축된 파일을 확인할 수 있다.