Gulp. Как правильно реализовать подключение хедера и футера из отдельных файлов?

Question

[Олег]

У меня есть папки "app" и "dist". Написано два отдельных таска: первый мониторит файлы в папке "app", а второй выгружает проект в продакшн (папка "dist"). Всё ОК, но есть одна проблема.

В какой-то момент я захотел реализовать подключение на страницы хедера и футера из отдельных файлов. Для этого обычно используется плагин "gulp-rigger", но во всех примерах его использования берётся файл HTML, обрабатывается и закидывается в "dist". И "dist" же и мониторится. Но у меня-то не так.

Как мне реализовать шаблонизацию, чтобы файлы корректно работали в папке "app"

Answer 1

[sergey]

Ничего из написанного вами не понял, что у вас не так?

Пример:

var gulp = require('gulp'),
rigger = require('gulp-rigger');
var src = {
       html: ['./src/*.html']
    },
gulp.task('html', function() {
    gulp.src(src.html)
        .pipe(rigger())
        .pipe(gulpIf(env !== 'dev', minifyHTML()))
        .pipe(gulp.dest(outputDir))
        .pipe(connect.reload())
});

gulp.task('watch', function() {
    gulp.watch('./src/**/*.html', ['html']);
});

в папке src (app) создаем папку template, а которой файлы header.html, footer.html и другие...
Далее в своих файлах html прописываем всего лишь:
//= template/header.html
//= template/footer.html
и вуаля, отключаем себе головную боль.

Comments

[Aleksey Chernikov]

Насколько я понял, требуется использование шаблонов без выгрузки в отдельную дирректорию. Другими словами, чтобы gulp читал именно тот файл, в котором подключены шаблоны. А склеивать файл вместе с шаблонами он хочет уже на релизе с последующей выгрузкой в соответсвтующую папку.

[sergey]

ch3rri: ну а тут как происходит? в папке src мы прописываем шаблоны, а таска gulp их собирает и выбрасывает в dist (продакт). О какой отдельной папке речь?

[Aleksey Chernikov]

SM: Верно, rigger работает именно так. А автор хочет отслеживать, скажем, index.html в папке src, в котором куча шаблонов подключена, не собирая его в готовый файл. Грубо говоря, вотчить именно этот файл.
На самом деле я использую rigger так, как вы описали. Тут ничего нового не придумаешь и вотчить файл с шаблонами без компиляции тоже не получится. Возможно, есть другой плагин.

[Олег]

ch3rri: Всё верно. Пускай он выплёвывает index.html в "dist", никаких проблем. Просто в идеале мне нужно редактировать index.html в папке "app" и видеть в браузере результат с уже подключенными хедером и футером. Но у меня watch настроен на мониторинг папки "app", а не "dist".
Тут есть какое-то нормальное решение? Или надо переписывать таск watch на мониторинг папки dist, чтобы проект пересобирался при любом изменении?
Попробовал внедрить код выше. В результате при запуске watch index.html отправился в dist с подключенными хедером и футером, но в браузере открылся файл вот с этими командами:
//= template/header.html
//= template/footer.html

Если что, собирал gulpfile по этой статье: webdesign-master.ru/blog/tools/2016-03-09-gulp-beg...
Собственно вопрос в том, как внедрить rigger в такую сборку.

[Aleksey Chernikov]

r45her: Я тогда вообще неправильно понял вас.
Да, делайте watch из dist и все у вас будет в порядке.
Посмотрите пример с хабра. https://habrahabr.ru/post/250569/

[sergey]

r45her: я вам привел пример из рабочего примера, на котором собраны десятки проектов, а то что вы сбросили в ссылке - это лишь урок, и как по мне не самый удачный (так разве что поучиться)

[Олег]

Хорошо, спасибо. Буду переписывать.

[sergey]

r45her: пожалуйста:) вот присмотритесь к ссылке выше, что Вам предложил ch3rri Приятная сборка фронтенд-проекта, очень правильно и понятно как для начинающих.