Add support for streams

[ryanseddon]

This only functions with buffers, support streams too.

[toranb]

Could you expand on this a bit? Right now I've found that if I run the transpile task first, followed by the concat task it will pickup the output from the transpile dest directory. But if I run them together (using another named task) it won't find the transpiled files. At first I thought this was a timing issue, but I assume this might be related to this issue.

here is my basic config that works when done in isolation but not together using the dev task

var gulp = require('gulp');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var transpiler = require('gulp-es6-module-transpiler');

var paths = {
    scripts: [
        'js/app/**/*.js'
    ],
    concatDist: [
        'js/vendor/jquery/jquery.min.js',
        'js/vendor/handlebars/handlebars.js',
        'js/vendor/ember/ember.js',
        'js/dist/transpiled/app/**/*.js'
    ]
};

gulp.task('concat:dist', function(){
    return gulp.src(paths.concatDist)
        .pipe(concat('deps.min.js'))
        .pipe(gulp.dest('js/dist/'));
});

gulp.task('transpile', function(){
    return gulp.src(paths.scripts)
        .pipe(transpiler({
            type: "amd",
            moduleName: "js/"
        }))
        .pipe(gulp.dest('js/dist/transpiled/app/'));
});

gulp.task('dev', ['transpile', 'concat:dist'])

[toranb]

Also, what would be a legit workaround until streams are supported?

[ryanseddon]

This is a limitation of how gulp works atm. File IO is kinda flushed at the end of a task run so if you're relying on multiple tasks to transpile and write to disk then take those files and concat them it won't work as expected as dependent tasks aren't guaranteed to run and finish in order.

I would suggest just having a build task and using gulp-filter to filter the files e.g.

var gulpFilter = require('gulp-filter');
var filter = gulpFilter('!js/vendor');

gulp.task('build', function() {
  gulp.src('js/**/*.js')
    .pipe(filter)
    .pipe(transpiler({
      type: "amd",
      moduleName: "js/"
    })
    .pipe(filter.restore())
    .pipe(concat('deps.min.js'))
    .pipe(gulp.dest('js/dist'));
});

This is kinda how you should be using gulp only writing to disk at the end and just piping through your source as you go.

If you absolutely need these in separate tasks I'd look into run-sequence this is a solution until gulp supports this directly.

[toranb]

I did apply this filter example but it doesn't appear to work as expected. The final deps.min.js file seems to include my vendor files (transpiled) ... is this because the transpiler doesn't yet support streams or am I just using this completely wrong? (thanks for the help)

var paths = {
    concatDist: [
        'js/vendor/jquery.min.js',
        'js/vendor/handlebars.js',
        'js/vendor/ember.min.js',
        'js/app/**/*.js'
    ]
};

gulp.task('local', function(){
    var filter = gulpFilter('!js/vendor');
    return gulp.src(paths.concatDist)
        .pipe(filter)
        .pipe(transpiler({
            type: "amd",
            moduleName: "js/"
        }))
        .pipe(filter.restore())
        .pipe(concat('deps.min.js'))
        .pipe(gulp.dest('js/dist/'));
});

[ryanseddon]

So you don't want your vendor files in your deps.min.js? if you flip the order of the concat and filter.restore calls that should combine everything in app and then write all vendor files plus your deps.min.js to the js/dist folder.

gulp.task('local', function(){
    var filter = gulpFilter('!js/vendor');
    return gulp.src(paths.concatDist)
        .pipe(filter)
        .pipe(transpiler({
            type: "amd",
            moduleName: "js/"
        }))
        .pipe(concat('deps.min.js'))
        .pipe(filter.restore())
        .pipe(gulp.dest('js/dist/'));
});

If that doesn't work can you put up a small test case repo showing it not working so I can take a look.

[toranb]

Actually I do want the vendor files in the deps min but I'd prefer they don't get ES6-transpiled (in this example).

Right now the top of my deps.min.js looks something like this (in either case -still seem to AMD-ify the normal vendor files like jquery). I'd prefer those stay global in this case (for the moment anyway).

define("js/",
  [],
  function() {
    "use strict";
    /*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
    //@ sourceMappingURL=jquery.min.map
});

[ryanseddon]

So looks like because of the way you're passing in your files using your object, filter doesn't match anything.

I got it to work changing the filter to the following:

var filter = gulpFilter(function(file) {
  return file.path.indexOf('js/vendor') === -1;
});

[toranb]

boom! that did it !!! thanks again for all the help w/ this issue (related more to the filter plugin than anything)

[tonywok]

So is this a bug in gulp-filter?

[ryanseddon]

No just matching the wrong pattern.