Предварительная компиляция шаблонов руля с Grunt
Предполагается, что у вас установлен Node.js. Если нет, то иди и сделай это.
1) Настройка зависимостей узлов:
В корневой каталог приложений добавьте файл с именем package.json. Вставьте в этот файл следующее:
{
"devDependencies": {
"grunt-contrib-handlebars": "~0.6.0",
"grunt-contrib-watch": "~0.5.3",
"handlebars": "~1.3.0"
},
}
Этот JSON-файл сообщает Node, какие пакеты ему нужно установить. Это помогает очень быстро начать работу других разработчиков, как вы увидите на следующем шаге.
2) Установка зависимостей узла:
В вашем терминале / командной строке / powershell cd в корневой каталог проектов и выполните следующие команды:
npm install grunt -g
npm install grunt-cli -g
И для установки зависимостей, перечисленных в вашем package.json:
npm install
Теперь вы установили все необходимые вам зависимости узлов. В корневом каталоге ваших проектов вы увидите node_modules folder.
3) Настройка Grunt:
В корневом каталоге ваших проектов создайте файл с именем Gruntfile.js. Вставьте в этот файл следующее:
module.exports = function(grunt) {
var TEMPLATES_LOCATION = "./src/templates/", // don't forget the trailing /
TEMPLATES_EXTENSION = ".hbs",
TEMPLATES_OUTPUT_LOCATION = TEMPLATES_LOCATION, // don't forget the trailing /
TEMPLATES_OUTPUT_FILENAME = "compiled_templates.js"; // don't forget the .js
grunt.initConfig({
watch: {
handlebars: {
files: [TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION],
tasks: ['handlebars:compile']
}
},
handlebars: {
compile: {
src: TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION,
dest: TEMPLATES_OUTPUT_LOCATION + TEMPLATES_OUTPUT_FILENAME,
options: {
amd: true,
namespace: "templates"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-handlebars');
grunt.loadNpmTasks('grunt-contrib-watch');
}
4) Настройка по вашему вкусу:
Если вы не используете Require.js , вам нужно изменить handlebars.compile.options.amd на false. Вы также можете настроить параметр namespace по своему вкусу. Если вы используете модули require / amd, свойство namespace не имеет значения (по умолчанию это "JST", если вы его удалите).
Поскольку все структуры проекта немного отличаются, вам нужно немного настроить Gruntfile. Измените константы TEMPLATES_LOCATION, TEMPLATES_EXTENSION, TEMPLATES_OUTPUT_LOCATION, TEMPLATES_OUTPUT_FILENAME в соответствии с вашим проектом.
Если ваши шаблоны разбросаны по всему приложению, вам нужно изменить TEMPLATES_LOCATION на самый низкий каталог. Убедитесь, что ваши шаблоны изолированы от ваших node_modules, bower_components или любых других сторонних каталогов, потому что вы не хотите, чтобы Grunt компилировал сторонние шаблоны в скомпилированные шаблоны ваших приложений. Если вы включите весь свой собственный код в каталог ./src, ./js, ./app, все будет в порядке.
5) Компиляция шаблонов с Grunt:
Чтобы запустить grunt в фоновом режиме, откройте свой терминал и cd в корневом каталоге своих проектов и выполните команду: grunt watch:handlebars (также работает grunt watch). При grunt, работающем в фоновом режиме, все изменения в ваших файлах шаблонов будут автоматически скомпилированы, а выходной файл, указанный handlebars.compile.dest, будет переписан по мере необходимости. Вывод будет выглядеть примерно так:
Running "watch" task
Waiting...
Чтобы запустить задачу компиляции в одиночку, откройте свой терминал и cd в корневом каталоге своих проектов и выполните команду: grunt handlebars:compile (также работает grunt:handlebars). Вывод будет выглядеть примерно так:
Running "handlebars:compile" <handlebars> task
File "./src/templates/compiled_templates.js" created.
Done, without errors.