В этом посте поделюсь своим опытом реализации задачи компиляции jade-файлов в HTML-формат.
Рассмотрю два способа реализации этой задачи. Первый - самый нативный, с помощью родной утилиты jade
. Второй - с помощью плагина gulp-jade
под Gulp.
Но способов компиляции Jade в HTML существует больше - есть плагин под Sublime Text, существует плагин под Grunt. Обладатели Mac OS X могут воспользоваться прекрасной программой CodeKit. И я уверен, что это только малая часть того, чем можно воспользоваться.
Кратко остановлюсь на вопросе, зачем мне понадобился Jade. Честно сказать, до недавнего момента я даже не подозревал о сущестовании такого шаблонизатора. Тихо-спокойно пользовался Sublime Text + Emmet и считал, что я на вершине современных требований к web-разработчику.
Однако это оказалось не совсем так. Мне посоветовали посмотреть в сторону Jade и разобраться с работой в нем. Хотя бы с синтаксисом, для начала.
И я скажу вам - мне понравилось! Даже простое использование синтаксиса. Первое впечатление и ощущение - использование этого шаблонизатора освобождает от рамок HTML при написании кода. Точнее - при создании кода сосредотачиваешься на содержимом, которое создаешь.
Но у Jade есть еще и миксины, с которыми мне предстоит познакомиться. Так что - лучшее только впереди!
Написание кода в этом шаблонизаторе чем-то похоже на написание текста в Markdown. Под Markdown имеются (и должны иметься) утилиты\программы для компиляции в HTML. Точно также для Jade должны иметься (и имеются) утилиты\программы для компиляции в HTML.
Jade - синтаксис для Sublime Text
Прежде чем писать код в редакторе, в моем случае необходимо настроить поддержку синтаксиса Jade. Я использую Sublime Text 3, который изначально не имеет таковой.
Исправить это легко - достаточно через Package Control
установить пакет Jade
. Помимо подсветки синтаксиса, появиться поддержка автоматической табуляции, что значительно упрощает процесс написания кода.
Пример подсветки синтаксиса Jade в Sublime Text:
Jade - родная утилита шаблонизатора
Разработчиками была создана родная утилита для преобразования jade-файлов в HTML-файлы. Имя утилиты легко запомнить - это jade
.
Утилита является модулем под Node.js, поэтому последний у вас должен быть заранее установлен (если еще не установлен по какой-то необъяснимой причине).
Инсталляция утилиты производиться банально:
$ sudo npm install -g jade
Утилита имеет немногочисленные параметры, с кратким описанием которых можно ознакомиться на странице официальной документации - Jade - Command Line.
Но стоит обратить внимание на некоторые интересные параметры:
К примеру:
-P, --pretty
- создание “удобочитаемого” HTML-кода-w, --watch
- мониторинг изменений файлов
Использование утилиты также является простым делом. К примеру, можно указать ей производить компиляцию всех файлов в директории templates
:
$ jade templates
Утилита может сама создавать jade-файлы:
$ jade {foo,bar}.jade
Или же можно реализовать два способа вывода:
$ jade > my.jade > my.html
$ echo "h1 Jade!" | jade
Или же осуществить рендеринг двух директорий foo
и bar
в директорию tmp
:
$ jade foo bar --out /tmp
Gulp-jade - компиляция под Gulp
Кто знаком с task-manager’ом Gulp, тот может воспользоваться соответствующим плагином gulp-jade
под него. Страничка плагина размещена здесь - gulp-jade.
Установка плагина стандартная:
$ npm install --save-dev gulp-jade
Затем нужно создать задачу (task) для компиляции jade-файлов в HTML-файлы. Ниже приведу свой рабочий task:
var gulp = require('gulp'),
jade = require('gulp-jade');
// Jade
gulp.task('jade', function(){
gulp.src('./template/*.jade')
.pipe(jade())
.pipe(gulp.dest('./dist/'))
});
// Watch
gulp.task('watch', function(){
gulp.watch('./template/*.jade',['jade']);
});
В Сети есть еще один интересный Gulp-task. Работоспособность его не проверял, взял как есть, для - “чтобы было”.
Как говориться на странице-оригинале, эта задача производит компиляцию файлов из директории app/
в директорию _public/
:
jade = require 'gulp-jade'
gulp.task 'jade', ->
gulp.src parameters.app_path + '/*.jade'
.pipe jade pretty: true
.pipe gulp.dest parameters.web_path
.on 'error', gutil.log
Заключение
Я запомнил (записал для себя), а вы (уважаемый читатель) познакомились (если не знали) с двумя способами настройки компиляции jade-файлов в HTML-файлы.
На этом все.
Комментарии