[英]Grunt compiling Jade files
I'm trying to configure my Gruntfile to compile all of my Jade files to individual HTML files. 我正在尝试配置我的Gruntfile以将我的所有Jade文件编译为单独的HTML文件。 For example, if I have the following source folder:
例如,如果我有以下源文件夹:
source
└── templates
├── first.jade
├── second.jade
└── third.jade
Then I would expect grunt jade
to output: 然后我会期待
grunt jade
输出:
build
└── templates
├── first.html
├── second.html
└── third.html
Here's my Gruntfile using grunt-contrib-jade
: 这是我使用
grunt-contrib-jade
Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
jade: {
compile: {
options: {
client: false,
pretty: true
},
files: [ {
src: "*.jade",
dest: "build/templates/",
ext: "html",
cwd: "source/templates/"
} ]
}
},
});
grunt.loadNpmTasks("grunt-contrib-jade");
};
However, when I run the jade command I get the following errors: 但是,当我运行jade命令时,我收到以下错误:
Running "jade:compile" (jade) task
>> Source file "first.jade" not found.
>> Source file "second.jade" not found.
>> Source file "third.jade" not found.
What am I doing wrong? 我究竟做错了什么?
To complete the above answer 完成上述答案
jade: {
compile: {
options: {
client: false,
pretty: true
},
files: [ {
cwd: "app/views",
src: "**/*.jade",
dest: "build/templates",
expand: true,
ext: ".html"
} ]
}
}
So if your source is structured as so: 因此,如果您的来源结构如下:
app
└── views
└── main.jade
└── user
└── signup.jade
└── preferences.jade
grunt jade
will create the following structure grunt jade
将创建以下结构
build
└── templates
└── main.html
└── user
└── signup.html
└── preferences.html
EDIT: The grunt-contrib-jade
is deprecated. 编辑:
grunt-contrib-jade
已被弃用。 You should rather use grunt-contrib-pug
. 你应该使用
grunt-contrib-pug
。 It is exactly the same, but they had to rename jade to pug! 它完全一样,但他们不得不将玉重命名为哈巴狗!
Just in case anyone needs it. 以防任何人需要它。 Nothing above worked.
上面没有任何工作。 This is how it finally worked for me.
这就是它最终对我有用的方式。
I'm using grunt.loadNpmTasks('grunt-contrib-pug');
我正在使用
grunt.loadNpmTasks('grunt-contrib-pug');
I dunno if contrib-jade as since been deprecated but this solution works for me. 我不知道如果贡献玉已被弃用,但这个解决方案适合我。 I need the first file object to handle just the index.jade and the 2nd to deal with the templates.
我需要第一个文件对象来处理index.jade和第二个来处理模板。 Now if I don't split it up and just point to the project directory the jade compiler gets lost inside my npm package folder so this runs much faster.
现在,如果我不拆分并只指向项目目录,那么jade编译器会在我的npm包文件夹中丢失,因此运行速度要快得多。
pug: {
compile: {
options: {
client: false,
pretty: true,
data: {
debug: false
}
},
files: [
{
'dist/index.html': ['index.jade']
},
{
src: "templates/*.jade",
dest: "dist",
expand: true,
ext: ".html"
} ]
}
}
I know this is an old post but I kept coming back here whilst trying to solve a similar problem. 我知道这是一个老帖子,但我一直在回到这里,同时试图解决类似的问题。 I wanted to output multiple html files from a single jade template file using a for-loop.
我想使用for循环从单个jade模板文件输出多个html文件。 So needed greater control of the 'files' object.
因此需要更好地控制'文件'对象。
The two problems I came across and eventually solved, was setting the output filename (a javascript object literal KEY) and making sure inline javascript functions are run immediately so that the loop variables are available. 我遇到并最终解决的两个问题是设置输出文件名(javascript对象文字KEY)并确保立即运行内联javascript函数以便循环变量可用。
Here is my full source code with comments. 这是我的完整源代码和评论。 I hope this is of use to anyone else stumbling across this post.
我希望这对任何绊倒这篇文章的人都有用。
Gruntfile.js: Gruntfile.js:
module.exports = function(grunt) {
// Create basic grunt config (e.g. watch files)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
grunt: { files: ['Gruntfile.js'] },
jade: {
files: 'src/*.jade',
tasks: ['jade']
}
}
});
// Load json to populate jade templates and build loop
var json = grunt.file.readJSON('test.json');
for(var i = 0; i < json.length; i++) {
var obj = json[i];
// For each json item create a new jade task with a custom 'target' name.
// Because a custom target is provided don't nest options/data/file parameters
// in another target like 'compile' as grunt wont't be able to find them
// Make sure that functions are called using immediate invocation or the variables will be lost
// http://stackoverflow.com/questions/939386/immediate-function-invocation-syntax
grunt.config(['jade', obj.filename], {
options: {
// Pass data to the jade template
data: (function(dest, src) {
return {
myJadeName: obj.myname,
from: src,
to: dest
};
}()) // <-- n.b. using() for immediate invocation
},
// Add files using custom function
files: (function() {
var files = {};
files['build/' + obj.filename + '.html'] = 'src/index.jade';
return files;
}()) // <-- n.b. using () for immediate invocation
});
}
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-watch');
// Register all the jade tasks using top level 'jade' task
// You can also run subtasks using the target name e.g. 'jade:cats'
grunt.registerTask('default', ['jade', 'watch']);
};
src/index.jade: SRC / index.jade:
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 #{myJadeName} - node template engine
#container.col
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
test.json: test.json:
[{
"id" : "1",
"filename" : "cats",
"tid" : "2016-01-01 23:35",
"myname": "Cat Lady"
},
{
"id" : "2",
"filename" : "dogs",
"tid" : "2016-01-01 23:45",
"myname": "Dog Man"
}]
After running 'grunt' the output should be: 运行'grunt'后输出应为:
build/cats.html
build/dogs.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.