如何在一个中添加所有Javascript文件的引用？

Question

我有一个情况。 我从头开始开始angularjs项目。 对于我添加到我的项目的每个js文件，它需要在index.html中引用它。 我想避免。 任何人都可以建议我最好的和简单的实现方式来解决它。

我正在寻找两种选择:(但是dnt知道怎么做）

1）包含所有js文件的单个文件，然后该单个文件可以在index.html中引用

2）或者它应该以什么方式在浏览器需要时自动添加？

显然可能还有其他选项，以及上面刚才提到的其他选项。 任何建议都会有所帮助，在此先感谢。

Answer 1

正如Alexander所说，如果您选择Grunt ，您可以使用concat插件将所选文件列表合并到一个目标中：

在gruntfile.js中加载select插件后

grunt.loadNpmTasks('grunt-contrib-concat');

在grunt配置中定义任务：

grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      // your source file list
      src: ['src/js/*.js'], 
      //your destination file
      dest: 'dist/app.js',
    },
  },
});

然后将此任务注册到列表：

grunt.registerTask('compile', ['concat']);

这将通过在命令行上键入“grunt compile”来运行

所以你只需要在索引中包含dist / app.js文件。

grunt中有许多可用的插件，即你可以使用grunt-include-source插件动态地包含你的app.js文件，或者使用grunt-contrib-uglify最小化js文件。

有关gruntfile的更多信息，请点击此处

您可以按照第二点的要求实现结果，我认为您可以使用以下解决方案：

• 的WebPack
• RequireJS

更新 ：

我找不到结束教程，我很抱歉。

对于通用的Grunt教程，您可以阅读本文

否则，您可以按照官方Grunt站点的入门页面进行安装，配置并进行总体概述。

当他们谈论插件时，请参阅上面链接和解释的grunt-contrib-concat插件的自述文件。

这些页面可以为您提供所需的所有技能。

最后，通过在dist.src所有要合并到文件集中的文件放入dist.dest并在html中仅包含后者来定制Gruntfile.js中的concat配置。

设置完成后，通过在项目文件夹的命令行上键入grunt compile来执行任务，然后生成合并文件。

Answer 2

正如ShanShan在评论中已经提到的那样 ， Grunt （或Gulp ）正是您所寻找的。

因此，您设置了一个监视任务，并在修改js文件后，连接所有这些文件/压缩它们/无论如何。

我打赌这个话题已经讨论了很多。

请考虑使用Yeoman和Yeoman角度生成器生成的基本应用程序。

此致，亚历山大