Используйте Grunt для базовых включений

У меня есть приложение, которое имеет 3 страницы, которые я хотел бы быть автономными. В интересах DRY-кода, я хотел бы сделать "include" для содержимого верхнего и нижнего колонтитула. Я посмотрел на документы и примеры для grunt-html-build, и у меня как-то не получится. Весь HTML находится в пути 'src/html'с включенным включением в подпапку "включает": '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" должным образом. Более опытные глаза приветствуются!

Примечание: я подумал об использовании вместо этого /questions/tagged/grunt-contrib-concat, но без глобализации мне пришлось бы выполнить 3 отдельные задачи, чтобы сохранить неповрежденным уникальный контент.

[редактировать, чтобы добавить:]

У меня был успех для моего самого базового варианта использования, использующего другую задачу grunt, называемую (соответственно) grunt-includes. Я был в состоянии включить мои файлы соответствующим образом.

Тем не менее, я по-прежнему заинтересован в возможности /questions/tagged/grunt-html-build для условной сборки пакетов разработчика или дистрибутива. Любое понимание по-прежнему ценится!

Источник

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']);
};
Источник
Другие вопросы по тегам