使用 grunt 将本地 *.js 和 *.css 文件自动引用到 index.html答案

【问题标题】：Automatic reference of local *.js and *.css files into index.html with grunt使用 grunt 将本地 *.js 和 *.css 文件自动引用到 index.html
【发布时间】：2017-02-17 05:24:46
【问题描述】：

我打算开发一个 angularJS 客户端，我将在其中使用 Angular 组件。这将导致多个 .js/.css 文件。为了避免手动引用每个新添加的 js/css 文件，我打算使用 grunt-include-source 任务。

问题是，在配置 Gruntfile.js 后，“grunt includeSource”任务运行，返回“Done，没有错误”。状态，但 index.html 文件中没有更新。

我的项目结构如附图所示（我使用 WebStorm 作为 IDE）。

我的 index.html 文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RavenApp</title>
    <!-- include: "type": "css", "files": "*.css" -->
</head>
<body>
    <!-- bower:js -->
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/angular-route/angular-route.js"></script>
    <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="../bower_components/angular-mocks/angular-mocks.js"></script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/underscore/underscore.js"></script>
    <!-- endbower -->

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

我的 Gruntfile.js 如下：

module.exports = function (grunt) {
    grunt.loadNpmTasks('grunt-wiredep');
    grunt.loadNpmTasks('grunt-include-source');

    grunt.initConfig({
        wiredep: {
            target: {
                src: 'app/index.html'
            }
        },
        includeSource: {
            options: {
                basePath: 'app',
                templates: {
                    html: {
                        js: '<script src="{filePath}"></script>',
                        css: '<link rel="stylesheet" type="text/css" href="{filePath}" />'
                    }
                },
                app: {
                    files: {
                        'app/index.html': 'app/index.html'
                    }
                }
            }
        }
    });
};

谁能指出我做错了什么？谢谢。

【问题讨论】：

将app 移动到options 之外的gruntfile.js。
确实，这就是问题所在。现在可以了，非常感谢。

标签： javascript html angularjs gruntjs grunt-includes

【解决方案1】：

我们不需要在includeSource键下写templates键：

module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');

grunt.initConfig({
    wiredep: {
        target: {
            src: 'app/index.html'
        }
    },
    includeSource: {
        options: {
            basePath: 'app',                
            app: {
                files: {
                    'app/index.html': 'app/index.html'
                }
            }
        }
    }
});
};

HTML 代码足以包含 js 和 css：

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

【讨论】：