[英]How to use Jadeify with Gulp
首先,我的最終目標是能夠在backbone
上使用jade
模板,但這是我能想到的最佳解決方案。
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"
});
var jamie = require("../views/resultsMini.jade");
jamie
現在是一個接受本地人作為參數的函數,當被調用時將返回html
比較console.info(jamie)
和console.info(jamie({property: 'value'}))
我在這樣的骨干中使用帶有Gulp的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"
]
},
我的Backbone視圖將模板直接從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視圖的“ 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)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.