Reputation: 192
Right now I am creating a temporary file in Gulp which precompiles my templates. After that, I uglify and concat them into one javascript file. But I'd rather not have a temporary files. Is there a way to have a 'dynamic' sources in Gulp? I tried combining streams, but to no avail.
Example code:
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'))
});
Upvotes: 8
Views: 4503
Reputation: 7820
So theoretically you should be able to do this with gulp version 3.8.0 or higher. Here is the changelog with an example of the feature.
From the changelog:
gulp.src is now a writable passthrough, this means you can use it to add files to your pipeline at any point
So your task could be like this:
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'))
});
Unfortunately, there seems to be some kind of bug where it has trouble handling certain globs, see the issues mentioned here and here. Hopefully they'll get that resolved soon. This is preventing me from using this in my project, but in yours you are only adding a single file, so try it out and maybe it will work.
If it doesn't work, try to use merge-stream
https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md
Edited to include the passthrough option to gulp.src mentioned by Bjorn Tipling
Upvotes: 11
Reputation: 71970
For anyone still coming to this issue you can totally use gulp.src to add additional files into a task mid-stream. You simply need to add { passthrough: true }
as an option. Here is a working example:
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))
The only line that matters to this question is:
.pipe(gulp.src([ paths.css.vueStyles ], { passthrough: true }))
These details are unnecessary to the question, but in case there's confusion, I'm taking CSS files built via SASS as part of the task and then concatenating them with SASS files built by webpack (extracted from vue files) in a separate task. My tasks
and paths
variables are me not using hard coded strings (most of the time).
Note, I used gulp 4.0 but I don't think this matters, passthrough
was added to master in 2015
Upvotes: 1
Reputation: 10104
Tasks can't be piped into other tasks directly, but you can use event-stream
to merge the streams:
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'));
});
Upvotes: 14