javascript Grunt 编译 Jade 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17798358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Grunt compiling Jade files
提问by LandonSchropp
I'm trying to configure my Gruntfile to compile all of my Jade files to individual HTML files. For example, if I have the following source folder:
我正在尝试配置 Gruntfile 以将所有 Jade 文件编译为单个 HTML 文件。例如，如果我有以下源文件夹：
source
└── templates
?? ├── first.jade
?? ├── second.jade
?? └── third.jade
Then I would expect grunt jadeto output:
然后我希望grunt jade输出：
build
└── templates
?? ├── first.html
?? ├── second.html
?? └── third.html
Here's my Gruntfile using grunt-contrib-jade:
这是我的 Gruntfile 使用grunt-contrib-jade：
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?
我究竟做错了什么？
回答by Slobo
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 jadewill create the following structure
grunt jade将创建以下结构
build
└── templates
└── main.html
└── user
└── signup.html
└── preferences.html
EDIT:
The grunt-contrib-jadeis deprecated. You should rather use grunt-contrib-pug. It is exactly the same, but they had to rename jade to pug!
编辑：grunt-contrib-jade已弃用。你应该使用grunt-contrib-pug. 一模一样，但他们不得不将玉重命名为哈巴狗！
回答by Mike Kerr
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');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. 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.
我grunt.loadNpmTasks('grunt-contrib-pug');不知道 contrib-jade 是否已被弃用，但此解决方案对我有用。我需要第一个文件对象来处理 index.jade 和第二个来处理模板。现在，如果我不将其拆分并仅指向项目目录，则 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"
} ]
}
}
回答by Wayne Shelley
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. So needed greater control of the 'files' object.
我知道这是一篇旧帖子，但我在尝试解决类似问题的同时不断回到这里。我想使用 for 循环从单个 jade 模板文件输出多个 html 文件。因此需要更好地控制“文件”对象。
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:
测试.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
