[英]Grunt compiling Jade files
我正在嘗試配置我的Gruntfile以將我的所有Jade文件編譯為單獨的HTML文件。 例如,如果我有以下源文件夾:
source
└── templates
├── first.jade
├── second.jade
└── third.jade
然后我會期待grunt jade
輸出:
build
└── templates
├── first.html
├── second.html
└── third.html
這是我使用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");
};
但是,當我運行jade命令時,我收到以下錯誤:
Running "jade:compile" (jade) task
>> Source file "first.jade" not found.
>> Source file "second.jade" not found.
>> Source file "third.jade" not found.
我究竟做錯了什么?
完成上述答案
jade: {
compile: {
options: {
client: false,
pretty: true
},
files: [ {
cwd: "app/views",
src: "**/*.jade",
dest: "build/templates",
expand: true,
ext: ".html"
} ]
}
}
因此,如果您的來源結構如下:
app
└── views
└── main.jade
└── user
└── signup.jade
└── preferences.jade
grunt jade
將創建以下結構
build
└── templates
└── main.html
└── user
└── signup.html
└── preferences.html
編輯: grunt-contrib-jade
已被棄用。 你應該使用grunt-contrib-pug
。 它完全一樣,但他們不得不將玉重命名為哈巴狗!
以防任何人需要它。 上面沒有任何工作。 這就是它最終對我有用的方式。
我正在使用grunt.loadNpmTasks('grunt-contrib-pug');
我不知道如果貢獻玉已被棄用,但這個解決方案適合我。 我需要第一個文件對象來處理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"
} ]
}
}
我知道這是一個老帖子,但我一直在回到這里,同時試圖解決類似的問題。 我想使用for循環從單個jade模板文件輸出多個html文件。 因此需要更好地控制'文件'對象。
我遇到並最終解決的兩個問題是設置輸出文件名(javascript對象文字KEY)並確保立即運行內聯javascript函數以便循環變量可用。
這是我的完整源代碼和評論。 我希望這對任何絆倒這篇文章的人都有用。
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:
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:
[{
"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"
}]
運行'grunt'后輸出應為:
build/cats.html
build/dogs.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.