Gulp Quelle von einer anderen Aufgabe

Question

Momentan erstelle ich eine temporäre Datei in Gulp, die meine Vorlagen vorkompiliert. Danach ugglify und concate sie in eine Javascript-Datei. Aber ich hätte lieber keine temporären Dateien. Gibt es eine Möglichkeit, eine "dynamische" Quelle in Gulp zu haben? Ich habe versucht, Streams zu kombinieren, aber ohne Erfolg.

Beispielcode:

gulp.task('template', function() { 
    gulp.src('./src/tpl/*.hbs') 
    .pipe(ember()) 
    .pipe(concat('tpl.js')) // make sure to only do concat after 
    .pipe(gulp.dest('tmp')); 
}); 

gulp.task('uglify', ['template'], function() { 
    gulp.src(['./tmp/tpl.js', './src/js/app.js']) 
    .pipe(uglify()) 
    .pipe(concat('epg.js')) 
    .pipe(gulp.dest('dist')) 
}); 

Answer 1

Aufgaben können nicht direkt in andere Aufgaben geleitet werden, aber Sie können event-stream verwenden, um die Ströme zu fusionieren:

var es = require('event-stream'); 
function template() { 
    return gulp.src('./src/tpl/*.hbs') 
    .pipe(ember()); 
} 

function appjs() { 
    return gulp.src(['./src/js/app.js']); 
} 

gulp.task('uglify', function() { 
    return es.merge(template(), appjs()) 
    .pipe(uglify()) 
    .pipe(concat('epg.js')) 
    .pipe(gulp.dest('dist')); 
}); 

Answer 2

So theoretisch sollten Sie in der Lage sein zu tun, dies mit Schluck Version 3.8.0 oder höher. Here is the changelog with an example of the feature.

Aus dem Changelog: sein könnte

gulp.src ist jetzt ein beschreibbarer Pass-Through, dies bedeutet, dass Sie es zu fügen Sie Dateien in Ihre Pipeline an jedem beliebigen Punkt

So Ihre Aufgabe verwenden können dies wie:

gulp.task('template', function() { 
    return gulp.src('./src/tpl/*.hbs') 
    .pipe(ember()) 
    .pipe(concat('tpl.js')) 
    .pipe(gulp.src('./src/js/app.js', { passthrough: true })) 
    .pipe(uglify()) 
    .pipe(concat('epg.js')) 
    .pipe(gulp.dest('dist')) 
}); 

Leider scheint es irgendeine Art von Fehler zu sein Wo es Probleme gibt, bestimmte Keulen zu handhaben, siehe die erwähnten Probleme here und here. Hoffentlich werden sie das bald gelöst haben. Das hindert mich daran, dies in meinem Projekt zu verwenden, aber in Ihrem Projekt fügen Sie nur eine einzige Datei hinzu, also probieren Sie es aus und vielleicht wird es funktionieren.

Wenn es nicht funktioniert, versuchen merge-stream https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

Edited verwenden, um die Pass-Through-Option, um gulp.src von Bjorn Tipling erwähnt

Answer 3

Für noch jemand zu diesem Thema kommen Sie kann gulp.src verwenden, um zusätzliche Dateien zu einer Aufgabe im Midstream hinzuzufügen. Sie müssen einfach { passthrough: true } als Option hinzufügen. Hier ist ein funktionierendes Beispiel:

gulp.task(tasks.SASS,() => { 
    return gulp.src(paths.css.src) 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(gulp.src([ paths.css.vueStyles ], { passthrough: true })) 
    .pipe(concat('styles.css')) 
    .pipe(gulp.dest(paths.css.dest)) 

Die einzige Linie, die auf diese Frage zählt, ist:

.pipe(gulp.src([ paths.css.vueStyles ], { passthrough: true })) 

Diese Details sind nicht notwendig auf die Frage, aber im Fall gibt es Verwirrung, ich nehme CSS-Dateien über SASS als Teil der Aufgabe erstellt und dann mit von webpack erstellten SASS-Dateien (aus Vue-Dateien extrahiert) in einer separaten Aufgabe verkettet. Meine tasks und paths Variablen sind nicht hart codierte Zeichenfolgen (die meiste Zeit).

Hinweis, habe ich schluck 4.0, aber ich glaube nicht, das Angelegenheiten, passthrough was added to master in 2015