Yeoman वर्कफ़्लो

Question

का उपयोग कर सीएसएस फ़ाइलों को कहां जोड़ना है मेरे पास Yeoman का उपयोग करके एक कोणीय सेटअप है। मेरे main.html (index.html पर लोड किया गया दृश्य) के तहत, मैंने अपने शैलियों फ़ोल्डर में एक सीएसएस फ़ाइल संदर्भित किया है।

मैं निर्माण टिप्पणियों से घेर लिया, इतना है कि यह घुरघुराना द्वारा उठाया जा सकता है, जबकि कम से कम:

<!-- build:css({.tmp,app}) styles/calendar.css --> 
<link rel="stylesheet" href="styles/fullcalendar.css" /> 
<!-- endbuild --> 

हालांकि, जब मैं (मूल Yeoman घुरघुराना विन्यास के साथ) घुरघुराना का उपयोग कर निर्माण, ऐसा प्रतीत नहीं होता calendar.css फ़ाइल बनाने के लिए। मुझे संदेह है कि ऐसा इसलिए हो सकता है क्योंकि main.html फ़ाइल दृश्य/main.html के भीतर है।

मेरी घुरघुराना फ़ाइल से:

usemin: { 
    html: ['<%= yeoman.dist %>/{,*/}*.html'], 
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
    options: { 
    dirs: ['<%= yeoman.dist %>'] 
    } 
}, 

...

cssmin: { 
    // By default, your `index.html` <!-- Usemin Block --> will take care of 
    // minification. This option is pre-configured if you do not wish to use 
    // Usemin blocks. 
    // dist: { 
    // files: { 
    //  '<%= yeoman.dist %>/styles/main.css': [ 
    //  '.tmp/styles/{,*/}*.css', 
    //  '<%= yeoman.app %>/styles/{,*/}*.css' 
    //  ] 
    // } 
    // } 
}, 

यह देखा गया निर्देशिका के भीतर करने के लिए नहीं लगती है। मुझे संदेह है कि मैं वर्कफ़्लो का गलत इस्तेमाल कर रहा हूं।

किसी एक दृश्य के लिए विशिष्ट सीएसएस फ़ाइल कैसे शामिल करता है? इसके अलावा, सीएसएसआईएम ब्लॉक में टिप्पणियों का क्या अर्थ है? धन्यवाद!

Answer 1

मुझे जवाब मिल गया है!

Gruntfile.js में थोड़ा और कॉन्फ़िगरेशन आवश्यक है, क्योंकि आप एक कस्टम वर्कफ़्लो का उपयोग कर रहे हैं। (अगर आपने पहले ही इन्हें किया है तो अनदेखा करें)।

सबसे पहले, प्रतिलिपि कार्य को app/views निर्देशिका को dist/views पर कॉपी करने के लिए अपडेट करने की आवश्यकता है। यह एक आसान पर्याप्त फिक्स है:

copy: { 
    dist: { 
     files: [{ 
      expand: true, 
      dot: true, 
      cwd: '<%= yeoman.app %>', 
      dest: '<%= yeoman.dist %>', 
      src: [ 
       '*.{ico,png,txt}', 
       '.htaccess', 
       'images/{,*/}*.{webp,gif}', 
       'styles/fonts/*', 
       'views/*' 
      ] 
     }] 
    }, 
    // ... 
} 

कूल कूल। अब, useminPrepare, जो आपके सामान की प्रतिलिपि बनाने से पहले चलता है, दृश्य निर्देशिका के बारे में भी जानना आवश्यक है।

useminPrepare: { 
    options: { 
     dest: '<%= yeoman.dist %>' 
    }, 
    html: [ 
     '<%= yeoman.app %>/index.html', 
     '<%= yeoman.app %>/views/*.html' 
    ] 
}, 

Woot woot! बस!

अगर आप कहीं भी अटक जाते हैं तो मुझे बताएं!