Хочу склеить несколько html фалов в один с помощью gulp-include, не выходит. Как исправить?

Question

freeman0204 @freeman0204

Хочу склеить несколько html фалов в один с помощью gulp-include, не выходит. Как исправить?

Есть просто https://www.npmjs.com/package/gulp-include а есть такой https://www.npmjs.com/package/gulp-file-include и думаю есть еще. Не понятно какой использовать?
Вот мой task:

gulp.task('html', function() {
   return gulp.src(['frontend/assets/index.html', 'frontend/assets/header.html'])
    .pipe(include())
    .pipe(rename('index.html'))
    .pipe(gulp.dest('public'));
});

Если нужен весь код, я скину. Пытался подключить 2 файла что у меня есть и склеить их в index.html в папку public. Но они не склеиваются. Если я изменяю файл index.html то в папку public записывается его содержимое а если header.html то содержимое header.html.
Как их соединить что бы было по аналогии с concatCss?

Вопрос задан более трёх лет назад
1695 просмотров

Комментировать

Подписаться 2 Оценить Комментировать

Решения вопроса 2

5 комментариев

freeman0204 @freeman0204 Автор вопроса

Не пойму куда это вставлять ?
Как распределить теги, если у меня идет в отдельных файлах main то в первом будет открывающий тег main а в последнем закрывающий?

Написано более трёх лет назад

Danila @Machinez

Артур Черешнюк:
вот пример с директивами

<body>
  <div class="container">
    <!--=include relative/path/to/header.html -->
    <div class="content">
    ....
    </div>
    <!--=include relative/path/to/footer.html -->
  </div>
</body>

Написано более трёх лет назад

freeman0204 @freeman0204 Автор вопроса

Данила: Да получилось, спасибо. Хочу задать здесь вопросы, что бы не создавать подобные темы.
1. Сейчас если включен watch я могу создать файл, сохранить и текст что я напишу в нем появится в итоговой сборке. А вот если добавить фото, то оно появится только после перезапуска сборки. Как сделать что бы фото и подобные файлы проходили через watch т.е. сразу копировались в итоговую сборку?
2. Не могу зайти на смартфон в browserSync. Ввожу 192.168.31.194:3000 не заходит. В чем может быть проблема? Я подключен через wifi.

Написано более трёх лет назад
Danila @Machinez
Артур Черешнюк:
взял за основу пример вашей сборки из прошлого вопроса
gulp.task('assets', function() { return gulp.src('frontend/assets/{fonts,images}/**/*.*') .pipe(gulp.dest('public')); }); ... gulp.watch('frontend/assets/**/*.*', gulp.series('assets')); ...

и всё будет копироваться при изменении, хотя для картинок лучше будет сделать отдельный таск с оптимизацией

насчет сервера не уверен, перепроверьте правильность адреса и порта, при запуске browser-sync пишет
[BS] Access URLs:
-------------------------------------
Local: localhost:7778
External: 192.168.1.30:7778
-------------------------------------
UI: localhost:3001
UI External: 192.168.1.30:3001

"External: 192.168.1.30:7778" то, что вам нужно, а иначе я не знаю
Написано более трёх лет назад
freeman0204 @freeman0204 Автор вопроса

Данила: По первому вопросу убрал, заработало. Но теперь сборка копирует все фотографии сначала каждый раз. А то что у меня было {since: gulp.lastRun('assets')}) должно было копировать только то что изменилось. Но почему то не работало.

Возможно как то сделать что бы при добавлении фотографии сами копировались как сейчас, но не все а только новые?
Вот мой таск по фотографии:
gulp.task('images', function() {
return gulp.src('frontend/assets/images/**/*.{jpg,jpeg,png,gif}')
.pipe(cache(imagemin({
interlaced: true,
progressive: true,
svgoPlugins: [{removeViewBox: false}],
une: [pngquant()]
})))
.pipe(gulp.dest('public/images/'));
});

По второму у меня все также только другие айпи, Externalна тел не работает.

Написано более трёх лет назад

3 комментария

freeman0204 @freeman0204 Автор вопроса

Если я хочу разбить index.html не только не header.html и footer.html а еще сам main т.е. каждый блок в main отдельный файл. Тогда получается файла index.html не будет. Я так делал не хочет работать. Как можно это реализовать? Вот мой таск:
gulp.task('html', function() {
return gulp.src('frontend/assets/index.html')
.pipe(rigger())
.pipe(gulp.dest('public'));
});

Написано более трёх лет назад
LMI @LMI

К сожалению rigger не поддерживает CSS.

Написано более трёх лет назад
Сергей Бурдужа @serii81

freeman0204: а для css есть import

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Как посчитать количество пересечений с помощью метода filter?
- 1 подписчик
- 9 часов назад
- 130 просмотров
3

ответа
Gulp.js

Простой
Gulp livereload не перезагружает браузер, как исправить?
- 1 подписчик
- 11 часов назад
- 15 просмотров
0

ответов
JavaScript

Простой
Как реализовать логику назад вперед?
- 1 подписчик
- 12 часов назад
- 81 просмотр
0

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- вчера
- 134 просмотра
1

ответ
Gulp.js

Простой
Gulp сборка, изображения при автоматическом переносе в dist не читабельные, как исправить?
- 1 подписчик
- вчера
- 46 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 52 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 195 просмотров
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 23 нояб.
- 109 просмотров
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 728 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 22 нояб.
- 78 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Текст из фотографии в отдельный файл

26 нояб. 2024, в 04:41

1500 руб./за проект

Выложить 75 курсов на геткурс и настроить базовые функции

26 нояб. 2024, в 02:18

15000 руб./за проект

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

50000 руб./за проект

Answer 1 · 2016-05-25 02:12:32

во-первых в gulp.src лучше указать только главный файл index.html в который будут подключаться другие куски
во-вторых в документации написано, что плагин использует директиву с помощью которой распознаёт какой и куда файл "сувать"
для HTML:

судя по тому, что вы об этом ничего не написали думаю её нет

и тогда всё должно работать

Answer 2 · 2016-05-25 13:17:21

Andrew Floatrx @floatrx

web-design, верстка

попробуй rigger
склеивает все... и html, и js...

//= frontend/assets/header.html

Ответ написан более трёх лет назад

3 комментария

Хочу склеить несколько html фалов в один с помощью gulp-include, не выходит. Как исправить?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт