अलग-अलग सेटअप के लिए ग्रंट जेनरेट करें index.html बनाएं

208

मैं अपने वेब के लिए ग्रंट को एक निर्माण उपकरण के रूप में उपयोग करने की कोशिश कर रहा हूं।

मैं कम से कम दो सेटअप करना चाहता हूं:

I. विकास सेटअप - अलग-अलग फ़ाइलों से लोड स्क्रिप्ट्स, बिना संघनन,

इसलिए मेरा index.html कुछ इस तरह दिखाई देगा:

<!DOCTYPE html>
<html>
    <head>
        <script src="js/module1.js" />
        <script src="js/module2.js" />
        <script src="js/module3.js" />
        ...
    </head>
    <body></body>
</html>

द्वितीय। उत्पादन सेटअप - मेरी स्क्रिप्ट्स को एक फ़ाइल में संक्षिप्त और संक्षिप्त करके लोड करें,

index.html के अनुसार तदनुसार:

<!DOCTYPE html>
<html>
    <head>
        <script src="js/MyApp-all.min.js" />
    </head>
    <body></body>
</html>

सवाल यह है कि जब मैं दौड़ता हूं grunt devया मैं कॉन्फ़िगरेशन पर निर्भर करता हूं, तो मैं इन सूचकांक को कैसे बना सकता हूं grunt prod?

या हो सकता है कि मैं गलत दिशा में खुदाई कर रहा हूं और इसे हमेशा उत्पन्न करना आसान होगा, MyApp-all.min.jsलेकिन इसके अंदर मेरी सभी लिपियों (संक्षिप्त) या एक लोडर स्क्रिप्ट को डाल दें जो अलग-अलग फ़ाइलों से उन लिपियों को अतुल्यकालिक रूप से लोड करता है?

आप इसे कैसे करते हैं, दोस्तों?

javascript  build  build-automation  gruntjs 
— दिमित्री पश्केविच
स्रोत
3
येओमन टूल आज़माएं, जिसमें एक 'usemin' कार्य शामिल है जो आपको एक करता है। इसके अलावा, Yeamon जनरेटर में बहुत सारे "अच्छे अभ्यास" शामिल हैं जो सीखने में आसान हैं जो एक नए उपकरण का उपयोग करते समय सीखना मुश्किल है।
— एरिकसोनारॉन

जवाबों:

161

मैंने हाल ही में इन ग्रन्ट v0.4.0संगत कार्यों की खोज की है:

  • घुरघुराना-preprocess

    प्रीप्रोसेस npm मॉड्यूल के आसपास ग्रंट कार्य।

  • घुरघुराना-env

    भविष्य के कार्यों के लिए पर्यावरण कॉन्फ़िगरेशन को स्वचालित करने के लिए ग्रंट कार्य।

नीचे मेरे से स्निपेट्स हैं Gruntfile.js।

ईएनवी सेटअप:

env : {

    options : {

        /* Shared Options Hash */
        //globalOption : 'foo'

    },

    dev: {

        NODE_ENV : 'DEVELOPMENT'

    },

    prod : {

        NODE_ENV : 'PRODUCTION'

    }

},

preprocess:

preprocess : {

    dev : {

        src : './src/tmpl/index.html',
        dest : './dev/index.html'

    },

    prod : {

        src : './src/tmpl/index.html',
        dest : '../<%= pkg.version %>/<%= now %>/<%= ver %>/index.html',
        options : {

            context : {
                name : '<%= pkg.name %>',
                version : '<%= pkg.version %>',
                now : '<%= now %>',
                ver : '<%= ver %>'
            }

        }

    }

}

कार्य:

grunt.registerTask('default', ['jshint']);

grunt.registerTask('dev', ['jshint', 'env:dev', 'clean:dev', 'preprocess:dev']);

grunt.registerTask('prod', ['jshint', 'env:prod', 'clean:prod', 'uglify:prod', 'cssmin:prod', 'copy:prod', 'preprocess:prod']);

और /src/tmpl/index.htmlटेम्पलेट फ़ाइल में (उदाहरण के लिए):

<!-- @if NODE_ENV == 'DEVELOPMENT' -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="../src/js/foo1.js"></script>
    <script src="../src/js/foo2.js"></script>
    <script src="../src/js/jquery.blah.js"></script>
    <script src="../src/js/jquery.billy.js"></script>
    <script src="../src/js/jquery.jenkins.js"></script>

<!-- @endif -->

<!-- @if NODE_ENV == 'PRODUCTION' -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="http://cdn.foo.com/<!-- @echo name -->/<!-- @echo version -->/<!-- @echo now -->/<!-- @echo ver -->/js/<!-- @echo name -->.min.js"></script>

<!-- @endif -->

मुझे यकीन है कि मेरा सेटअप अधिकांश लोगों से अलग है, और ऊपर की उपयोगिता आपकी स्थिति पर निर्भर करेगी। मेरे लिए, जबकि यह एक बहुत ही मामूली कोड है, योमन ग्रंट-यूसमिन व्यक्तिगत रूप से मेरी जरूरत से ज्यादा मजबूत है।

नोट: मैंने अभी उपरोक्त सूचीबद्ध कार्यों की खोज की है, इसलिए मुझे एक सुविधा याद आ रही है और / या मेरी प्रक्रिया सड़क को बदल सकती है। अभी के लिए, मैं उस सादगी और सुविधाओं से प्यार कर रहा हूं जो ग्रंट-प्रीप्रोसेस और ग्रंट-एनव को पेश करनी है। :)

जनवरी 2014 अपडेट:

एक डाउन वोट से प्रेरित ...

जब मैंने इस उत्तर को पोस्ट किया तो ग्रंट के लिए कई विकल्प नहीं थे 0.4.xजो एक समाधान की पेशकश करते थे जो मेरी आवश्यकताओं के लिए काम करता था। अब, महीनों बाद, मैं अनुमान लगाऊंगा कि वहाँ और भी विकल्प हैं जो कि मैंने यहाँ पोस्ट किए हैं उससे बेहतर हो सकता है। हालांकि मैं अभी भी व्यक्तिगत रूप से उपयोग करता हूं, और अपने निर्माण के लिए इस तकनीक का उपयोग करने का आनंद लेता हूं, मैं पूछता हूं कि भविष्य के पाठक दिए गए अन्य उत्तरों को पढ़ने और सभी विकल्पों पर शोध करने के लिए समय लेते हैं। यदि आप एक बेहतर समाधान पाते हैं, तो कृपया अपना उत्तर यहां दें।

फ़रवरी 2014 अपडेट:

मुझे यकीन नहीं है कि यह किसी के लिए भी मददगार होगा, लेकिन मैंने इस डेमो रिपॉजिटरी को GitHub पर बनाया है जो उस तकनीक (ओं) का उपयोग करके एक पूर्ण (और अधिक जटिल सेटअप) दिखाता है जो मैंने ऊपर उल्लिखित किया है।

— mhulse
स्रोत
धन्यवाद, मैं इसे देखूंगा!
— दिमित्री पश्केविच
3
आपके समाधान ने मुझे एक दीवार के खिलाफ मेरे सिर को काटने के घंटों को बचाया। धन्यवाद।
— sthomps
1
@sthomps इसे मदद मिली खुशी! जब से मैंने उन कार्यों की खोज की है, मैं वर्कफ़्लो को प्यार कर रहा हूँ। FYI करें, मैंने इस प्रक्रिया में एक मामूली बदलाव किया है ... अपने html टेम्पलेट्स में कई संदर्भ चर पास करने के बजाय, मैंने एक ऐसा path : '/<%= pkg.name %>/dist/<%= pkg.version %>/<%= now %>/<%= ver %>'संस्करण पारित करने का विकल्प चुना, जो सभी vars (जो मेरा बिल्ड पथ है) को समाप्‍त करता है । मेरे टेम्पलेट पर मेरे पास होगा <script src="http://cdn.foo.com<!-- @echo path -->/js/bulldog.min.js"></script>:। वैसे भी, मुझे खुशी है कि मैं आपको कुछ समय बचाने में सक्षम था! : D
— mhulse
4
आप केवल ग्रंट-टेम्प्लेट का उपयोग करके एक ही काम कर सकते हैं , बस dataदेव / उत्पादों के लिए एक अलग ऑब्जेक्ट में पास करके ।
— मथियास बिएनेंस
2
यार मैं इस समाधान से प्यार करता हूँ .. यह साफ, पठनीय है और अधिक इंजीनियर नहीं है।
— गौरांग पटेल
34

मैं अपने समाधान के साथ आया हूँ। अभी तक पॉलिश नहीं हुई है लेकिन मुझे लगता है कि मैं उस दिशा में आगे बढ़ने जा रहा हूं।

Essense में , मैं grunt.template.process () का उपयोग कर रहा हूं ताकि मुझे index.htmlएक ऐसे टेम्पलेट से उत्पन्न किया जा सके जो वर्तमान कॉन्फ़िगरेशन का विश्लेषण करता है और या तो मेरे मूल स्रोत फ़ाइलों की सूची या किसी भी फ़ाइल के लिए लिंक किए गए कोड के साथ लिंक करता है। नीचे का उदाहरण जेएस फाइलों के लिए है, लेकिन उसी दृष्टिकोण को सीएसएस और किसी भी अन्य संभावित पाठ फ़ाइलों तक बढ़ाया जा सकता है।

grunt.js:

/*global module:false*/
module.exports = function(grunt) {
    var   // js files
        jsFiles = [
              'src/module1.js',
              'src/module2.js',
              'src/module3.js',
              'src/awesome.js'
            ];

    // Import custom tasks (see index task below)
    grunt.loadTasks( "build/tasks" );

    // Project configuration.
    grunt.initConfig({
      pkg: '<json:package.json>',
      meta: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
          '<%= grunt.template.today("yyyy-mm-dd") %> */'
      },

      jsFiles: jsFiles,

      // file name for concatenated js
      concatJsFile: '<%= pkg.name %>-all.js',

      // file name for concatenated & minified js
      concatJsMinFile: '<%= pkg.name %>-all.min.js',

      concat: {
        dist: {
            src: ['<banner:meta.banner>'].concat(jsFiles),
            dest: 'dist/<%= concatJsFile %>'
        }
      },
      min: {
        dist: {
        src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
        dest: 'dist/<%= concatJsMinFile %>'
        }
      },
      lint: {
        files: ['grunt.js'].concat(jsFiles)
      },
      // options for index.html builder task
      index: {
        src: 'index.tmpl',  // source template file
        dest: 'index.html'  // destination file (usually index.html)
      }
    });


    // Development setup
    grunt.registerTask('dev', 'Development build', function() {
        // set some global flags that all tasks can access
        grunt.config('isDebug', true);
        grunt.config('isConcat', false);
        grunt.config('isMin', false);

        // run tasks
        grunt.task.run('lint index');
    });

    // Production setup
    grunt.registerTask('prod', 'Production build', function() {
        // set some global flags that all tasks can access
        grunt.config('isDebug', false);
        grunt.config('isConcat', true);
        grunt.config('isMin', true);

        // run tasks
        grunt.task.run('lint concat min index');
    });

    // Default task
    grunt.registerTask('default', 'dev');
};

index.js (the index task):

module.exports = function( grunt ) {
    grunt.registerTask( "index", "Generate index.html depending on configuration", function() {
        var conf = grunt.config('index'),
            tmpl = grunt.file.read(conf.src);

        grunt.file.write(conf.dest, grunt.template.process(tmpl));

        grunt.log.writeln('Generated \'' + conf.dest + '\' from \'' + conf.src + '\'');
    });
}

अंत में, index.tmplपीढ़ी तर्क के साथ पके हुए:

<doctype html>
<head>
<%
    var jsFiles = grunt.config('jsFiles'),
        isConcat = grunt.config('isConcat');

    if(isConcat) {
        print('<script type="text/javascript" src="' + grunt.config('concat.dist.dest') + '"></script>\n');
    } else {
        for(var i = 0, len = jsFiles.length; i < len; i++) {
            print('<script type="text/javascript" src="' + jsFiles[i] + '"></script>\n');
        }
    }
%>
</head>
<html>
</html>

युपीडी। पता चला कि योमन , जो कि ग्रंट पर आधारित है, में एक बिल्ट-इन usemin टास्क है जो योमन की बिल्ड सिस्टम के साथ एकीकृत है। यह index.html के विकास संस्करण और साथ ही अन्य पर्यावरण सेटिंग्स में सूचना से index.html का उत्पादन संस्करण उत्पन्न करता है। देखने में थोड़ा परिष्कृत लेकिन दिलचस्प है।

— दिमित्री पश्केविच
स्रोत
5
ग्रंट-टेम्पलेट एक बहुत ही हल्का आवरण हैgrunt.template.process()(जो कि आप यहाँ उपयोग कर रहे हैं) जो इसे और भी आसान बना देगा। आपदेव / ठेस के लिएएक अलगवस्तुमें बस पासकरके ग्रंट-टेम्प्लेट का उपयोग करके एक ही काम कर सकते हैंdata।
— मथियास ब्येनेंस
15

मैं यहां दिए गए समाधानों को नापसंद करता हूं (इनमें से जो मैंने पहले दिया था ) और यहां बताया गया है:

  • सबसे अधिक वोट किए गए उत्तर के साथ समस्या यह है कि आपको जेएस फ़ाइल को जोड़ / नाम बदलने / हटाने के लिए स्क्रिप्ट टैग की सूची को मैन्युअल रूप से सिंक करना होगा।
  • स्वीकृत उत्तर के साथ समस्या यह है कि आपकी जेएस फाइलों की सूची में पैटर्न मिलान नहीं हो सकता है। इसका मतलब है कि आपको इसे ग्रंटफाइल में हाथ से अपडेट करना है।

मुझे लगा है कि इन दोनों मुद्दों को कैसे हल किया जाए। मैंने अपना ग्रन्ट कार्य सेट कर दिया है ताकि हर बार जब कोई फ़ाइल जोड़ी जाए या हटाई जाए, तो स्क्रिप्ट टैग स्वतः ही उसे प्रतिबिंबित करने के लिए उत्पन्न हो जाएं। इस प्रकार, आपको अपनी JS फाइल को जोड़ने / हटाने / नाम बदलने के लिए अपनी html फ़ाइल या अपनी ग्रन्ट फ़ाइल को संशोधित करने की आवश्यकता नहीं है ।

यह बताने के लिए कि यह कैसे काम करता है, मेरे पास स्क्रिप्ट टैग के लिए एक चर के साथ एक HTML टेम्पलेट है। मैं उस चर को आबाद करने के लिए https://github.com/alanshaw/grunt-include-replace का उपयोग करता हूं । देव मोड में, वह चर मेरे सभी जेएस फाइलों के ग्लोबिंग पैटर्न से आता है। जब जेएस फ़ाइल जोड़ी जाती है या निकाली जाती है, तो वॉच टास्क इस मूल्य को पुनर्गणित करता है।

अब, dev या prod मोड में विभिन्न परिणाम प्राप्त करने के लिए, आप बस उस वेरिएबल को एक अलग मान के साथ पॉप्युलेट करते हैं। यहाँ कुछ कोड है:

var jsSrcFileArray = [
    'src/main/scripts/app/js/Constants.js',
    'src/main/scripts/app/js/Random.js',
    'src/main/scripts/app/js/Vector.js',
    'src/main/scripts/app/js/scripts.js',
    'src/main/scripts/app/js/StatsData.js',
    'src/main/scripts/app/js/Dialog.js',
    'src/main/scripts/app/**/*.js',
    '!src/main/scripts/app/js/AuditingReport.js'
];

var jsScriptTags = function (srcPattern, destPath) {
    if (srcPattern === undefined) {
        throw new Error("srcPattern undefined");
    }
    if (destPath === undefined) {
        throw new Error("destPath undefined");
    }
    return grunt.util._.reduce(
        grunt.file.expandMapping(srcPattern, destPath, {
            filter: 'isFile',
            flatten: true,
            expand: true,
            cwd: '.'
        }),
        function (sum, file) {
            return sum + '\n<script src="' + file.dest + '" type="text/javascript"></script>';
        },
        ''
    );
};

...

grunt.initConfig({

    includereplace: {
        dev: {
            options: {
                globals: {
                    scriptsTags: '<%= jsScriptTags(jsSrcFileArray, "../../main/scripts/app/js")%>'
                }
            },
            src: [
                'src/**/html-template.html'
            ],
            dest: 'src/main/generated/',
            flatten: true,
            cwd: '.',
            expand: true
        },
        prod: {
            options: {
                globals: {
                    scriptsTags: '<script src="app.min.js" type="text/javascript"></script>'
                }
            },
            src: [
                'src/**/html-template.html'
            ],
            dest: 'src/main/generatedprod/',
            flatten: true,
            cwd: '.',
            expand: true
        }

...

    jsScriptTags: jsScriptTags

jsSrcFileArrayआपकी विशिष्ट ग्रन्ट फ़ाइल-ग्लोबिंग पैटर्न है। jsScriptTagsलेता है jsSrcFileArrayऔर scriptदोनों पक्षों के टैग के साथ उन्हें एक साथ मिलाता है । destPathमैं प्रत्येक फ़ाइल पर उपसर्ग चाहता हूँ।

और यहाँ HTML क्या दिखता है:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Example</title>

</head>

<body>    
@@scriptsTags
</body>
</html>

अब, जैसा कि आप विन्यास में देख सकते हैं, मैं उस चर का मान एक हार्ड कोडित scriptटैग के रूप में उत्पन्न करता हूं जब यह prodमोड में चलता है। देव विधा में, यह चर इस तरह से एक मूल्य में विस्तारित होगा:

<script src="../../main/scripts/app/js/Constants.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Random.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Vector.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/StatsData.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Dialog.js" type="text/javascript"></script>

अगर आपका कोई प्रश्न हैं, तो मुझे से पूछें।

पुनश्च: यह हर क्लाइंट-साइड जेएस ऐप में जो कुछ करना चाहता है, उसके लिए कोड की एक पागल राशि है। मुझे आशा है कि कोई इसे पुन: प्रयोज्य प्लगइन में बदल सकता है। शायद मैं किसी दिन होगा।

— डैनियल कपलान
स्रोत
1
आशाजनक लगता है। किसी भी मौका आप कुछ स्निपेट्स साझा कर सकते हैं?
— एडम मार्शल
I've set up my grunt task so that every time a file is added or deleted, the script tags automatically get generated to reflect thatआपने वह कैसे किया?
— कॉडबगस्टीन
2
एक और सवाल: क्या आप HTML <script>टैग्स के ब्लॉक को हटाने का तरीका जानते हैं ?
— कॉडबगस्टीन
@ मेरे सिर के ऊपर से नहीं हटा। आपका मतलब किसी भी प्रकार के टेंपलेटिंग (जैसे, ग्रंट-इन-रिप्लेसमेंट) से है? पहले सोचा था कि मेरे सिर में चबूतरे xslt होगा। शायद एक अच्छा समाधान नहीं है, हालांकि।
— डेनियल कपलान
1
यह जवाब हाजिर है, हालांकि मैं व्यक्तिगत रूप destPathसे हटा दिया गया था jsScriptTagsऔर उन फ़ाइलों के grunt.file.expandMappingसाथ स्वैप किया grunt.file.expandगया था जो मैं चाहता था कि वे पहले से ही सही स्थानों पर थे। इसने चीजों को बहुत सरल कर दिया। धन्यवाद @DanielKaplan, आपने मुझे एक बड़ी राशि का समय बचाया है :)
— डैनियल
13

मैं अपने आप से कुछ समय के लिए एक ही सवाल पूछ रहा हूं, और मुझे लगता है कि इस ग्रन्ट प्लगइन को आप जो चाहते हैं उसे करने के लिए कॉन्फ़िगर किया जा सकता है: https://npmjs.org/package/grunt-targethtml । यह सशर्त HTML टैग्स को लागू करता है, जो कि ग्रंट लक्ष्य पर निर्भर करता है।

— प्रति खोजी एरॉनसन
स्रोत
2
मैंने इस प्लगइन को देखा है, लेकिन मुझे अपने index.html में सभी फाइलों (और वास्तव में कोई तर्क होने) को मैन्युअल रूप से निर्दिष्ट करने का विचार पसंद नहीं है क्योंकि मेरे पास पहले से ही मेरे ग्रंट कॉन्फ़िगरेशन और डॉन में स्रोत js / css फ़ाइलों की एक सूची है ' t खुद को दोहराना चाहते हैं। लब्बोलुआब यह
— दिमित्री पश्केविच
Grunt-targethtml के लिए +1। हालांकि यह जोड़ने के लिए थोड़ा बदसूरत है कि क्या बयान आपके सूचकांक में "निर्णय" करते हैं कि कौन सी संपत्ति को लोड करना है। फिर भी, यह समझ में आता है। यह वह स्थान है जहां आप सामान्य रूप से अपनी परियोजना में संसाधनों को शामिल करने के लिए देखेंगे। इसके अलावा, इस पर आगे बढ़ने से मुझे ग्रंट-कॉन्ट्रीब की जाँच करने का मौका मिला। इसमें कुछ बेहतरीन चीजें हैं।
— कार्बोनटैक्स
8

मैं एक और अधिक सरल, सीधे आगे समाधान की तलाश में था इसलिए मैंने इस प्रश्न का उत्तर संयुक्त किया:

ग्रन्टफाइल.जेएस में ब्लॉक करें तो कैसे लगाएं

और निम्नलिखित सरल चरणों के साथ आया:

  1. अपनी अनुक्रमणिका फ़ाइलों के दो संस्करण रखें जैसा कि आपने सूचीबद्ध किया है और उन्हें अनुक्रमणिका-विकास। Html और अनुक्रमणिका- prodoction.html नाम दिया है।

  2. अपनी index.html फ़ाइल के लिए अपने Gruntfile.js के concat / copy block में निम्न तर्क का उपयोग करें:

    concat: {
    index: {
        src : [ (function() {
            if (grunt.option('Release')) {
              return 'views/index-production.html';
            } else {
              return 'views/index-development.html';
            }
          }()) ],
       dest: '<%= distdir %>/index.html',
       ...
    },
    ...
},

  3. इंडेक्स-प्रोडक्शन। html फ़ाइल का चयन करने के लिए 'ग्रन्ट - रोलेज़' चलाएं और विकास संस्करण के लिए ध्वज को छोड़ दें।

कोई नया प्लगइन्स जोड़ने या कॉन्फ़िगर करने और कोई नया ग्रन्ट कार्य करने के लिए नहीं।

— एडवर्ड टैन
स्रोत
3
यहाँ केवल नकारात्मक पक्ष यह है कि बनाए रखने के लिए दो index.html फ़ाइलें हैं।
— एडम मार्शल
5

स्क्रिप्टलिंकर नाम का यह ग्रंट कार्य देव मोड में स्क्रिप्ट जोड़ने का एक आसान तरीका है। आप संभवत: पहले एक कॉनसैट कार्य चला सकते हैं और फिर इसे अपने कॉनैटेड फ़ाइल को ठेस मोड में इंगित कर सकते हैं।

— डैनियल कपलान
स्रोत
+1। प्रलेखन भ्रामक है और कुछ सामान (appRoot, रिश्तेदार) हमेशा की तरह काम नहीं करता है, लेकिन अभी भी: सहायक उपकरण।
— हैशचेंज
1
@hashchange मैं इस उपकरण का उपयोग नहीं करता हूं। मैंने इसके बजाय github.com/alanshaw/grunt-include-replace का उपयोग कर समाप्त किया । मेरी html फ़ाइल में एक चर है जो स्क्रिप्ट टैग का प्रतिनिधित्व करता है। तब मुझे लगता है कि मैं चाहता हूँ html के एक स्ट्रिंग के साथ कि चर आबाद। देव विधा में, यह चर लिपियों की एक सूची है। ठेस मोड में यह चर अवतलित, छोटा संस्करण है।
— डेनियल कपलान
पॉइंटर को ग्रंट-इन-रिप्लेस के लिए धन्यवाद। (मैं वास्तव में एक मोचा index.html फ़ाइल के लिए एक निर्देशिका में सभी कल्पना फ़ाइलों को जोड़ने के लिए एक उपकरण की जरूरत है। Scriptlinker इसके लिए ठीक है।)
— 13:14 पर हैशचेंज
@hashchange आप दस्तावेज़ चूसने के बारे में सही हैं। आप इसे कैसे बताऊँ जहां अपने html फ़ाइल में स्क्रिप्ट टाइल्स डाल करने के लिए?
— डैनियल कपलान
1
आप एक HTML टिप्पणी को परिभाषित करते हैं। इस फ़ाइल पर एक नज़र डालें । निवेशन पर हो <!--SINON COMPONENT SCRIPTS-->और <!--SPEC SCRIPTS-->। और यहां ग्रंट कार्य है जो इसे करता है (डॉक्स में सामान के विपरीत एक वास्तविक काम करना)। आशा है कि यह मदद करता है;)
— hashchange
5

ग्रंट-डोम-मुंगेर सीएसएस चयनकर्ताओं के साथ HTML को पढ़ता और हेरफेर करता है। पूर्व। अपने html से टैग पढ़ें। नोड्स निकालें, नोड्स जोड़ें, और बहुत कुछ।

आप अपनी सभी JS फ़ाइलों को अपने index.html से लिंक करने के लिए ग्रन्ट-डोम-मुंगेर का उपयोग कर सकते हैं, उन्हें बदसूरत कर सकते हैं और फिर grun-dom-munger का उपयोग करके अपने index.html को फिर से संशोधित करने के लिए केवल minified JS को लिंक कर सकते हैं।

— brillout
स्रोत
5

मुझे एक ग्रंट प्लगइन मिला, जिसे ग्रंट-देव-प्रोडक्ट-स्विच कहा जाता है। यह सब कुछ टिप्पणी करता है कि यह आपके द्वारा ग्रन्ट करने के लिए पास किए गए --env विकल्प के आधार पर खोजता है (हालाँकि यह आपको dev, prod, और परीक्षण तक सीमित करता है)।

एक बार जब आप इसे यहाँ स्थापित कर लेते हैं , जैसा कि आप यहाँ बताते हैं , आप उदाहरण के लिए दौड़ सकते हैं:

grunt serve --env=dev, और यह सब करता है उन ब्लॉकों के बारे में टिप्पणी करता है जो द्वारा लपेटे जाते हैं

    <!-- env:test/prod -->
    your code here
    <!-- env:test/prod:end -->

और यह उन ब्लॉकों को हटा देगा, जो इसके द्वारा लिपटे हुए हैं

    <!-- env:dev -->
    your code here
    <!-- env:dev:end -->

यह जावास्क्रिप्ट पर भी काम करता है, मैं इसे अपने बैकएंड एपीआई के लिए कनेक्ट करने के लिए सही आईपी पते की स्थापना के लिए उपयोग करता हूं। ब्लॉक बस में बदल जाते हैं

    /* env:dev */
    your code here
    /* env:dev:end */

आपके मामले में, यह इस तरह सरल होगा:

<!DOCTYPE html>
<html>
    <head>
        <!-- env:dev -->
        <script src="js/module1.js" />
        <script src="js/module2.js" />
        <script src="js/module3.js" />
        ...
        <!-- env:dev:end -->
        <!-- env:prod -->
        <script src="js/MyApp-all.min.js" />
        ...
        <!-- env:prod:end -->
    </head>
    <body></body>
</html>
— गुमनाम
स्रोत
4

ग्रंट-बेक एक शानदार ग्रन्ट स्क्रिप्ट है जो यहां बहुत अच्छा काम करेगी। मैं अपने JQM ऑटो बिल्ड स्क्रिप्ट में इसका उपयोग करता हूं।

https://github.com/imaginethepoet/autojqmphonegap

मेरी grunt.cfish फ़ाइल पर एक नज़र डालें: 

bake:
    resources: 
      files: "index.html":"resources/custom/components/base.html"

यह बेस। Html की सभी फाइलों को देखता है और उन्हें index.html बनाने के लिए बेकार करता है। यह मल्टीपज एप्लिकेशन (फोनगैप) के लिए शानदार काम करता है। यह आसान विकास के लिए अनुमति देता है क्योंकि सभी देव एक लंबे सिंगल पेज ऐप पर काम नहीं कर रहे हैं (बहुत सारे संघर्षों को रोकना)। इसके बजाय आप पृष्ठों को तोड़ सकते हैं और कोड के छोटे हिस्से पर काम कर सकते हैं और एक वॉच कमांड का उपयोग करके पूर्ण पृष्ठ पर संकलन कर सकते हैं।

Bake, base.html से टेम्प्लेट पढ़ता है और घटक html पेजों को देखता है।

<!DOCTYPE html>

jQuery के मोबाइल डेमो

app.initialize (); 

<body>
    <!--(bake /resources/custom/components/page1.html)-->
    <!--(bake /resources/custom/components/page2.html)-->
    <!--(bake /resources/custom/components/page3.html)-->
</body>

आप इसे एक कदम आगे ले जा सकते हैं और "मेनू" "पॉपअप" आदि के लिए अपने पृष्ठों में इंजेक्शन जोड़ सकते हैं ताकि आप पृष्ठों को छोटे प्रबंधनीय घटकों में तोड़ सकें।

— imaginethepoet
स्रोत
हो सकता है कि आप ग्रन्थ-बेक का उपयोग करने वाले कोड डेमो के साथ अपना उत्तर बढ़ा सकें?
— दिमित्री पश्केविच
4

इन कार्यों का ध्यान रखने के लिए wiredep https://github.com/taptapship/wiredep और usemin https://github.com/yeoman/grunt-usemin के संयोजन का उपयोग करें । वायर्डेप आपकी निर्भरता को एक समय में एक स्क्रिप्ट फ़ाइल में जोड़ देगा, और usemin उन सभी को उत्पादन के लिए एक एकल फ़ाइल में बदल देगा। यह तो बस कुछ HTML टिप्पणियों के साथ पूरा किया जा सकता है। उदाहरण के लिए, मेरे चलने वाले पैकेज स्वचालित रूप से शामिल होते हैं और जब मैं चलाता हूं तो HTML में जोड़ा जाता है bower install && grunt bowerInstall:

<!-- build:js /scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
— Scottux
स्रोत
2

यह जवाब नॉब्स के लिए नहीं है!

जेड टेम्प्लेटिंग का उपयोग करें ... वैरिएबल को जेड टेम्पलेट में पास करना एक दलदल मानक उपयोग मामला है

मैं ग्रंट (ग्रंट-कंट्री-जेड) का उपयोग कर रहा हूं, लेकिन आपको ग्रंट का उपयोग करने की आवश्यकता नहीं है। बस मानक npm जेड मॉड्यूल का उपयोग करें।

अगर ग्रंट का उपयोग कर रहे हैं तो आपका ग्रन्टफाइल कुछ इस तरह का होगा ...

jade: {
    options: {
      // TODO - Define options here
    },
    dev: {
      options: {
        data: {
          pageTitle: '<%= grunt.file.name %>',
          homePage: '/app',
          liveReloadServer: liveReloadServer,
          cssGruntClassesForHtmlHead: 'grunt-' + '<%= grunt.task.current.target %>'
        },
        pretty: true
      },
      files: [
        {
          expand: true,
          cwd: "src/app",
          src: ["index.jade", "404.jade"],
          dest: "lib/app",
          ext: ".html"
        },
        {
          expand: true,
          flatten: true,
          cwd: "src/app",
          src: ["directives/partials/*.jade"],
          dest: "lib/app/directives/partials",
          ext: ".html"
        }
      ]
    }
  },

अब हम जेड टेम्पलेट में ग्रंट द्वारा पास किए गए डेटा तक आसानी से पहुंच सकते हैं।

मॉडर्निज़्र द्वारा उपयोग किए जाने वाले दृष्टिकोण की तरह, मैंने पारित किए गए चर के मूल्य के अनुसार HTML टैग पर एक सीएसएस वर्ग निर्धारित किया है और सीएसएस वर्ग मौजूद है या नहीं इसके आधार पर वहां से जावास्क्रिप्ट तर्क का उपयोग कर सकते हैं।

यह बहुत अच्छा है अगर आप कोणीय का उपयोग कर रहे हैं, तो आप एनजी कर सकते हैं-चाहे वह कक्षा में मौजूद तत्वों पर आधारित हो।

उदाहरण के लिए, मैं एक स्क्रिप्ट शामिल कर सकता हूं यदि वर्ग मौजूद है ...

(उदाहरण के लिए, मैं देव में लाइव रीलोड स्क्रिप्ट शामिल कर सकता हूं लेकिन उत्पादन में नहीं)

<script ng-if="controller.isClassPresent()" src="//localhost:35729/livereload.js"></script>
— danday74
स्रोत
2

प्रक्रिया html पर विचार करें । यह बनाता है कई "लक्ष्य" की परिभाषा बनाता है। टिप्पणियाँ HTML से सामग्री को सशर्त रूप से शामिल करने या बाहर करने के लिए उपयोग की जाती हैं:

<!-- build:js:production js/app.js -->
...
<!-- /build -->

हो जाता है

<script src="js/app.js"></script>

यह भी इस तरह से निफ्टी सामान करने के लिए उद्देश्य ( README देखें ):

<!-- build:[class]:dist production -->
<html class="debug_mode">
<!-- /build -->

<!-- class is changed to 'production' only when the 'dist' build is executed -->
<html class="production">
— Dat
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.