Gulp: browserify 파일로 여러 개의 파일 빌드하기

발생일: 2015.05.17

키워드: gulp, browserify, 걸프, 브라우저리파이, multiple entries, merge-stream, merge stream

문제:

browserify 로 파일을 병합할 때, 시작 파일이 여러 개인 경우를 처리하려고 한다.

예를 들면, 시작 파일 `main1.js`, `main2.js`으로부터 `main1.bundle.js`, `main2.bundle.js`로 떨어지게 말이다.

그리고, 이 태스크가 완전히 종료된 후에 다른 태스크가 실행될 수 있어야 한다.

뭔가 스트림을 머지한 후에 리턴해야 할 것 같은데, 어떻게 하면 될까?

해결책:

스트림을 머지하는 목적의 유틸리티 모듈인 `merge-stream`이 있고, 이 모듈을 이용하면 해결할 수 있다.

바로 코드를 보는 게 더 이해하기 쉽다.

var browserify = require('browserify');

var merge = require('merge-stream');

...

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

    // 시작 파일 목록

    var entries = [

        'src/js/main1.js',

        'src/js/main2.js'

    ];

    // 각 시작 파일에 대한 태스크 스트림을 맵으로 담아둔다.

    var tasks = entries.map(function (entry) {

        return browserify(entry)

            .bundle()

            .pipe(source(path.basename(entry)))

            .pipe(rename({

                extname: '.bundle.js'

            }))

            .pipe(gulp.dest('src/js_output'));

    });

    // 스트림을 병합해 리턴한다.

    return merge.apply(null, tasks);

});

이렇게 하면 다른 태스크에서도 작업을 대기할 수 있다.

gulp.task('uglify', ['browserify'], function () {

    // browserify 태스크가 종료된 후에 실행

});

좋구만.ㅎㅎ