将目录中的所有javascript文件包含到angularjs中的html文件中？咕哝？答案

【问题标题】：Include all javascript files in a directory to a html file in angularjs? with grunt?将目录中的所有javascript文件包含到angularjs中的html文件中？咕哝？
【发布时间】：2014-06-07 12:23:31
【问题描述】：

在我的 AngularJS 应用程序中，我有许多控制器 js 文件。

这些控制器 (one.ctrl.js,two.ctrl.js,...) 需要包含在我的 index.html 文件中。

目录结构：

app/
   js/
      controllers/
         one.ctrl.js
         two.ctrl.js

目前js以上文件包含在index.html文件中如下。

index.html：

<!--   other html components   -->

<script src="js/controllers/one.ctrl.js"/>
<script src="js/controllers/two.ctrl.js"/>
</body>
</html>

还有更多的*.ctrl.js 文件需要包含在index.html 中。

我需要一种方法来自动将controllers 目录中的所有*.ctrl.js 文件包含到index.html。

调查结果：

从一些 SO 问题，

Load JavaScript and CSS files in folders in AngularJS

How can I include all JavaScript files in a directory via JavaScript file?

我发现它不能自动完成，需要一些服务器端脚本或构建工具。

我的问题：

目前，我正在使用yeoman，其中包括grunt 作为构建工具。所以，我的问题是，如何将目录中的那些 javascript 文件自动包含在 html 文件中？

【问题讨论】：

我可以给你一个 gulp.js 的例子。会这样吗？
我没用过gulp.js。我可以试试它是否能完成这项工作。

标签： javascript angularjs gruntjs

【解决方案1】：

您可以使用grunt-include-source 插件

使用它你可以定义这样的模板：

html: {
    js: '<script src="{filePath}"></script>',
    css: '<link rel="stylesheet" type="text/css" href="{filePath}" />',
  }

在您的 html 文件中，该文件将被扩展以包含您的源位置中存在的所有源 js 和 css 文件，这些文件可以在 grunt 任务中进行配置

【讨论】：

你能提供一个完整的 Gruntfile.js 吗？

【解决方案2】：

回答按需自动将源文件添加到index.html的一般问题，并详细说明grunt-include-source的使用。

这适用于以下文件夹结构：

MyProject
|
+-- index.js
+-- Gruntfile.js
+-- package.json
+-- //other files
|
+--+ app
   +-- //app files (.html,.js,.css,.*)

使用npm i -D grunt-include-source grunt-contrib-watch 安装。
在您的Gruntfile.js 中，添加grunt.loadNpmTasks('grunt-include-source');

然后你必须添加一堆任务到你的Gruntfile.js，之后它应该是这样的：

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //...
        watch: {
            //...
            includeSource: {
                // Watch for added and deleted scripts to update index.html
                files: ['app/**/*.js','app/**/*.css'],
                tasks: ['includeSource'],
                options: {
                    event: ['added', 'deleted']
                }
            }
        },
        includeSource: {
            options: {
                //This is the directory inside which grunt-include-source will be looking for files
                basePath: 'app'
            },
            app: {
                files: {
                    //Overwriting index.html
                    'app/index.html': 'app/index.html'
                }
            }
        }
    });

    //...
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-include-source');

    //...
    //Include sources, run the server, open the browser, and watch.
    grunt.registerTask('default', ['includeSource', 'watch']);
};

在您的index.html 中，添加以下内容（此处的文件路径位于Gruntfile.js 中设置的基本路径内）：

<!-- include: "type": "css", "files": "**/*.css" -->
<!-- /include -->
<!-- include: "type": "js", "files": "**/*.js" -->
<!-- /include -->

最后，在命令行上：
```
grunt
```

这应该按顺序启动所有任务，并且当添加或删除 JS 或 CSS 时，您的 index.html 应相应更新。

这就是您的index.html 可能看起来像少量文件：

<!-- include: "type": "css", "files": "**/*.css" -->
<link href="styles.css" rel="stylesheet" type="text/css">
<!-- /include -->
<!-- include: "type": "js", "files": "**/*.js" -->
<script src="_routes/routes.js"></script>
<script src="scripts/app.js"></script>
<!-- /include -->

链接：

【讨论】：

【解决方案3】：

你可以这样使用：

(function loadScript() {
    var head = document.getElementsByTagName("head")[0];
    var done = false;

    var directory = 'libraries/';
    var extension = '.js';
    var files = ['functions', 'speak', 'commands', 'wsBrowser', 'main']; 

     for (var file of files){ 
        var path = directory + file + extension; 
        var script = document.createElement("script");
        script.src = path;

        script.onload = script.onreadystatechange = function() {
        // attach to both events for cross browser finish detection:
        if ( !done && (!this.readyState ||
           this.readyState == "loaded" || this.readyState == "complete") ) {
           done = true;
           // cleans up a little memory:
           script.onload = script.onreadystatechange = null;
           // to avoid douple loading
           head.removeChild(script);
        }
    };
  head.appendChild(script); 
  done = false;
 }
})();

【讨论】：