Gulp include на стороне сервера Browsersync + Build

Всем привет, друзья! Сегодня мы рассмотрим один из лучших способов реализации include parts в Gulp на стороне сервера Browsersync для повторного использования кода в процессе вёрстки. Отличительной особенностью данного способа является возможность включения частей кода в проект "на лету", без сборки. Это может значительно ускорить время выполнения задач. Рассмотрим создание таска build для сборки готового фронтенда в отдельную папку.

После обновления стартера OptimizedHTML 5 появилось много вопросов о том, что делать, если в проекте есть повторяемый код, неужели его следует копипастить из файла в файл? Сегодня мы рассмотрим способ реализации include на стороне Browsersync с использованием SSI и создание таска build для сборки готового проекта.

Данный способ базируется на использовании SSI, соответственно, для работы SSI с Gulp, нам необходимо подружить популярнейший сервер Browsersync и SSI. Для этого есть соответствующий модуль "browsersync-ssi", который следует установить в ваш проект:

npm i -D browsersync-ssi

Далее подключаем модуль в gulpfile.js:

const bssi = require('browsersync-ssi')

Кроме того, следует доработать вашу функцию browsersync(), которая отвечает за работу с Browsersync:

function browsersync() {
	browserSync.init({
		server: {
			baseDir: 'app/',
			middleware: bssi({ baseDir: 'app/', ext: '.html' })
		},
		tunnel: 'yousutename', // Attempt to use the URL https://yousutename.loca.lt
		notify: false,
		online: true
	})
}

Ключевые моменты, на которые здесь следует обратить внимание:

• Строка параметра middleware: bssi({ baseDir: 'app/', ext: '.html' }) отвечает за подключение SSI к Browsersync. В качестве параметров для ssi() вы можете указать свои значения, конкретно под ваш проект.
• Параметр tunnel отвечает за формирования внешнего URL вашего проекта. Это может быть полезно в том случае, если необходимо продемонстрировать проект кому-либо ещё, кто не находится в вашей локальной сети. Адрес https://yousutename.loca.lt будет доступен в любом месте, где бы не находился посетитель, данные берутся с вашего локального сервера Browsersync в реальном времени.

Обратите внимание, в качестве значения для параметра tunnel: желательно указывать что-то уникальное, чтобы адрес был сформирован без ошибок и не пересекался с адресами других пользователей.

Теперь вы можете создавать отдельные части проекта, например "/parts/header.html", которые можно инклудить в любое место основного файла html следующим образом:

<!--#include virtual="/parts/header.html" -->

Данный способ отлично подойдёт в тех случаях, когда после вёрстки вам предстоит этап посадки на какой-либо backend-движок. Те части проекта, которые вы инклудите в различных местах вашей вёрстки, можно с лёгкостью оформить в виде чанков (MODX) или в виде partials, если вы используете October CMS. Во многих других CMS и фреймворках система аналогичная.

Кроме того, можно задавать переменные SSI. Например:

<!--#set var="title" value="OptimizedHTML 5" -->
<!--#include virtual="/parts/header.html" -->

И выводить их в parts (/parts/header.html):

<title><!--#echo var="title" --></title>

Установим дополнительный модуль del:

npm i -D del

Модуль del нам необходим для очистки dist перед сборкой. Модуль ssi устанавливать не нужно, он устанавливается вместе с browsersync-ssi.

Подключаем модули в gulpfile.js:

const ssi = require('ssi')
const del = require('del')

И оформляем соответствующие фуркции копирования сжатых ресурсов, функцию сборки html файлов и функцию очистки dist (на примере стартера OptimizedHTML 5):

function buildcopy() {
	return src([
		'{app/js,app/css}/*.min.*',
		'app/images/**/*.*',
		'!app/images/src/**/*',
		'app/fonts/**/*'
	], { base: 'app/' })
	.pipe(dest('dist'))
}

async function buildhtml() {
	let includes = new ssi('app/', 'dist/', '/**/*.html')
	includes.compile()
	del('dist/parts', { force: true })
}

function cleandist() {
	return del('dist/**/*', { force: true })
}

И, в заключение, экспортируем новую функцию build как составную задачу:

exports.build = series(cleandist, scripts, styles, images, buildcopy, buildhtml)

Обратите внимание, модуль ssi мы используем в обычной асинхронной функции, так как специализированного модуля для Gulp, который корректно работал бы с переменными SSI, в настоящее время не существует.