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 태스크가 종료된 후에 실행
});


좋구만.ㅎㅎ


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

카테고리

분류 전체보기 (682)
About me. (6)
Daylogs (647)
비공개 (0)
영어공부 (0)
My works - 추억 (29)