5

angularコンポーネントを使用するangularJSクライアントを開発するつもりです。これにより、複数の.js/ .css ファイルが作成されます。新しく追加された各 js/css ファイルを手動で参照することを避けるために、grunt-include-source タスクを使用するつもりです。

問題は、Gruntfile.js を構成した後、「grunt includeSource」タスクが実行され、「完了、エラーなし」が返されることです。状態ですが、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'
                    }
                }
            }
        }
    });
};

誰かが私が間違ったことを教えてもらえますか? ありがとうございました。

4

1 に答える 1