जेड फाइलों को संकलित करना

Question

मैं अपनी सभी जेड फ़ाइलों को व्यक्तिगत HTML फ़ाइलों में संकलित करने के लिए अपने ग्रंटफाइल को कॉन्फ़िगर करने का प्रयास कर रहा हूं। उदाहरण के लिए, अगर मैं निम्नलिखित स्रोत फ़ोल्डर है:

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

यहाँ मेरी Gruntfile grunt-contrib-jade उपयोग कर रहा है:

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

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन मैं इसी तरह की समस्या को हल करने की कोशिश करते समय यहां वापस आ रहा था। मैं फॉर-लूप का उपयोग कर एक जेड टेम्पलेट फ़ाइल से कई एचटीएमएल फाइलों को आउटपुट करना चाहता था। इसलिए 'फाइल' ऑब्जेक्ट का अधिक नियंत्रण चाहिए।

दो समस्याएं जो मैंने पार की और अंत में हल की, आउटपुट फ़ाइल नाम (एक जावास्क्रिप्ट ऑब्जेक्ट शाब्दिक कुंजी) सेट कर रहा था और यह सुनिश्चित कर रहा था कि इनलाइन जावास्क्रिप्ट फ़ंक्शंस तुरंत चल रहे हैं ताकि लूप चर उपलब्ध हो।

यहां टिप्पणियों के साथ मेरा पूरा स्रोत कोड है। मुझे आशा है कि यह इस पोस्ट में किसी और के लिए ठोकर खाएगा।

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 और दूसरा संभाल करने के लिए पहली फ़ाइल ऑब्जेक्ट की आवश्यकता है। अब अगर मैं इसे विभाजित नहीं करता हूं और बस प्रोजेक्ट निर्देशिका को इंगित करता हूं तो जेड कंपाइलर मेरे एनपीएम पैकेज फ़ोल्डर के अंदर खो जाता है, इसलिए यह बहुत तेज़ चलता है।

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" 
      } ] 
     } 
    }