使用 Grunt 进行基本包含

Question

我有一个包含 3 个页面的应用程序，我希望它是独立的。为了 DRY 代码，我想对页眉和页脚内容执行 "includes"。我已经查看了 grunt-html-build 的文档和示例，但不知何故，我有点不够用。所有 HTML 都在路径 'src/html' 中，包含在名为 "includes" 的子文件夹中：'src/html/includes'.

这是 HTML 示例：

<!doctype html>
<html>
  <head>
  <!-- build:section head --><!-- /build -->
  </head>

  <body>
  <p>A bunch of unique content for each of the pages</p>

  <!-- build:section footer --><!-- /build -->
  </body>
</html>

然后在我的 gruntfile 我有以下内容：

htmlbuild: {
  src: 'src/html/app-*.html',
  dest: 'dist/',
  options: {
    sections: {
      head: 'src/html/includes/head.html',
      footer: 'src/html/includes/footer.html'
    }
  }
}

我确定这只是语法问题，但我似乎无法克服这个错误：

Warning: an error occurred while processing a template (Unexpected identifier).

它是 "unexpected identifier" 的事实告诉我，我没有正确地打点 "i" 或穿过 "t"。有经验者多谢！

注意： 我考虑过使用 grunt-contrib-concat 代替，但如果没有 globbing，我将不得不进行 3 个单独的任务以保持独特的内容完整无缺。

[编辑添加：]

我使用另一个称为（适当地）grunt-includes 的 grunt 任务成功完成了我非常基本的用例。我能够适当地包含我的文件。

但是，我仍然对 grunt-html-build 有条件地构建开发包或分发包的能力感兴趣。任何见解仍然值得赞赏！

Answer 1

htmlbuild 是一个多任务，所以你需要在一个目标下定义你的文件：

module.exports = function(grunt) {
    grunt.initConfig({
        htmlbuild: {
            dist: {
                src: 'src/html/app-*.html',
                dest: 'dist/',
                options: {
                    sections: {
                        head: 'src/html/includes/head.html',
                        footer: 'src/html/includes/footer.html'
                    }
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-html-build');
    grunt.registerTask('default', ['htmlbuild']);
};

使用 Grunt 进行基本包含

Use Grunt for basic includes

gruntjs

gruntfile

grunt-html-build

grunt-includes