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`디렉토리에 쓴다.

  
  


저작자 표시 비영리 변경 금지
신고