How to use Jadeify with Gulp

Question

First off, my ultimate goal is to be able to use jade templates with backbone But this is the best solution I could come up with.

browserify.gulp

//appoligies for including it all.
gulp.task('browserify', function () {
    var bundler = browserify({
        // Required watchify args
        cache: {}, packageCache: {}, fullPaths: true,
        // Specify the entry point of your app
        entries: ['./src/site/js/app.js'],
        // Add file extentions to make optional in your requires
        extensions: ['.js'],
        // Enable source maps!
        debug: true
    });

    var bundle = function () {
        // Log when bundling starts
        bundleLogger.start();

        return bundler
            .transform(require('jadeify'))
            .bundle()
            // Report compile errors
            .on('error', handleErrors)
            // Use vinyl-source-stream to make the
            // stream gulp compatible. Specifiy the
            // desired output filename here.
            .pipe(source('main.js'))
            // Specify the output destination
            .pipe(gulp.dest('./public/js'))
            // Log when bundling completes!
            .on('end', bundleLogger.end);
    };

    if (global.isWatching) {
        bundler = watchify(bundler);
        // Rebundle with watchify on changes.
        bundler.on('update', bundle);
    }

    return bundle();
});

Jade.gulp

gulp.task('jade', function () {
    return gulp.src('./src/site/views/*.jade')
        .on('error', handleErrors)
        .pipe(jade())
        .pipe(gulp.dest('public/views/templates'));
});

app.js

//the main angular file
var jamie = require("../views/resultsMini.jade");
console.info(jamie);

//outputs: 
function template(locals) {
    var buf = [];
    var jade_mixins = {};
    var jade_interp;

    buf.push("<div>Results List</div>");;return buf.join("");
}

So the real quesiton is, why does jamie not return me the html? I assume I've just done it completely wrong :(

Is there some usage I am missing here? From the docs: https://github.com/domenic/jadeify

var template = require("./template.jade");

document.getElementById("my-thing").innerHTML = template({
    localVar: "value",
    anotherOne: "another value"
});

Answer 1

I'm using Jadeify with Gulp in Backbone like this

Here is my browserify task:

Please note there is absolutely NO reference to Jadeify in this task at all. I'm just showing you the task to demonstrate it clearly.

var gulp          = require('gulp');
var browserify    = require('browserify');
var source          = require('vinyl-source-stream');
var browserify    = require('browserify');
var gulpif          = require('gulp-if');
var connect         = require('gulp-connect');
var streamify     = require('gulp-streamify');
var uglify          = require('gulp-uglify');

var watchify      = require('watchify');
var bundleLogger  = require('../util/bundleLogger');
var handleErrors  = require('../util/handleErrors');
var strip         = require('gulp-strip-debug');
var print         = require("gulp-print");
var datapaths     = require("./datapaths");

gulp.task('js', ['environmentCheck'], function() {

  console.log('GULP: Starting js task');

  var bundler = browserify({
    // Required watchify args
    cache: {}, packageCache: {}, fullPaths: true,
    // Browserify Options
    entries:    ['./core/js/core.js'],
    extensions: ['.coffee', '.hbs'],
    debug:      global.ENV === 'development'
  });

  var bundle = function() 
  {
    bundleLogger.start();

    return bundler
      .bundle()
      .on('error', handleErrors)
      .pipe(source('bundle.js'))
      // remove console.logs and such
      .pipe(gulpif( global.ENV === 'production', streamify( strip() )))
      // uglify JS and obfuscate in produciton mode only
      .pipe(gulpif( global.ENV === 'production', streamify(uglify({ mangle: global.ENV === 'production' }))))
      .pipe(print())
      .pipe(gulp.dest(global.outputDir + datapaths.dataPath + '/js'))
      // .pipe(connect.reload())
      .on('end', bundleLogger.end);
  };

  // if(global.isWatching) {
  //   bundler = watchify(bundler);
  //   bundler.on('update', bundle);
  // }

  return bundle();
});

gulp.task('js_prod', ['setProduction'], function() 
{
  gulp.start('js');
});

In my package.json I have the Jadeify transform applied.

"browserify": {
  "transform": [
    "jadeify"
  ]
},

My Backbone view wich imports the template directly form the jade file, no strings attached (the transform in the package.json takes care of the rest)

var tag_item_template = require("../../../../../jade/templates/itemviews/tag_item_template.jade");

App.Views.TagView = Marionette.ItemView.extend(
{
    model: models.getTagModel(),
    template: tag_item_template,

    templateHelpers: function()
    {
        return {
            i18n_tag:           i18n.getI18NString('tag'),
            title:              functions.getModelValueSafely(this.model, 'title'),
        }
    },

    ui: {
        'titleInput':       '.input-title',
    },

    events: {
        'click .interact-delete':   'kill',
        'click .interact-save':     'save',
        'keyup .form-input':        'catchEnter'
    },

    catchEnter: function(e)
    {
        if(e.keyCode === 13) // enter key
        {
            this.save();
        }
    },

    onShow: function()
    {
        console.log('TagView ::: onShow');
    },

    save: function()
    {
        console.log('TagView ::: save');

        var new_title           = this.ui.titleInput.val();

        this.model.set('title', new_title);

        functions.saveModel(this.model);
    },

    kill: function()
    {
        functions.destroyModel(this.model);
    },
});

Then the JADE template for you to see the variables that are being passed in by the "templateHelpers" function of the Backbone view:

include ../mixins

div.focus-area-element.list-element.single-list-item
    div.inner-content
        div.list-item-actions.absolute-position
            +ui-icon-button('ok', 'fontello', 'save', 'success')
            +ui-icon-button('cancel', 'fontello', 'delete', 'error')

        +ui-icon-list-item('tag', 'ui8')

        +ui-input('text', i18n_tag, title, 'title', true)

Answer 2

var jamie = require("../views/resultsMini.jade");

jamie is now a function which accepts locals as arguments and will return html when called

compare the output of console.info(jamie) to console.info(jamie({property: 'value'}))