이 버전 gulp는 구버전( <= 3.9 .1) 을 다루고 있다.
신버전과 구버전의 사용법은 많이 다르다.
현재 대부분의 레거시와 인터넷 사용법은 구버전을 다루고 있다.
그래서 일단 구버전으로 강의를 먼저 시작하고 추후에 신버전 사용법을 알려드리도록 하겠다.
문서 - https://libraries.io/npm/gulp/3.9.1
※이 컨텐츠는 시리즈물로 이어집니다.
[BuildSystem][TaskRunner][Gulp]Gulp란? 설치하기, 기본 프로젝트 만들기:ver3.9.1-구버전(1)
저번 포스팅에서 개략적인 사용법을 알려드렸으므로 이제 본격적으로 사용해보자.
gulp는 파이프라인을 타고 빌드를 한다.
프로그래밍에서 파이프라인이라는 것은 두가지 특성을 가진다.
1.앞의 작업(파이프)이 완료된걸 결과물로 받아서 뒤(파이프)로 전달한다.
2.파이프는 분기할 수 있다.
gulp도 이 특징을 지닌다고 생각하면된다.
gulp를 이제 예제로 해볼 생각인데 그냥 하면 재미없으니까 바로 실전으로 들어가서 js파일을 합쳐보도록하자.
js파일을 합치는 방법도 여러가지가 있다.
크게 보면 두가지로 나뉘는데 concatenating과 bundling이다.
concatenating(줄여서 concat) : 영어로 사슬로 잇는 것을 의미한다. 말그대로 변환과정을 거치는게 아니라 그냥 이어버린다.
bundling : 모듈화 시키는걸 의미한다. 마냥 잇는게 아니라 적절히 컴파일을 거친다.
gulp에서는 둘다 존재하는데 concat은 gulp-concat이라는 모듈로 존재한다.
다만 자주 쓰이지는 않는데 그 이유는 이게 종속성같은걸 따져서 묶어주는게 아니라 그냥 자바스크립트 파일 자체를 잇기 때문이다.
오히려 이 concat과정은 정말 숙련자가 반복노동을 줄이기 위해서 파일을 분할하는 경우에만 의미있지 번들링으로서 의미는 0다.
js를 의미있게 이을려면 번들링을 해야한다.
이런걸 모듈번들러라고 부르는데 자주쓰는 모듈 번들러는 browserify와 webpack이다.
각각에 대한 설명은 browserify포스팅과 webpack포스팅을 참조하라.
이해도가 없다면 위의 포스팅을 반드시 읽어보는게 좋다.
모듈번들러가 왜 존재하게 됬는지, 그리고 왜쓰는지에 대해서 필자가 나름 상세하게 설명을 해놨기 때문이다.
여튼 우리는 여기서 browserify를 쓸것이다.
이게 더 뛰어나서 쓴다기보다는 webpack보다 가벼우며 사실은 webpack은 나중에 따로 포스팅할거라서 그렇다.
이제 실전이라고 생각하고 파이프라인과 browserify를 사용하여 빌드하는 모습을 보도록하자.
npm install --save-dev gulp-browserify
dev세팅으로 gulp-browserify를 설치한다.
선행해서 browserify를 설치할 필요는 없다.
사용할 파일들은 위와 같다.
코드 구조는 간단해서 별 볼일 없고 gulpfile.js나 보도록 하자.
const gulp = require('gulp');
const browserify = require('gulp-browserify');
gulp.task('bundling', function () {
let src = 'src/main.js';
//let src = 'src/*.js';
let dest = 'dist/js';
console.log('bundling task');
let stream = gulp.src(src)
.pipe(browserify())
.pipe(gulp.dest(dest));
return stream;
});
gulp.task('default', ['bundling'], function () {
console.log('default task');
});
정말 많은것이 담겨있는 코드이다. 간단하지만 이 코드만으로도 굉장히 유용한 여러작업들을 할 수 있다.
먼저 복습겸 다시말하지만 task는 특별한 말을 적지 않으면 default가 실행된다.
그리고 bundling이 현재는 의존되어 있으므로 default실행전에 bundling이 실행되는걸 확인할 수 있다.
그러나 우리가 눈여겨 봐야할 것은 다른 코드이다.
let src = 'src/main.js';
//let src = 'src/*.js';
let dest = 'dist/js';
src는 소스코드를, dest는 출력물이 적재될 폴더를 의미한다.
만약 모든 소스를 다 번들링하고싶다면 위의 주석처럼 처리하면되지만 실제로 그럴일은 없다.
let stream = gulp.src(src)
.pipe(browserify())
.pipe(gulp.dest(dest));
그 다음 중요한건 스트림이다.
gulp는 파이프라인을 타는데 이 파이프라인 한줄을 스트림이라고 부른다.
사실 스트림과 파이프라인은 gulp에서는 거의 동의어이므로 누가 뭐라부르건 동일하다고 생각하자.
여기서는 3가지 구성을 가지는데 일반적인 gulp 스트림은(파이프라인은) 아래와 같은 구조를 가진다.
gulp.src(<소스파일>)
.pipe(<파이프1>)
.pipe(<파이프2>)
...
.pipe(<파이프n>)
.pipe(gulp.dest(<결과파일>))
위와 같은 구조를 크게 벗어나지 않는다.
즉 입력이 있고 출력이 있는건데 중간중간에 내가 해주고싶은 작업을 넣어주면된다.
여러분이 만드는 대부분 gulpfile은 위 구조를 아주 정직하게 지키게 될 것이다.
return stream;
마지막으로 여러분은 stream을 리턴하는데 이 작업이 반드시 필요한 작업은 아니다.
다만 여러분이 리턴값으로 stream을 리턴하면 다음 태스크의 콜백에서 인자로 받아서 사용할 수 있다.
사용하는 방법은 더더욱 너무나도 쉽다.
gulp
위 명령어 한줄로 gulp를 실행하게 된다.
아래 완성본을 확인할 수 있다.
결과를 열어보면 제대로 번들링이 된걸확인할 수 있다.
그러나 아직 여러분이 못미더울 수 있다.
그러므로 테스트를 해보도록하자.
index.html을 실행해보면 제대로 실행되는 것을 확인할 수 있다.
gulp로 이런 파일을 제대로 출력할수 있는건 사실상 하나의 축복이라고 할 수 있다.
다음 장에서는 gulp로 pug와 같은 html템플릿을 html로 변경하는 작업을 해보도록 하겠다.