Grunt编译Jade文件
我正在尝试configuration我的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"); };
但是，当我运行翡翠命令，我得到以下错误：
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以下结构
build └── templates └── main.html └── user └── signup.html └── preferences.html
编辑： grunt-contrib-jade已经被弃用了。 你应该使用grunt-contrib-pug 。 这是完全一样的，但他们不得不把玉改名为哈巴狗！
以防万一需要它。 没有以上工作。 这是最终为我工作的方式。
我正在使用grunt.loadNpmTasks('grunt-contrib-pug'); 我不知道如果贡献玉从那时起被弃用，但这个解决scheme适用于我。 我需要第一个文件对象来处理index.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" } ] } }
我知道这是一个老post，但我一直试图解决类似的问题，一直回到这里。 我想使用for-loop从一个单独的模板文件输出多个html文件。 所以需要对“文件”对象进行更好的控制。
我碰到并最终解决的两个问题是设置输出文件名（JavaScript对象字面值KEY），并确保内联JavaScript函数立即运行，以便循环variables可用。
这里是我的完整源代码的评论。 我希望这对任何其他人在这篇文章中磕磕绊绊都是有用的。
Gruntfile.js：
module.exports = function(grunt) { // Create basic grunt config (eg 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 }; }()) // <-- nb using() for immediate invocation }, // Add files using custom function files: (function() { var files = {}; files['build/' + obj.filename + '.html'] = 'src/index.jade'; return files; }()) // <-- nb 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 eg '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