"Error: write after end" When Using Coffeeify - coffeescript

Question

I'm just starting with Browserify and Gulp, and I'm having a little trouble covering all the bases that were previously covered by Grunt and Bower. Specifically, I can't get the two to work with Coffeeify. I could easily use a workflow where I convert the .coffee files to .js first, then bundle these files with Browserify; I am keeping around my "coffee" task anyway to check the resulting JavaScript source code. However, as I'm sure Coffeeify is already optimized for this task, I would rather use that instead.
I am getting "Error: write after end" whenever I try to transform the bundle with Coffeeify. I have tried omitting the extension and specifying it in Browserify's options; using Browserify's built-in "transform" option (commented out here), which isn't present in Browserify's API docs but which I saw in some StackOverflow questions; and using Browserify's ".add()" function (also commented out here), but nothing seems to work. I have tried using coffeeify as a function, with quotes and without quotes.
I am having trouble searching, probably because Browserify's API is in early stages and therefore changing a lot. I have successfully used Coffeeify from the command line, in the way specified in the GitHub repo.
var gulp = require('gulp');
var rename = require('gulp-rename');
var browserify = require('browserify');
var coffeeify = require('coffeeify');
var transform = require('vinyl-transform');
gulp.task('browserify', function() {
return gulp.src('app/modules/main/coffee/app.coffee', {base: './'})
.pipe(transform(function(filename) {
return browserify({
entries: filename,
debug: true,
// transform: ['coffeeify'],
extensions: ['.coffee']
})
// .add(filename)
.transform('coffeeify')
.bundle();
}))
.pipe(rename(function(path) {
path.dirname = '',
path.basename = 'index',
path.ext = '.js'
}))
.pipe(gulp.dest(''));
});
Am I missing something silly? Does Coffeeify not work with vinyl-transform, and should I use vinyl-source-stream instead? Do I have the order wrong? Why isn't Coffeeify working in my Gulp task?

Answer 1

I have not used coffeeify, so this may not apply, but when I was running some shell commands, the return command in gulp was trying to execute before all of the shell commands were finished. It was like the first shell command returned good, so gulp tried to move on, and then the second shell command tried to return and gulp said no.
try this...
var gulp = require('gulp');
var rename = require('gulp-rename');
var browserify = require('browserify');
var coffeeify = require('coffeeify');
var transform = require('vinyl-transform');
gulp.task('browserify', function() {
gulp.src('app/modules/main/coffee/app.coffee', {base: './'})
.pipe(transform(function(filename) {
return browserify({
entries: filename,
debug: true,
// transform: ['coffeeify'],
extensions: ['.coffee']
})
// .add(filename)
.transform('coffeeify')
.bundle();
}))
.pipe(rename(function(path) {
path.dirname = '',
path.basename = 'index',
path.ext = '.js'
}))
.pipe(gulp.dest(''));
return gulp.src('');
});

Answer 2

Here's an abridged version of what I'm doing in my Browserify Gulp task. Note that I'm using gulp-browserify instead of browserify.
gulp = require 'gulp'
concat = require 'gulp-concat'
browserify = require 'gulp-browserify'
gulp.task 'coffee', ->
gulp.src( '_assets/js/src/**/*.coffee', read: false )
.pipe browserify( transform: ['coffeeify'], extensions: ['.coffee'] )
.pipe concat( 'app.js' )
.pipe gulp.dest( '_assets/js/dist/' )
You probably don't need the concat() since you're only processing one file, so the equivalent JS for your specific case would probably look something like this:
var gulp = require( 'gulp' );
var rename = require( 'gulp-rename' );
var browserify = require( 'gulp-browserify' );
gulp.task( 'browserify', function() {
return gulp.src( 'app/modules/main/coffee/app.coffee', { read: false, base: './' } )
.pipe( browserify( {
debug: true,
transform: ['coffeeify'],
extensions: ['.coffee']
} ) )
.pipe( rename( {
dirname: '',
basename: 'index',
extname: '.js'
} ) )
.pipe( gulp.dest( '' ) );
} );
An alternative method where you continue to use the base browserify package would be:
var gulp = require( 'gulp' );
var source = require( 'vinyl-source-stream' );
var browserify = require( 'browserify' );
gulp.task( 'browserify', function() {
return browserify( {
debug: true,
entries: ['app/modules/main/coffee/app.coffee'],
transform: ['coffeeify'],
extensions: ['.coffee']
} )
.bundle()
.pipe( source( 'index.js' ) )
.pipe( gulp.dest( './' ) );
} );
I haven't tested any of this but hopefully one of those two examples will work for you, or at least point you in the right direction.