Grunt-Task zum Kombinieren mehrerer JQuery-Ready-Funktionen in eine einzelne Ready-Funktion

Question

Ich habe bereit Funktionen verteilt über mehrere Dateien, die ich zusammenführen und minimieren möchte. Gibt es eine Grunt-Aufgabe, die alle in einer Funktion zusammenführen wird?

// file1.js 
$(document).ready(function(){ 
    $(".class1").click(function() { 
     // Some Action 
    }) 
}) 


// file2.js 
$(document).ready(function(){ 
    $(".class3").on("blur", function() { 
     // Some Action 
    }) 
}) 

// file3.js 
$(document).ready(function(){ 
    $(".class2").on("change", function() { 
     // Some Action 
    }) 
}) 

// file4.js 
$(document).ready(function(){ 
    $(".class3").click(function() { 
     // Some Action 
    }) 
}) 

Ich bin auf der Suche nach so etwas wie ...

// file.js 
$(document).ready(function(){ 
    $(".class1").click(function() { 
     // Some Action 
    }) 

    $(".class3").on("blur", function() { 
     // Some Action 
    }) 

    $(".class2").on("change", function() { 
     // Some Action 
    }) 

    $(".class3").click(function() { 
     // Some Action 
    }) 
}) 

Wird es die Leistung schaden, wenn ich nur grunzen Aufgabe ausführen, alle Dateien zu kombinieren und haben mehrere Funktionen bereit, in eine Datei wie folgt zusammengefasst Verwenden von grunt-contrib-uglify?

// file.js 
$(document).ready(function(){ 
    $(".class1").click(function() { 
     // Some Action 
    }) 
}) 

$(document).ready(function(){ 
    $(".class3").on("blur", function() { 
     // Some Action 
    }) 
}) 

$(document).ready(function(){ 
    $(".class2").on("change", function() { 
     // Some Action 
    }) 
}) 

$(document).ready(function(){ 
    $(".class3").click(function() { 
     // Some Action 
    }) 
}) 

Vielen Dank für die Überprüfung dieser Frage. Ich wünsche ihnen einen wunderbaren Tag. Entschuldigung wenn das eine nochmalige Frage ist. Stellen Sie diese Frage, weil Sie die Antwort nirgendwo sonst finden konnten.

Answer 1

Sie können grunt-jquery-ready verwenden, die tun, was Sie wollen.

Sie sollten zuerst alle Ihre Dateien und dann dieses Grunt-Plugin auf diese Weise concat. Getestet habe ich diese und es funktioniert

grunt.initConfig({ 
 
    'jquery-ready' : { 
 
     path: 'path_to_your_folder/your_script_file.js', 
 
     runSync: false 
 
    } 
 
    
 
    grunt.loadNpmTasks('grunt-jquery-ready'); 
 
    
 
    grunt.registerTask('default', "jquery-ready"); 
 
});

als Ergebnis nach dieser Ausführung bekam ich meine Datei in diesem Format:

$(document).ready(function(){ 
 
    all the content of my script.js file is placed here automatically. 
 
});

Bitte beachten Sie die Haupt-Website für Weitere Informationen:

Wrapping your concatenated .js file into ready function