CODEWITHSUNDEEP
gulp
Peter Briers
Peter Briers

Reputation: 192

Gulp source from another task

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

Answers (3)

RustyToms
RustyToms

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

Bjorn
Bjorn

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

Ben
Ben

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

Related Questions