如何使用Jadeify和Gulp

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

所以真正的quesiton是，爲什麼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

我在骨幹使用Jadeify與咕嘟咕嘟這樣

這裏是我的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" 
    ] 
}, 

我的骨幹視圖至極導入模板直接形成的玉石文件，沒有任何附加條件（中的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); 
    }, 
}); 

則玉模板您看到正在傳遞的變量由骨幹視圖的「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) 

Answer 2

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

jamie是接受當地人的功能作爲參數並在調用時返回html

比較輸出 console.info(jamie)到console.info(jamie({property: 'value'}))