Automatic reference of local .js and .css files into index.html with grunt

Question

I intend to develop an angularJS client where I will use angular components. This will lead to multiple .js/.css files. In order to avoid manually referencing each newly added js/css file I intend to use a grunt-include-source task.

The problem is that, after configuring the Gruntfile.js, the „grunt includeSource” task runs, returning „Done, without errors.” status but no update is made in the index.html file.

My project structure is the one presented in the attached picture (I use WebStorm as IDE).

My index.html file is the following:

<!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>

My Gruntfile.js is the following:

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'
                    }
                }
            }
        }
    });
};

Could anyone indicate me what I have done wrong? Thank you.

Move `app` to outside of `options` in your `gruntfile.js`. – cartant Oct 08 '16 at 14:01 — cartant, Oct 08 '16 at 14:01
Indeed, that was the problem. It works now, thanks a lot. – Lucian Bredean Oct 09 '16 at 05:07 — Lucian Bredean, Oct 09 '16 at 05:07

score 0 · Answer 1 · answered Sep 25 '18 at 10:55

We don't need to write templates key under includeSource key:

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 code is enough for including js and css:

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

Automatic reference of local *.js and *.css files into index.html with grunt

1 Answers1

Automatic reference of local .js and .css files into index.html with grunt