在将javascript文件合并为一个之前我应该​​知道什么？

Question

所以我只是学习使用grunt进行连接，如果它到达那一点，请缩小/ uglify我的各种js脚本以减少HTTP requests。

但是，我怀疑它并不像简单地选择连接文件那样容易，并且期望它能够正常工作。在合并之后，大多数javascript都可以工作，但是，特别是基础部分失败了。对于那些不知道的人，Foundation是一个前端框架，并通过调用它来初始化：

$(document).foundation();

错误日志告诉我：

    TypeError: $(...).foundation is not a function
    $(document).foundation();

无论如何，我想知道在合并时是什么让一些javascript工作，以及为什么其他人没有。它与合并的顺序有关吗？ 另外，在我使用缩小/压缩和连接之前，我应该知道如何编写javascript？ 我自己开始学习使用命名空间，我已经看到过这方面的提及。但我找不到有关它们重要性的来源以及它在我的案例中是如何使用的。

如果有人对我的Gruntfile看起来很有兴趣，那么它就是：

    module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
  options: {
    separator: ';'
  },
  dist: {
    src: [
        'bower_components/foundation/js/vendor/jquery.js',
        'bower_components/foundation/js/vendor/modernizr.js',
        'javascripts/vendor/quickform.js',
        'javascripts/vendor/jquery.dataTables.min.js',
        'javascripts/dataTables/dataTables.foundation.js',
        'javascripts/vendor/jstz.min.js',
        'bower_components/foundation/js/vendor/fastclick.js',
        'bower_components/foundation/js/foundation.js">',
    ],
    dest: 'dist/<%= pkg.name %>.js'
  }
},
uglify: {
  options: {
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
  },
  dist: {
    files: {
      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    }
  }
}
});

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  // Default task(s).
  grunt.registerTask('default', ['concat','uglify']);
};

感谢任何帮助：）

Answer 1

合并它们的顺序在大多数情况下都很重要。例如，假设您有两个小JS文件。一个包含var a="hi"，另一个包含alert(a)。如果你按照它们的顺序合并它们，一切都会正常工作，并且一个警告框包含＆＃34; hi＆＃34;会出现。但是如果你以另一种方式合并它们，它会提示未定义因为尚未定义。通常，定义变量和函数的JS应该首先出现。

---

这是我能给你的所有帮助。我希望这对你有所帮助。