javascript - 用于将多个 Jquery 就绪函数组合成单个就绪函数的 Grunt 任务

Question

我已经准备好了分布在多个文件中的函数，我希望合并和缩小这些文件。是否有一个 grunt 任务可以将所有准备好的任务合并到一个函数中？

// 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
    })
})

我正在寻找类似...的东西

// 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
    })
})

如果我只是运行 grunt 任务来合并所有文件并在使用 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
    })
})

感谢您检查这个问题。祝你有美好的一天。抱歉，如果这是一个重复的问题。发布此问题是因为在其他地方找不到答案。

Answer 1

您可以使用 grunt-jquery-ready 它将执行您想要的操作。

您应该首先连接所有文件，然后以这种方式使用这个 grunt 插件。我测试了这个并且它有效

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");
});

结果执行此命令后，我得到了以下格式的文件:

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

更多信息请参阅主网站:

Wrapping your concatenated .js file into ready function