1. Главная
  2. Блог
  3. gulp-file-include

gulp-file-include

Простой плагин для сборщика gulp, который помогает облегчить работу при верстке сайтов

В качестве сборщика я использую gulp 4, устанавливаем сам плагин:

npm install --save-dev gulp-file-include

В файле сборщика gulpfile.js подключаем плагин:

const fileinclude = require('gulp-file-include');

Теперь осталось написать функцию для нашего таска по сборке (подключению) отдельных блоков в наш основной html файл:

function joinHtml() {
    return  gulp.src([
    	'./src/*.html',

    	])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./build/'))
    .pipe(browserSync.stream())
}
gulp.task('joinHtml', joinHtml);

Запускаем такс в командной строке gulp joinHtml

Функция очень простая, ищет файлы в каталоге /src/ и подключается нужные нам блоки, которые указаны через @@include (символы собаки можно заменить на свои), обновляем страницу через плагин browserSync (заранее нужно установить). Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
@@include('./template-parts/header.html')	

<div class="content">Какой-то контент</div>

@@include('./template-parts/footer.html')
</body>
</html>

При ошибке not such file or directory собственно либо не существует файла, либо вы неверно указали путь

Если вы не хотите, чтобы файлы подключаемых блоков копировались в /build , то можно немного подправить функцию указав исключения имен файлов:

function joinHtml() {
    return  gulp.src([
    	'./src/*.html',
    	'!./src/template-parts/*.html',
 //исключаем все файлы из папки 
    	])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./build/'))
    .pipe(browserSync.stream())
}