javascript - 如何在 Gulp 中使用 Jadeify

Question

首先，我的最终目标是能够将 jade 模板与 backbone 一起使用，但这是我能想到的最佳解决方案。

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("");
}

所以真正的问题是，为什么 jamie 不返回我的 html？我想我完全错了:(

我在这里缺少一些用法吗？来自文档:https://github.com/domenic/jadeify

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

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

Answer 1

我像这样在 Backbone 中使用 Jadeify 和 Gulp

这是我的 browserify 任务:

请注意，此任务中绝对没有对 Jadeify 的引用。我只是向您展示任务以清楚地展示它。

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');
});

在我的 package.json 中应用了 Jadeify 转换。

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

我的 Backbone View 直接从 jade 文件导入模板，没有附加任何字符串(package.json 中的转换负责其余部分)

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);
    },
});

然后是 JADE 模板，您可以看到由 Backbone View 的“templateHelpers”函数传入的变量:

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)