Gulp: Browserify 로 빌드하기

발생일: 2015.05.17

키워드: gulp, browserify, gulp + browserify, vinly-source-stream, 걸프, 브라우저리파이

문제:

모듈의 의존성 관리는 browserify 를 사용하고 있는데, gulp 빌드에 포함하려고 한다.

browserify 모듈을 파이프에 끼어넣어 봤는데, 의도처럼 잘 되진 않는다.

어떻게 하면 될까?

해결책:

browserify 는 gulp 플러그인이 아니기 때문에,

browserify 의 스트림을 걸프에서 사용하는 vinyl 객체로 변경해줘야 하며,

이 용도로 vinyl-source-stream 모듈이 추가로 필요하다.

대략의 빌드 스크립트는 아래와 같다.

var gulp = require('gulp');

var browserify = require('browserify');

var source = require('vinyl-source-stream');

gulp.task('script', function () {

  return browserify('./src/js/main.js') // (A)

    .bundle() // (B)

    .pipe(source('bundle.js')) // (C)

    .pipe(gulp.dest('dist/js')); // (D)

});

각 라인이 하는 역할은 아래와 같다.

(A) browserify('./src/js/main.js')

  browserify API를 호출하는 코드다.

  `main.js`에서부터 시작해 의존하고 있는 다른 파일들을 로드해 병합한다.

  주의할 것은 browserify 로 전달하는 파일명은 `./`를 포함한 경로라는 것이다.

  gulp로 전달하는 모든 파일은 현재 디렉토리를 생략해도 되는데,

  browserify 는 전달받는 파일을 노드 모듈로 판단하기 때문인 것으로 보인다.

(B) .bundle()

  browserify 객체의 `bundle()`을 호출한다.

  `bundle()`은 browserify 의 객체를 읽어올 수 있는 Readable Stream 을 리턴한다.

  이 스트림으로부터 병합된 스크립트 파일을 읽어올 수 있다.

(C) pipe(source('bundle.js'))

  browserify 객체에서 리턴한 스트림은 기본적으로 gulp 의 스트림과 호환되지 않는다.

  browserify 가 gulp의 플러그인이 아니기 때문이다.

  gulp 의 플러그인으로 전달해야 하는 파라미터는, 파일의 메타데이터 정보를 포함하고 있는 vinyl 의 인스턴스여야 한다.

  `vinyl-source-stream` 모듈은 일반 스트림을 메타데이터를 포함한 vinyl 객체로 변환해주는 역할을 한다.

  이 코드에서는, 연결된 스트림에 `bundle.js`라는 파일명을 추가해 다음 스트림으로 전달한다.

(D) pipe(gulp.dest('dist/js'))

  마지막으로, 메모리 상의 가상의 파일을 `dist/js`디렉토리에 쓴다.