Grunt編譯Jade文件

Question

我試圖配置我的Gruntfile以將我所有的Jade文件編譯爲單獨的HTML文件。舉例來說，如果我有以下的源文件夾：是一個使用grunt-contrib-jade我Gruntfile

build 
└── templates 
   ├── first.html 
   ├── second.html 
   └── third.html 

這裏：

source 
└── templates 
   ├── first.jade 
   ├── second.jade 
   └── third.jade 

然後我希望grunt 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"); 
}; 

然而，當我運行玉石命令我得到以下錯誤：

Running "jade:compile" (jade) task 
>> Source file "first.jade" not found. 
>> Source file "second.jade" not found. 
>> Source file "third.jade" not found. 

我在做什麼錯？

Answer 1

要完成上面的回答

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。它完全一樣，但他們不得不將玉改名爲帕格！

Answer 2

我知道這是一箇舊帖子，但我一直試圖解決類似的問題，但我一直在這裏回來。我想使用for-loop從單個模板文件輸出多個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" 
}] 

運行 '咕嚕' 後的輸出應爲：

build/cats.html 
build/dogs.html 

Answer 3

以防萬一需要它。上面沒有任何工作這是它最終爲我工作的方式。

我正在使用grunt.loadNpmTasks('grunt-contrib-pug');我不知道如果contrib-jade已被棄用，但此解決方案適用於我。我需要第一個文件對象來處理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" 
      } ] 
     } 
    }