Question

我有准备好的功能分布在多个文件中，我希望合并和缩小。是否有一项将所有准备工作合并为一个函数的繁琐任务？

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

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

1 个答案: