鲍尔和格伦茨。将供应商JavaScript连接到一个文件中。

我正在使用Bower和GruntJS开发一个静态网站。我使用Bower将jQuery、Bootstrap和一些jQuery插件等软件包安装到名为src/_lib的文件夹中，然后使用grunt bowercopy将我需要的脚本复制到“供应商”文件夹中。然后我使用GruntJS连接并缩小javascript：

grunt.initConfig({
  concat: {
    dist: {
      src: ['vendors/*.js', 'js/*.js'],
      dest: 'src/script.js'
    }
  },

  uglify: {
    options: {
      banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
    },
    build: {
      src: 'src/js/script.js',
      dest: 'build/js/script.min.js'
    }
  },
});

将所有javascript放在一个文件中是否会有破坏某些javascript代码的风险？

---

有没有办法让GruntJS以JQuery开始，以防其他代码依赖于JQuery？

为了确保javascript文件以正确的顺序连接，我将相关javascript文件从bower目录复制到另一个目录中。我用grunt bowercopy来做这件事。然后我使用grunt contrib concat，确保src数组中的顺序正确。要测试它是否正常工作，请将以下代码段放入src/js/script.js文件中：

我使用的完整gruntfile如下所示：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bowercopy: {
        options: {
            srcPrefix: 'src/_lib'
        },
        test: {
            options: {
              destPrefix: 'test/js',
            },
            files: {
              'jquery.js' : 'jquery/jquery.js',
              'bootstrap.js' : 'bootstrap/dist/js/bootstrap.js'
            },
        },
    },
    concat: {   
        dist: {
            src: [
                'test/js/jquery.js', 
                'test/js/bootstrap.js',
                'src/js/script.js',
            ],
            dest: 'test/js/scripts.js',
        }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'test/js/scripts.js',
        dest: 'build/js/scripts.min.js'
      }
    },    
  });

  // Load the plugins.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-bowercopy');
  grunt.loadNpmTasks('grunt-contrib-concat');

  // Default tasks.
  grunt.registerTask('default', ['bowercopy', 'concat', 'uglify']);

};

---

如果把它们都放在同一页上，你只会面临同样的风险。如果jQuery必须放在第一位，只需将其作为src数组中的第一个元素。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bowercopy: {
        options: {
            srcPrefix: 'src/_lib'
        },
        test: {
            options: {
              destPrefix: 'test/js',
            },
            files: {
              'jquery.js' : 'jquery/jquery.js',
              'bootstrap.js' : 'bootstrap/dist/js/bootstrap.js'
            },
        },
    },
    concat: {   
        dist: {
            src: [
                'test/js/jquery.js', 
                'test/js/bootstrap.js',
                'src/js/script.js',
            ],
            dest: 'test/js/scripts.js',
        }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'test/js/scripts.js',
        dest: 'build/js/scripts.min.js'
      }
    },    
  });

  // Load the plugins.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-bowercopy');
  grunt.loadNpmTasks('grunt-contrib-concat');

  // Default tasks.
  grunt.registerTask('default', ['bowercopy', 'concat', 'uglify']);

};