machen einige Operationen auf Teilbündeln des Faktorbündels

Question

Ich benutze Schluck mit browserify und Faktorbündel. Ich habe den folgenden Code:

b = browserify({ 
     entries: [ 'a.js', 'b.js'], 
     plugin: [ [ 'factor-bundle', { outputs: [ 'build/a.js', 'build/b.js' ] } ] ] 
    }) 
    .bundle() 
    .pipe(source('bundle.js')) 
    .pipe(buffer()) 
    .pipe(gulp.dest('/build/common')); 

ich Rohr will einige Aktionen (wie verunstalten, bundle-Collapser oder anderen Job) auf dem Parial Bündel ('build/a.js' und ‚build/b.js '). Ich habe versucht, die Methode auf der Seite des Faktor-Bundle beschrieben zu verwenden:

b.plugin('factor-bundle', { outputs: [ write('x'), write('y') ] }); 
function write (name) { 
    return concat(function (body) { 
     console.log('// ----- ' + name + ' -----'); 
     console.log(body.toString('utf8')); 
    }); 
} 

Aber ich verstehe nicht, die Methode write() und weiß nicht, wie Verhäßlichung durchführen und wie das Ergebnis gulp.dest.
Irgendeine Idee? Erläuterung?

Answer 1

Die Methode write() gibt einen beschreibbaren Stream zurück, mit dem Sie die durch das Faktor-Bundle-Plugin generierten Bundles durch weitere Downstream-Transformationen übertragen können.

Zum Beispiel Ihre write() Methode wie folgt aussehen kann:

var path = require('path'); 
var file = require('gulp-file'); 
var sourcemaps = require('gulp-sourcemaps'); 

function write (filepath) {  
    return concat(function (content) {   
     // create new vinyl file from content and use the basename of the 
     // filepath in scope as its basename. 
     return file(path.basename(filepath), content, { src: true }) 
     // uglify content 
     .pipe(uglify()) 
     // write content to build directory 
     .pipe(gulp.dest('./build/scripts'))   
    }); 
} 

Und Sie würden es wie folgt verwenden:

browserify({ 
    entries: [ 'a.js', 'b.js'], 
    plugin: [ [ 'factor-bundle', { outputs: [ write('a.js'), write('b.js') ] } ] ] 
}) 
.bundle() 
.pipe(write('common.js')) 
// Could have use these instead, but it wouldn't be as DRY. 
// .pipe(source('common.js')) 
// .pipe(uglify()) 
// .pipe(gulp.dest('./build/scripts')) 

Mit dem factor-bundle Plugin beeinflusst die Ausgabe von browserify nach .bundle() wird genannt. Normalerweise würde es Bündel als lesbare Ströme Mapping auf jede Ihrer Eintragsdateien generieren, dann könnten Sie weitere Transformationen auf sie anwenden.

Stattdessen erhalten Sie einen einzigen lesbaren Stream erhalten, die ein Bündel mit der gemeinsam genutzten Module aus den mitgelieferten Eingabedateien enthält, die ich common.js am Beispiel oben genannt habe. Dann müssen Sie die Transformationen der lesbaren Streams behandeln, die jeder Eintragsdatei separat zugeordnet werden.

In dem obigen Beispiel I beschreibbaren Ströme an die Ausgänge Array hinzugefügt haben, angeordnet in der gleichen Reihenfolge wie mein Eintrag-Dateien, die die jeweiligen Bündel als lesbaren Stream empfangen und anzuwenden weitere Umwandlungen zu ihnen

Sie könnten auch nutzen die factor.pipelineevent:

var b = browserify({ ... }); 

b.on('factor.pipeline', function (id, pipeline) { 
    pipeline.get('wrap').push(write(id)); 
}); 

b.plugin(factor); 

return b.bundle().pipe(write('common.js')); 

ich denke, es ist erwähnenswert, dass an die Ausgänge weiter stromabwärts Arbeit Anwendung vollständig von der Pipeline entfernt wird. Wenn Sie also gulp verwenden und den Stream von browserify zurückgeben, wäre die Aufgabe vorzeitig beendet worden, weil weiterhin Operationen für die Eintragsdateien ausführen würde. Ich bin noch nicht in Probleme mit diesem Thema aufgetreten.

Hoffe, das hilft.