Gulp: Different Pipe collections within same task

Question

What I've been attempting to do is create one scripts task that takes all .coffee and .js files and does what's needed for each:

• Coffee files should be run through coffee(), coffeelint() and coffeelint.reporter()
• JS files should be run through jshint()
• All files should then be run through concat(), uglify() and ultimately setting a destination as a final build file.

The reason I have some .coffee and some .js is because I'm using Bower components that have JS files, even though I'd like to init and create my custom scripts with CoffeeScript.

My first pass at this involved gulp-if which allowed me to have every script file in one gulp.src() declaration -- piping through to a the appopriate check on the extension (using gulp-if) and doing the necessary actions there. Oddly enough, that didn't pan out; kept failing saying there was a stream error; saying there was an issue with gulp-uglify(), but I could never decipher what the actual issue was -- with my gulp file or with what gulp-if said could be an issue with how a specific plugin was built. So, I then though having two different streams and then running them at the same time could work (see what I had for this so far) but then I'd be left with two completely separate builds -- which I could obviously concat after the fact, but I'm left with ugly temp files and the inability to mix in .coffee and .js files if they need to be done in a certain order.

Ideally I'd like to be able to mix my src files within whatever extension I want, call the necessary actions depending on the extension and pass through to the other items that both share. I'd appreciate any input. Thanks!

What I had so far (described above):

// Load plugins
var gulp              = require('gulp'),
    jshint            = require('gulp-jshint'),
    coffee            = require('gulp-coffee'),
    changed           = require('gulp-changed'),
    coffeelint        = require('gulp-coffeelint'),
    gulpif            = require('gulp-if'),
    uglify            = require('gulp-uglify'),
    sourcemaps        = require('gulp-sourcemaps'),
    notify            = require('gulp-notify'),
    concat            = require('gulp-concat'),
    filesize          = require('gulp-size'),
    livereload        = require('gulp-livereload'),
    duration          = require('gulp-duration'),
    gutil             = require('gulp-util'),
    merge = require('merge-stream'),
    es         = require('event-stream');

gulp.task('test', function() {
  var jsBuildDir = 'assets/js/build/';

  var coffeescript =
    gulp.src([
      'assets/js/src/_init.coffee'
    ])
    .pipe(coffee())
    .pipe(coffeelint())
    .pipe(coffeelint.reporter())
    .pipe(concat('coffee.js'))
    .pipe(uglify())
    .pipe(filesize({
      title: 'CoffeeScript:'
    }))
    .pipe(gulp.dest(jsBuildDir))
    .pipe(duration('building coffeescript files'))
    .pipe(notify({ message: 'Coffeescript task complete' }));

  var js =
    gulp.src([
      'assets/js/src/_init.js'
    ])
    .pipe(jshint({
          'boss': true,
          'sub': true,
          'evil': true,
          'browser': true,
          'globals': {
            'module': false,
            'require': true
          }
       }),
      jshint.reporter('jshint-stylish'))
    .pipe(concat('js.js'))
    .pipe(uglify())
    .pipe(gulp.dest(jsBuildDir))
    .pipe(filesize({
      title: 'Main Scripts:'
    }))
    .pipe(duration('building main JS files'))
    .pipe(notify({ message: 'Main scripts task complete' }));

    es.concat(cofeescript, js);

});

// Default task
gulp.task('default', ['scripts']);

// Watch
gulp.task('watch', function() {

  gulp.watch(['assets/js/src/**/*.js', 'assets/js/src/**/*.coffee'], ['hint-n-lint', 'scripts']);

  // Create LiveReload server
  var server = livereload();

  // Watch files in patterns below, reload on change
  gulp.watch(['assets/js/build/*']).on('change', function(file) {
    server.changed(file.path);
  });

});

Answer 1

I would do this in a 2 tasks row:

1. Process coffee files (eg: transform them to javascript)
2. Process javascript files that will wait for the coffee task to proceed before starting

My gulpfile.js would be:

var coffee_files = ['assets/js/src/*.coffee']
var js_files = ['assets/js/src/*.js']

gulp.task('coffee', function() {
    //note the return is very important here
    return gulp.src(coffee_files)
        .pipe(coffee()) //do your pipes
        //dest to the same folder assuming those are now js files
        .pipe(gulp.dest('assets/js/src')) 
})

gulp.task('javascript', ['coffee'], function() {
    return gulp.src(js_files)
        .pipe(jshint())
        .pipe(minify())
        .pipe(gulp.dest('assets/js/build'))
})

/**
* Now, `gulp` command will first process coffee files, transform them to javascript
* then javascript is executed and minifies stuff to your destination folder
*/
gulp.task('default', ['javascript'])

/**
* `gulp coffee` will only process coffee files
* `gulp javascript` will only process javascript files
* Watching files can be done like this:
*/
gulp.task('watch', function() {
    gulp.watch(coffee_files, ['javascript'])
    gulp.watch(js_files, ['javascript'])
})