Question

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

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

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

2）或者当浏览器需要时它应该以某种方式自动添加？

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

Answer 1

正如亚历山大所说，如果选择Grunt，您可以使用concat plugin将所选文件列表合并到一个目的地：

在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']);

这将通过输入＆＃34; grunt compile＆＃34;来运行。在命令行上

因此您只需在索引中包含dist / app.js文件。

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

有关gruntfile的更多信息，请访问here

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

<强>更新：

我无法找到一个结束教程的结尾，对不起。

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

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

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

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

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

设置完成后，通过在项目文件夹的命令行上键入img { -ms-interpolation-mode: bicubic; }来执行任务，然后生成合并的文件。

Answer 2

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

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

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

请考虑使用Yeoman和Yeoman angular generator生成的基本应用。

此致，亚历山大

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

2 个答案: