定制助手与gulp-handlebars

时间:2015-11-24 07:14:14

标签: javascript node.js templates handlebars.js

我正在尝试为服务器中编译的把手创建自定义帮助程序。 我尝试过这种方法:How to precompile gulp-handlebars helpers?

如果我使用内部gulp-handlebars记录把手的版本,我会得到这个:

helpers: { blockHelperMissing: [Function],
 each: [Function],
 helperMissing: [Function],
 if: [Function],
 unless: [Function],
 log: [Function],
 lookup: [Function],
 with: [Function],
 multiply: [Function] },

所以我看到'鞋面'这是我插入的助手。但是在客户端,我要么

  

未捕获错误:缺少助手:上方

或者如果我使用符号\{{upper string}}它不起作用。谁能帮我?也许我错过了什么。

这是我的helpers.js:

// helpers.js
var handlebars  = require('handlebars');

handlebars.registerHelper('multiply', function(a,b){
   return a*b;
});

module.exports = handlebars;

这是我的gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

var wrap = require('gulp-wrap');
var declare = require('gulp-declare');
var concat = require('gulp-concat');
var gulp = require('gulp');
var handlebars = require('gulp-handlebars');

var handlebarsh = require('./app/lib/helpers.js');

gulp.task('sass', function () {
  gulp.src('./public/client/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/client/css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./public/client/scss/**/*.scss', ['sass']);
});

gulp.task('templates', function(){
  gulp.src('app/assets/client/templates/modules/*.hbs')
    .pipe(handlebars({
      handlebars: handlebarsh,
   }))
    .pipe(wrap('Handlebars.template(<%= contents %>)'))
    .pipe(declare({
      namespace: 'Orochi.templates',
      noRedeclare: true, // Avoid duplicate declarations
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('public/client/assets/templates/js/'));
});

gulp.task('watch',['templates'], function () {
    gulp.watch('app/assets/client/templates/modules/*.hbs' , ['templates']);
    gulp.watch('./public/client/scss/**/*.scss', ['sass']);
});

和模板:

<div class="row">
   <div class="animals-wrapper">
      {{#each labels}}
         <div class="animal-wrapper" animal="{{@index}}">
            <div class="animal-image" style="'background-position: ' {{multiply 2 2}}'px 0px;'"></div>
            <div class="animal-label"></div>
         </div>
      {{/each}}
   </div>
</div>

0 个答案:

没有答案