Question

我有一个有3页的应用程序，我想自成一体。为了DRY代码的利益，我想为页眉和页脚内容做“包含”。我已经查看了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).

它是一个“意外的标识符”的事实告诉我，我没有点击“i”或正确地越过“t”。更有经验的眼睛受到赞赏！

注意：我考虑使用grunt-contrib-concat，但如果没有通配，我必须完成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进行基本包含

1 个答案: