我有一个由我自己构建的yeoman-generator支持的grunt项目generator-webapp,如果有任何帮助,你可以在GitHub上找到它
咕噜咕噜的项目使我们成为了grunt-usemin这项任务.
我的项目涉及建立一个多语言网站,为了保持清洁,我决定将所有用一种语言写成的页面放在文件夹名称之后,用两个字母的短代码表示.
| project/
|--dist/
|----en/
|------index.html
|------404.html
|------...
|----fr/
|------index.html
|------404.html
|------...
这些文件由把手模板制成并使用assemble.在布局中我有usemin像这样的构建块
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
在一个完美的世界中,这将转化为
<link rel="stylesheet" href="../styles/main.css">
<script src="../scripts/vendor/modernizr.js"></script>
而是显示
<link rel="stylesheet" href="styles/main.css">
<script src="scripts/vendor/modernizr.js"></script>
这在我的情况下不太理想.相关部分Gruntfile.js看起来像这样
useminPrepare: {
options: {
dest: '<%= yeoman.dist %>'
},
html: [
'<%= yeoman.app %>/fr/{,*/}*.html',
'<%= yeoman.app %>/en/{,*/}*.html'
]
},
usemin: { …根据这个答案,我写了一个帮手
module.exports.register = function (Handlebars) {
Handlebars.registerHelper('ternary', function(test, yes, no) {
return test ? yes : no;
});
};
我确定帮助程序已加载并正在定义,但无法弄清楚使用它的语法.我尝试过使用它
<div>{{ternary(true, 'yes', 'no')}}</div>
但这会产生汇编构建错误
Warning: Parse error on line 10:
...<div>{{ternary(true, 'yes',
----------^
Expecting 'ID', 'DATA', got 'INVALID' Use --force to continue.
使用这样的帮助器的正确语法是什么？
我正在努力处理grunt-assemble grunt任务配置,如下所示:
assemble: {
options: {
flatten: false,
expand: true,
assets: '',
layout: 'default.hbs',
layoutdir: 'templates/layouts',
partials: ['templates/includes/*.hbs'],
helpers: ['templates/helpers/*.js'],
data: ['templates/data/*.{json,yml}']
},
dev: {
src: 'templates/pages/**/*.hbs',
dest: 'build/'
}
assemble.io项目模板的脚手架如下所示:
templates
??? helpers
??? includes
? ??? page-footer.hbs
? ??? page-header.hbs
? ??? scripts.hbs
??? layouts
? ??? default.hbs
??? pages
??? en
? ??? index.hbs
??? fr
? ??? index.hbs
??? index.hbs
我希望得到类似的东西:
build
??? en
? ??? index.html
??? fr
? ??? index.html
??? index.html
但相反,我得到类似的东西: …
我使用assemble.io作为一个简单的静态网站,但我遇到了{{title}}标记的问题.以下是该问题的概述.
这是我的layout.hbs:
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<!-- the body tag is used to "pull in" content from pages -->
{{> body }}
</body>
</html>
我有2个json文件用于数据:
foo1.json
{
"title": "Hello world I am title 1"
}
foo2.json
{
"title": "I am a different title"
}
我有2页:
foo1.hbs
{{#foo1 }}
{{> module1 }}
{{> module2 }}
{{> module3 }}
{{/foo1 }}
foo2.hbs
{{#foo2 }}
{{> module1 }}
{{> module2 }}
{{> module3 }}
{{/foo2 }}
我的gruntfile.js …
我正在检查这个插件进行本地化,但是在我将它包含在我的内容后应该如何使用它gruntfile.js？
它似乎有一些用法示例这里
我正在创建一个自定义的车把助手，但是Object #<Object> has no method 'fn'在通过终端进行编译时，它总是会抛出。
我的车把帮手是：
module.exports.register = function (Handlebars, opts, params) {
Handlebars.registerHelper('compimg', function (context, opts) {
var compImg = ["assets/img/icon-nope.png","assets/img/icon-check.png"];
return compImg[opts.fn(context)];
});
}
我的.hbs文件是：
{{#each checkable}}
<div class="col-md-3 col-xs-3 icon-container"><img src="{{compimg this}}"></div>
{{/each}}
我的JSON文件是：
{
"desc": "blablabla",
"checkable": [
1,
1,
1,
1
]
}
当我查看官方文档时，发现了这段代码。有人能解释到底是什么context，并options在这里？
Handlebars.registerHelper('each', function(context, options) {
var ret = "";
for(var i=0, j=context.length; i<j; i++) {
ret = ret + options.fn(context[i]);
}
return ret;
});
所有使用布局的汇编用户都知道"{{> body}}"标记了使用布局的任何页面内容的插入点.但是有可能定义多个插入点,而不是将所有内容扔到{{> body}}的位置吗？
例如,在我的页面中,我想定义一个特定的javascript,但我喜欢自定义的javascript位于页面的最底部以及javascript标签.如果它只将{{> body}}放在哪里,那么这是不可能的,因为脚本只会被附加到内容中.
换句话说,让{{> script}}或甚至可自定义的标记标记不同的插入点是有用的,并且在使用布局的页面中,这些标记是专门定义的.
以上是我理想的用例,有人知道如果这些装配支持吗？
我想使用assemble,yeoman和angularJS 创建一个站点.计划是汇编将处理内容,AngularJS将通过REST API处理动态内容.这两个兼容,这是一个很好的架构选择吗？我关注的是模板引擎Assemble使用(HandleBars)以及它是否与AngularJS兼容,因为它们似乎都使用{{}}.我只是开始调查,但我很难找到使用类似架构的人的例子.我如何与Yeoman搭建？