2014-07-20 7 views
2

브라우저 라이브러리의 테스트 커버리지를 측정하기 위해 blanket.js을 사용하려고합니다. jQuery, lodash, es5-shimx-tag-core.js을 번들에 포함하므로 범위 번호가 적합하지 않습니다.gulp-browserify를 사용하여 여러 번들을 만드는 방법은 무엇입니까?

browserify documentation에 설명 된대로 여러 번들을 만들고 싶지만 명령 줄 대신 gulp에서 만듭니다. 본질적으로 Sebastian Deutch describes 같은 것을하고 싶습니다. 끝에는 연결 단계가 없습니다 (그는 컴파일 시간을 단축하기 위해 별도의 번들을 사용하고 있습니다).

누구든지이 작업을 수행하는 방법을 보여줄 수 있습니까? (또는 코드 커버 리지를하는 더 좋은 방법은?)

+0

https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md –

+0

컴파일 시간을 줄이는 더 좋은 방법 인 것처럼 보이지만, 테스트 커버리지 문제를 해결할 수 없습니다. 'blanket.js'는 스크립트 태그에'data-cover' 속성을 사용하여 어디에서 적용 범위를 적용 할 것인지,'jQuery' 외. 내가'jQuery'를 모두 다루지는 않았기 때문에 browserify 번들에 포함되어 있습니다. – thebjorn

답변

4

많은 시행 착오를 거쳐 gulp-browserify 플러그인을 버린 후에 (블랙리스트에 있지만, 덤프에서 직접 browserify을 사용하는 예는 어렵다) 와서), 나는이 일을 할 수 있었다. 내 gulpfile.js의 두드러진 부분은 (내가 source 호출이 일을 전혀 확실하지 않다)이다 :

var gulp = require('gulp'), 
    gutil = require('gulp-util'), 
    clean = require('gulp-rimraf'), 
    rename = require('gulp-rename'), 
    source = require('vinyl-source-stream'), 
    browserify = require('browserify'); 

gulp.task('browserify:externals', function() { 
    var vendor = browserify(['jquery', 'es5-shim', 'lodash']); 
    vendor.require('jquery'); 
    vendor.require('lodash', {expose: '_'}); 
    vendor.require('es5-shim'); 
    return vendor.bundle() 
     .pipe(source("not-used-but-needed-string.js")) 
     .pipe(rename('external.js')) 
     .pipe(gulp.dest('./dist')) 
     .on('error', gutil.log); 
}); 

gulp.task('browserify', ['browserify:externals'], function() { 
    var app = browserify('./index.js'); 
    app.external('jquery'); 
    app.external('es5-shim'); 
    app.require('./index.js', {expose: 'maxby'}); 
    return app.bundle() 
     .pipe(source("not-used-but-needed-string.js")) 
     .pipe(rename('maxby.js')) 
     .pipe(gulp.dest('./dist')) 
     .on('error', gutil.log); 
}); 

내가 또한 전체와 repository을 만들었습니다,하지만 최소한의 예 (나는에 아주 새로운 해요 이 모든 수정 사항을 매우 높이 평가).