Gulp Jade — установка и настройка
В этой статье мы рассмотри как установить и использовать шаблонизатор Jade вместе со сборщиком проектов Gulp.
Jade — это мощный шаблонизатор с минималистичным синтаксисом. Использование шаблонизатора вместо написания HTML, позволит укорить работу и организовать код, разделить логику и разметку.
Установка Jade
Будет считать, что Gulp у вас уже установлен (подробнее про установку Gulp). Откройте командную строку и перейдите в корневую папку вашего проекта. Запустите команду:
1 | npm install gulp-jade --save-dev |
Вы увидите несколько предупреждений, о том, что не заполнено поле Description и repository field, пока мы пропустим, т.к. они не влияют на проект. После установки в папке node_modules появится папка gulp-jade. В файле package.json появится запись:
1 2 3 4 5 6 | { "devDependencies": { "gulp": "^3.8.11", "gulp-jade": "^1.0.0: } } |
Настройка gulpfile.js
Прежде чем конвертировать index.jade в index.html нам необходимо настроить файл gulpfile.js, который лежит в корневой папке проекта.
Откройте файл gulpfile.js и разместите в нем следующий код:
1 2 3 4 5 6 7 8 9 | var gulp = require('gulp'), jade = require('gulp-jade'); // чтобы запустить эту задачу, наберите в командной строке gulp jade gulp.task('jade', function() { return gulp.src('src/templates/**/*.jade') .pipe(jade()) .pipe(gulp.dest('builds/development')); // указываем gulp куда положить скомпилированные HTML файлы }); |
После настройки gulpfile.js достаточно набрать в командной строке gulp jade для запуска компиляции.