Grunt 将外部 JS 编译成内联 HTML

Question

是否可以从外部 JS 文件中获取代码，然后在构建应用程序后将其内联粘贴到脚本标记中（在 index.html 中）？

例如，下面的两个文件本来是相同的，但我希望 JS 在 src/dir 中外部实现并在 build/dir 中内联：

src/index.html

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

构建/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',
         }
});

可能我完全没空了，需要像 grunt-include-source

这样的东西

Answer 1

您可以使用 grunt-processhtml 轻松内联您的脚本：

HTML

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

Gruntfile 任务：

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

Grunt 将外部 JS 编译成内联 HTML

Grunt compile external JS into inline HTML

html

javascript

gruntjs