Grunt compile external JS into inline HTML

Question

Is it possible to take code from an external JS file, then paste it inline into script tags (in index.html), once the application is built?

For example, both files below are intended to be identical but I'd like the JS to be implemented externally in the src/dir and inline within the build/dir:

src/index.html

<head>
  <script src="long/minified/code.js"></script>
</head>

build/index.html

<head>
  <script>
    // long... minified code to be added inline here
  </script>
</head>

long/minified/code.js

(function(){var this,isSomeLong='minifiedCode';})();

Gruntfile.js

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
        dist: {
            src: [
                'long/minified/code.js',

                  ],
            dest: 'build/index.html',
         }
});

It's possible I'm completely off and need something like grunt-include-source

Pete TNT · Accepted Answer · 2015-11-12 07:32:27Z

3

You can use grunt-processhtml to easily inline your scrips:

HTML

<head>
<!-- build:js inline -->
<script src="long/minified/code.js"></script>
<!-- /build -->
</head>

Gruntfile task:

grunt.initConfig({
  processhtml: {
    dist: {
      files: {
        'build/index.html': ['src/index.html']
      }
    }
  }
});

answered Nov 12, 2015 at 7:32

Pete TNT

8,4834 gold badges40 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Grunt compile external JS into inline HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related