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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

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 

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

Answer 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