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

그래서 진짜 후 질문입니다

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

app.js, 왜 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

여기 내 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" 
    ] 
}, 

내 백본보기 느릅 나무 템플릿 직접 옥 파일을 형성 수입, 첨부 된 문자열이 당신을 위해 그런 다음 JADE 템플릿을

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

(하여 package.json에 변환하지 나머지는 처리 소요)

이 여전히 내 문제 :

Answer 2

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

jamie 지역 주민을 받아들이는 기능 지금 : 난 그냥

내가 여기 실종 일부 사용 거기에 워드 프로세서에서 :(완전히 잘못한 가정 인수로 및

이 console.info(jamie({property: 'value'}))

에 console.info(jamie)의 출력을 비교 부를 때 HTML을 반환합니다 나는이

같은 백본에 꿀꺽와 Jadeify을 사용하고