CODEWITHSUNDEEP
javascripthtmlgruntjs
bruh
bruh

Reputation: 2305

Grunt compile external JS into inline HTML

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

Upvotes: 1

Views: 309

Answers (1)

Pete TNT
Pete TNT

Reputation: 8403

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

Upvotes: 3

Related Questions