Useful to debug what pug files compile if you do not have access to compiles html (with webpac for example)
pug -O '{"pretty": true}' sr-order.template.pug
Mixins with block (to wrap content inside a mixin)
How to use a json for data in commande line
Option 1
This insane mixin works:
mixin json()
- var oldbuf = buf; buf = [];
block
- var res = JSON.stringify(JSON.parse(buf.join('')));
- buf = oldbuf;
!= res
You can then call it:
+json().
[
{
"name": "ABC-Logistic",
"file": "Abc-logistic",
"link": "abc-logistic.co.jp"
}
]
And the resulting file will contain:
[{"name":"ABC-Logistic","file":"Abc-logistic","link":"abc-logistic.co.jp"}]
How to load data in a grunt base environnement
options: {
pretty: true, // Output HTML in indented style
doctype: 'html',
data: {
links: grunt.file.readJSON("app/Resources/views/mixins/_vars.json"),
},
},
#{link.title} will be available
Potentially we can load sevral data objects
How to print an attributes, only if a js value is available to feed it For example angular directive attributes ng-click... should not be printed if there has no value.
div(#{myAttributes}) just don't work #{t} nterpolation work only in the attribute ""
- var t = "la valeur de t"
- var z ="lkj"
p(class="klj" sdsd="#{t}")(title=s)(blang=z)
<p sdsd="la valeur de t" blang="lkj" class="klj"></p>
Multiline tag content
.tip.
Enter a valid
email address
such as <em>tj@vision-media.ca</em>.
Dynamic Mixin call
mixin blue
div(class="blue") Blue
block
mixin red
div(class="red") red
block
mixin para(type)
- console.log(type);
+#{type}()
div Nice dynamic mixin call !
+para('blue')
+para('red')
