Wrong filename is passed to transform function (jadeify transform fails).

[oleggromov]

Hi! I want a simple configuration: require jadeify-ed jade templates in my clientside js code. In order to get this I've tried to use jadeify transform, which works perfectly in the command line (browserify -t jadeify app.js) with require('template.jade') in app.js.

Buy trying to make it work with gulp-browserify I've found a strange error and cannot guess where actually does it come from.

Trying to use simple transform jadeify in my gulpfile.js:

gulp.task('js', function() {
    gulp.src('client/app.js')
        .pipe(browserify({
            transform: ['jadeify']
        }))
        .pipe(gulp.dest('static'))
});

Jadeify is installed and perfectly require-d, but fails because it gets wrong file name fake_XXXXXX.js instead of template.jade. I've crawled the sources trying to find a fix, but could find nothing.

Maybe module-deps creates such strange filenames?

[armchairdj]

I'm seeing the same issue.

[ghost]

@oleggromov: if You found a solution, please share!)

[spikebrehm]

Also curious about this. From whence does the fake_XXXXX.js come?

[shuhei]

Hi guys, this is plugin is blacklisted by Gulp team. They suggest to use browserify directly with vinyl-source-stream. That's why it's not maintained now.

As far as I can recollect, fake_XXXX.js comes from browserify when it gets a stream as input. gulp-browserify passes stream to browserify when it is piped files with contents. To pass only file paths to browserify, you can set { read: false } option to gulp.src().

[sogko]

Hi, like @shuhei pointed out, gulp-browserify is not being maintained anymore.

@oleggromov Could you share a gist of app.js and other files involved?

In the mean time, here is a gulp recipe to translate the command browserify -t jadeify app.js used in the browserify CLI to one using browserify npm module in gulpfile.js (with the help of vinyl-transform)

var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var jadeify = require('jadeify');

gulp.task('build', function () {

  var browserified = transform(function(filename) {
    // in this case, filename = <full_path_to>/app.js
    return browserify(filename)
      // -t jadeify
      .transform(jadeify)
      .bundle();
      // the vanilla `browserify` module has excellent documentation on the available API and how it corresponds to the CLI options: https://github.com/substack/node-browserify#methods
  });

  return gulp.src(['./app.js']) // or you can use glob patterns to create a bundle for each file in ./src/*.js for example
    .pipe(browserified)
    .pipe(gulp.dest('./static/')); // will output the bundle in ./static/app.js
});
gulp.task('default', ['build']);

Notes: vinyl-transform wraps the regular NodeJS Readable Stream given by browserify.bundle() and convert it into a vinyl file object, while taking care of both streaming and buffered instances

vinyl-source-stream gives out only streaming vinyl file object, and would require vinyl-buffer to convert it to a buffered vinyl file object if needed. In this case we do not really need it but someone uninitiated to streams and gulp vinyl file objects need to be aware of.

[vonKristoff]

hey @sogko, I have read your nice article, https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623 and understand streams and buffers and gulp a lot better now .. BUT I still cannot get jadeify to work. I placed the whole code (above) into a new clean gulp project, and I get the error:: Error: write after end If i remove the line .transform(jadeify) then the build works - but obvs thats no good to any of us. Please give me some insight!

[vonKristoff]

I found a post where by removing .transform(jadeify) and by putting this in your project.json file instead: "browserify": { "transform": [ "jadeify" ] } Does seem to work - but why. I dont know.