Статическая компиляция HTML с частицами с использованием Grunt.js

Я искал все для чего-то, что позволит мне прекомпилировать статические сайты с помощью Grunt. У него должны быть частичные, поэтому я могу включать в себя такие вещи, как общий верхний/нижний колонтитул на страницах.

До сих пор я действительно нашел Jade, у которого есть плагин grunt и этот плагин для Grunt, который компилирует шаблоны Dust.js для статического HTML. Мне не очень нравится синтаксис Jade, а плагин Dust для Grunt менее идеален.

Существуют ли какие-либо статические шаблоны HTML-шаблонов с поддержкой Grunt/ Gulp, которые не слишком сильно отклоняются от обычного HTML и все еще активны?

Ответы

Ответ 1

Я нашел этот плагин с именем grunt-includes. Я искал ответ на ваш вопрос навсегда. Это первый, который я видел, который кажется простым в использовании. У всех остальных, похоже, есть эта функция, но они делают 20x других вещей, поэтому они кажутся неправильным инструментом для работы.

Единственное, что мне не хватает, это возможность префикс относительных путей. Я говорю с разработчиком modest, который становится лучшим вариантом.

ОБНОВЛЕНИЕ: там grunt-includes-replace, который почти так же прост и может префикс относительных путей. IE: он позволяет передавать переменные.

Ответ 2

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

http://www.youtube.com/watch?v=oRwL5Y7K0CM (5:43)

http://www.youtube.com/watch?v=R9Jj9ciA2wM (16:44)

Здесь официальный сайт:

https://github.com/assemble/assemble

С этого сайта вы можете увидеть, как можно использовать частичные; например:

assemble: {
  options: {
    assets: 'assets',
    partials: ['docs/includes/**/*.hbs'],
    data: ['docs/data/**/*.{json,yml}']
  },
  pages: {
    src: ['docs/*.hbs'],
    dest: './'
  }
}

Тогда, по сути, вы можете запустить что-то вроде:

grunt assemble

или для более мелкозернистого управления вы можете выполнить задачу сборки цели, например:

grunt assemble:your_target

Это хорошо работает для меня. Для этого требуется немного кривая обучения, и документы, скорее всего, улучшатся, когда они продолжат работать над этим.

Ответ 3

Я использую https://npmjs.org/package/grunt-dust для предварительной компиляции шаблонов пыли с частицами.

Соответствующая часть Gruntfile.js может выглядеть примерно так:

    dust: {
        defaults: {
            files: {
                'views/index.js': 'views/**/*.dust'
            },  
            options: {
                wrapper: 'commonjs',
                runtime: false,
                wrapperOptions: {
                    returning: 'dust',
                    deps: {
                        dust: 'dustjs-linkedin',
                        dustHelpers: 'dustjs-helpers'
                    }   
                }   

            }   
        }   
    },

Это положит все скомпилированные шаблоны пыли в views/index.js.

В https://github.com/vtsvang/grunt-dust

имеется больше примеров и более подробных документов.