Всем привет, друзья! Сегодня мы рассмотрим один из лучших способов реализации 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, в настоящее время не существует.
Премиум уроки от WebDesign Master
Другие уроки по теме «Инструменты»
- OptimizedHTML 5: Важные обновления стартера для JS-разработки
- Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
- Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)
- PageSpeed Insights - Оптимизация (обновление)
- October CMS - Первое знакомство