Несколько способов включения HTML в HTML использование Gulp, PHP и других вариантов

Разделение PHP и HTML кода, использование шаблонов

При написании кода на PHP может возникнуть потребность создать в коде элемент на HTML. Начинающие разработчики пишут HTML код прямо в файле с PHP кодом, просто заключая его в кавычки и заменяя в нем переменные данные. Конечно, такой способ прост, позволяет не отвлекаться на дополнительную работу по разделению PHP и HTML. Но это неправильно, необходимо весь HTML код выносить в отдельные файлы – HTML шаблоны.

Почему необходимо отделять HTML от PHP? Причин может быть несколько:

• смешивание кода HTML и PHP в одном файле выглядит некрасиво;
• нет подсветки HTML синтаксиса, загромождается код PHP – ведь обычно HTML код занимает довольно много места;
• невозможно повторное использование HTML кода в других местах веб-приложения;
• когда будет необходимо вносить изменения в HTML – придется долго искать этот участок кода в файле с PHP кодом.

На сегодняшний день для выполнения такой задачи разработаны различные шаблонизаторы, которые как раз созданы для отделения кода от верстки. Но не всегда есть желание использовать что-то стороннее, да и к тому же средствами PHP можно самому реализовать простую систему шаблонизации. Как это сделать?

Для примера создадим файл с расширением tpl, в котором будет храниться HTML код. Это и будет наш шаблон, расширение файла можно сделать любое, tpl здесь просто для примера. Соответственно в редакторе кода можно задать подсветку синтаксиса HTML для этого расширения (к примеру в Notepad++). В этом файле прописываются нужные переменные, которые необходимо будет заменить на нужные данные. Пример шаблона:

Далее создаем некоторую функцию, например – myfunction, в которой есть данные и путь к шаблону:

Наконец, необходимо создать функцию get_html, которая будет выполнять работу по подключению указанного шаблона и заменять в нем данные. Функция принимает два параметра: путь к шаблону и данные. В цикле происходит проход по всему содержимому массива data и создаются переменные. Затем включается буферизация и подключается шаблон, в котором используются вышесозданные переменные. В завершении прекращаем процесс буферизации и возвращаем готовый HTML код. Примерный код приведен ниже:

Таким образом, отделить HTML от PHP кода без использования сторонних шаблонизаторов не составит труда. Использование шаблонов позволит сделать разработку проекта более удобной и правильной.

Gulp для самых маленьких — подробное руководство

Всем привет, друзья! Сегодня мы подробно рассмотрим, что такое Gulp и как с его помощью можно автоматизировать работу Front-end разработчика. В результате урока мы соберем серьезное и внушительное рабочее Front-end окружение для веб-разработки с использованием Gulp.

Видео урок:

• Урок по обновлению Gulp до 4 версии: Ознакомиться с уроком Gulp 4

Основные ресурсы урока:

Проект-пример из данного урока вы можете посмотреть на GitHub и скачать: https://github.com/agragregra/gulp-lesson

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

• Создание веб-сервера и автоматическая перезагрузка страницы в браузере при сохранении кода, слежение за изменениями в файлах проекта;
• Использование различных JavaScript, CSS и HTML препроцессоров (CoffeeScript, Less, Sass, Stylus, Jade и т.д.);
• Минификация CSS и JS кода, а также, оптимизация и конкатенация отдельных файлов проекта в один;
• Автоматическое создание вендорных префиксов (приставок к названию CSS свойства, которые добавляют производители браузеров для нестандартных свойств) для CSS.
• Управление файлами и папками в рамках проекта — создание, удаление, переименование;
• Запуск и контроль выполнения внешних команд операционной системы;
• Работа с изображениями — сжатие, создание спрайтов, ресайз (png, jpg, svg и др.);
• Деплой (отправка на внешний сервер) проекта по FTP, SFTP, Git и т.д.
• Подключение и использование в проекте безгранично большого количества Node.js и Gulp утилит, программ и плагинов.
• Создание различных карт проекта и автоматизация другого ручного труда.

Можно с уверенностью сказать, что Gulp и множество утилит, написанных для него, подходят для решения практически любой задачи при разработке проекта любой сложности — от небольшого сайта до крупного проекта.

Любой проект, использующий Gulp имеет в корне файл gulpfile.js, который содержит набор инструкций по управлению проектом. Сразу хочется сказать, что написание инструкций для Gulp не является программированием, хотя пишутся на языке JavaScript. Не стоит пугаться больших gulpfile.js, в основном все инструкции однотипные и имеют общие черты. К тому времени, как вы прочтете данное руководство, у вас не должно остаться вопросов по Gulp, так как система сборки элементарная. Но если у вас останутся вопросы — обязательно пишите в комментариях.

Установка Gulp

Внимание! Если вы пользователь последней версии Windows, рекомендую использовать терминал Bash для веб-разработки. Скачивать инсталлятор с сайта Nodejs.org в этом случае не нужно. Воспользуйтесь этим руководством: Использование подсистемы Linux для веб-разработки в Windows.

Если у вас возникли проблемы при прохождении урока с использованием Gulp 4, рекомендую откатиться на 3 версию, пройти полностью урок и только после этого обновить package.json до 4 версии. Для лучшего понимания. Откатить версию можно в файле package.json. Вместо «gulp»: «^4.x.x», напишите версию «^3.9.1», удалите папку «node_modules» и установите пакеты заново «npm i«.

Для работы с Gulp у вас должен быть установлен Node.js. Установка Node.js для различных платформ довольно простая — скачиваете инсталлер Node для своей операционной системы и устанавливаете. Я рекомендую устанавливать последнюю версию Stable. Для пользователей Linux и последней версии Windows я подготовил отдельное руководство по установке: Использование подсистемы Linux для веб-разработки в Windows 10.

После того, как Node установлен, можно приступать к установке Gulp. Откройте терминал (правая кнопка мыши в папке с зажатым Shift > Откройте здесь оболочку Linux) и выполните следующую команду:

Для пользователей Mac и Linux и Ubuntu bash в Windows, глобальную установку с ключом -g необходимо выполнять с правами суперпользователя, sudo, например:
sudo npm i gulp -g.

Из данной команды мы видим, что запускается менеджер пакетов npm (Node Package Manager), который командой install устанавливает Gulp в систему. Ключ -g говорит о том, что пакет установится в систему глобально, то-есть в систему, а не в папку проекта. Без ключа -g пакет устанавливаются в ту папку, в которой выполняются текущие команды, поэтому будьте внимательны.

Создание проекта Gulp

Давайте создадим папку проекта для примера, с которой будем работать, пусть это будет, например, папка myproject.

Очень важно! Не создавайте русскоязычные папки проектов и следите за тем, чтобы путь до папки проекта не содержал кириллических символов, то-есть не был написан на русском языке. В противном случае, у вас могут возникнуть проблемы при работе различных утилит Gulp. Папка вашего пользователя также не должна быть русскоязычной. Всё только латинскими буквами.

Теперь откроем терминал в папке проекта. Для пользователей Windows достаточно зажать Shift и открыть контекстное меню. В нем появится пункт «Откройте здесь оболочку Linux». Оболочка Linux должна быть предварительно установлена, см урок: Использование подсистемы Linux для веб-разработки в Windows.

Далее выполним инициализацию проекта в той папке, которую создали:

Следуя инструкциям, заполним метаинформацию о нашем проекте:

Назовем проект «MyProject»

Оставим версию текущей — 1.0.0

Введем краткое описание проекта — My First Gulp Project:

Имя автора можно и указать 🙂

license оставляем по-умолчанию и вводим yes:

В результате такой несложной первоначальной настройки нашего нового Gulp проекта в папке myproject нарисуется новый файл package.json.

Файл package.json является файлом манифеста нашего проекта, который описывает помимо той информации, что мы внесли в терминале, еще и информацию об используемых пакетах в нашем проекте.

Например, если мы установим в проект Gulp с ключом —save-dev, то пакет и используемая версия автоматически добавится в наш package.json. Такой учет позволит быстро разворачивать новый проект с использованием уже имеющегося package.json и устанавливать необходимые модули с зависимостями, которые прописаны в package.json в новых проектах.

Давайте установим в наш проект Gulp:

Что мы видим из данной строки: npm устанавливает пакет gulp в текущую папку myproject (потому, что нет ключа -g, устанавливающий пакет глобально в систему) и сохраняет название пакета с версией в файл package.json:

Кроме того, у нас появляется папка node_modules, которая теперь содержит установленный пакет gulp и необходимые зависимости. В данную папку автоматически будут сваливаться все модули и зависимости, которые мы будем устанавливать в проект. Папок с зависимостями может быть очень много, не смотря на то, что мы установили не так уж и много пакетов. Это связано с тем, что в дополнение к основным пакетам устанавливаются программы, необходимые для корректной работы основного пакета. Ни чего чистить и удалять из папки node_modules не нужно. Кроме того, у вас может появиться дополнительный файл package-lock.json. В этом нет ничего страшного, это служебный файл, на который можно просто не обращать внимания.

Структура каталогов в проектах

Работая с различными плагинами, программами и скриптами, будь то jQuery плагин, модуль для CMS, веб-проект или какое-то другое ПО, вы наверняка замечали, что у всех проектов есть схожая структура каталогов, например, большинство проектов имеет папку dist и app. Давайте создадим первоначальную структуру нашего учебного проекта. В результате мы должны создать следующую структуру в нашем проекте myproject (все файлы, которых не было, пока создаем пустыми):

myproject/
app/
css/fonts/img/js/sass/index.html

dist/node_modules/gulpfile.jspackage.json

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

Здесь мы видим папку app/, в которой будут размещены все исходные материалы проекта — оригинальные CSS, Sass, js файлы библиотек, оригинальные изображения. В общем — это папка исходников нашего проекта.

Папка dist/ будет содержать уже готовый продукт, оптимизированный, сжатый, причесанный. Это папка продакшена.

gulpfile.js

Теперь давайте откроем в редакторе кода gulpfile.js и напишем в него:

Данной строчкой мы подключаем Gulp к нашему проекту, посредством функции require. Данная функция подключает пакеты из папки node_modules в наш проект, присваивая их переменной. В данном случае, мы создаем переменную gulp.

Далее мы уже можем работать с этой переменной и создавать таски (инструкции).

mytask — это название команды, которую вы будете вызывать в нужном вам месте gulpfile.js. Кроме того, можно в командной строке выполнить таск напрямую, написав:

gulpfile.js:

Результат выполнения команды gulp mytask:

Если вы используете Gulp 4 и у вас появляется ошибка о невозможности завершения таска, можно добавить async перед function() и выполнять код асинхронно:

Это, конечно очень простой базовый пример создания таска. Как правило, таски несколько сложнее и включают некоторые дополнительные команды:

• gulp.src — выборка исходных файлов проекта для обработки плагином;
• .pipe(plugin()) — вызов Gulp плагина для обработки файла;
• .pipe(gulp.dest(‘folder’)) — вывод результирующего файла в папку назначения (dest — пункт назначения).

Это база Gulp, теперь можно создавать инструкции. Для начала давайте создадим обработчик, который будет компилировать Sass файлы в CSS (CSS препроцессинг).

Gulp Sass

Давайте установим пакет gulp-sass в наш проект с сохранением версии и названия в package.json.

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

Далее подключим gulp-sass в файле gulpfile.js. Обратите внимание, что переменные для подключения пакетов можно перечислять через запятую:

Давайте создадим в папке app/sass файл main.sass, зададим в нем фон body — черный и напишем для него обработчик в gulpfile.js

gulpfile.js:

После этого, логичным будет выполнить в терминале наш новый таск sass:

В результате выполения данной команды в папке app/css появится файл main.css.

От таки чудеса, друзя. Как видим, все просто 🙂

Выборка файлов для gulp.src

В принципе, мы рассмотрели все, что необходимо знать о Gulp, теперь будем углубляться в каждую деталь того, что было изложено выше.

Выборка файлов в примере выше довольно простая, мы брали файл напрямую: gulp.src(‘app/sass/main.sass’). Но файлы также можно выбирать по шаблону. Шаблон выборки файлов называется glob — https://en.wikipedia.org/wiki/Glob_(programming). Давайте познакомимся ближе со всеми возможностями выборки файлов для обработки.

Самые распространенные шаблоны выборки

• *.sass — выбирает все файлы, имеющие определенное расширение (в данном случае, .sass) в корневой папке проекта.
• **/*.js — выбирает все файлы с расширением .js во всех папках проекта.
• !header.sass — исключает файл из общей выборки
• *.+(scss|sass) — задает комплексный шаблон для нескольких типов файлов, разделенных вертикальной чертой. В данном примере в выборкупопадут любые sass и scss файлы в корне проекта.

Давайте внесем некоторые изменения в таск sass и сделаем его более универсальным:

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

Обратите внимание, что файлы sass, которые предназначены для импорта в другие файлы, как части одного общего, начинаются с нижнего подчеркивания _part-1.sass. Такие файлы не учавствуют в компиляции, как отдельные файлы, а добавляются через @import в основные файлы.

Наблюдение за изменениями в файлах (Gulp Watch)

Gulp поддерживает метод watch для проверки сохраняемых файлов и имеет следующий синтаксис:

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

Что мы видим: Gulp наблюдает за всеми sass файлами и при сохранении выполняет таск sass, который автоматически компилирует их в css файлы.

Также, мы можем создать отдельный таск для наблюдения за всеми необходимыми файлами

Для Gulp 4 код будет выглядеть так:

Если мы запустим в консоли gulp watch, то Gulp будет автоматически следить за всеми измененями в файлах sass при сохранении и компилировать их в css.

Было бы неплохо в дополнение к этой красоте сделать автоматическую перезагрузку страницы при изменениях в файлах. Для этой задачи нам подойдет Browser Sync.

Автоматическое обновление страниц с использованием Bbrowser Sync

Browser Sync — это отличное решение для LiveReload страниц при сохранении файлов. При чем релоад происходит не только в одном браузере, но и во всех браузерах сети, будь это мобильные устройства или другие компьютеры в одной Wi-Fi сети.

Мы уже умеем устанавливать дополнения для Gulp, поэтому давайте установим Browser Sync в наш проект:

И, конечно-же, подключим в файле gulpfile.js, как мы это делали ранее с пакетом gulp-sass.

Создаем таск для Browser Sync:

Отлично! Наш сервер для работы и автоматического релоада готов. Теперь давайте последим за изменениями в Sass. Если файл Sass обновляется, автоматически инжектим в HTML измененный CSS файл:

Все, что нам осталось сделать — это запустить таск browser-sync перед тем, как запустится gulp watch. Немного модифицируем таск watch, добавив выполнение browser-sync и sass до запуска watch:

Обратите внимание, что мы выполняем таски [‘sass’, ‘browser-sync’] до запуска watch, так как их выполнение необходимо нам для корректного отображения изменений на момент запуска сервера.

Для Gulp 4 логичнее было бы написать так и выполнять всю конструкцию в дефолтном таске:

Расположим таск watch после всех других тасков и в результате получим такой gulpfile.js для Gulp 3:

Такой код получится для Gulp 4:

Для того, чтобы следить за изменениями в браузере, сделаем соответствующую разметку в файле index.html директории app с подключением файла стилей main.css:

Выполним в терминале команду «gulp». Результат завораживает:

Давайте разберемся, что у нас происходит в консоли (картина может разниться, в зависимости от версии ПО):

После того, как мы нарадуемся результату, встает весьма ожидаемый вопрос — а как, собтвенно, обновлять страницу при сохранении HTML и JS?

И эта задача нам по плечу. Создайте в папке app/js файл common.js. Это основной пользовательский JS файл в нашем проекте. Модифицируем код:

Код для Gulp 4 (здесь лучше добавить дополнительный таск для обработки HTML и JS):

Здесь мы используем функцию browserSync.reload, которую нам любезно предоставил пакет Browser Sync. Обратите внимание на выборку файлов для слежения.

В принципе, мы уже имеем довольно продвинутое рабочее окружение. Но двигаемся дальше, это не все, на что способен Gulp.

Оптимизация JavaScript

Давайте рассмотрим, как можно оптимизировать JS файлы проекта. Чаще всего, в оптимизации нуждаются библиотеки и сторонние jQuery и JavaScript плагины. Давайте создадим в папке app паку libs, которая будет содержать необходимые проекту библиотеки. Все библиотеки будем размещать в отдельных папках. Для установки новых библиотек я советую использовать Bower.

Обратите внимание, что для работы Bower необходим установленный Git. Если в ОС Windows вы используте оболочку Ubuntu bash, то установку Git выполнять не нужно.

Теперь в папке проекта создадим файл .bowerrc, в который напишем:

Если вы пользователь ОС Windows, у вас не получится просто взять и создать файл, начинающийся с точки. В этом случае можно просто поставить точку в конце файла и нажать Enter: .bowerrc.

Данной настройкой мы указываем путь по умолчанию для установки плагинов с помощью Bower.

Установим jQuery и Magnific Popup, для примера:

Обратите внимание, что все (ну, или почти все) плагины имеют папку dist, об этом мы говорили ранее. В этой папке располагаются готовые файлы продакшена, которые мы и будем использовать в нашем проекте.

Давайте создадим таск scripts, который будет собирать все JS файлы библиотек в один и минифицировать файл. Для этого установим 2 пакета: gulp-concat и gulp-uglifyjs.

Подключим новые библиотеки в gulpfile.js:

Создаем задачу для сборки и сжатия всех библиотек (перед watch):

Давайте проверим, как работает наш новый таск scripts, выполнив в терминале:

Выполнение таска scripts можно запустить перед выполнением watch. Gulp 3:

Для Gulp 4 код будет выглядеть следующим образом — добавим в параллельное выполнение таска scripts (некоторую структуру уже задали ранее):

Далее можно подключить к проекту все необходимые CSS файлы библиотек. В нашем случае, только одна библиотека нуждается в подключении — это Magnific Popup. Сделаем это через @import в Sass фале sass/libs.sass:

Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение .css и импортировать CSS файлы в SASS файлы с нижним подчёркиванием в начале названия. Например, для того, чтобы импортировать файл library-name.css, необходимо создать вспомогатальный SASS файл, например, _libs.sass, импортировать в него нужный CSS — @import «app/libs/library-name.css» и добавить вспомогательный _libs.sass в главный main.sass без указания нижнего подчёркивания и расширения, например, так: @import «libs»

На выходе, в папке app/css мы получаем дополнительно к main.css файл libs.css, который содержит стили всех библиотек. Файл main.css нет особого смысла минифицировать, так как он содержит кастомные (пользовательские) стили. А вот файл libs.css мы с удовольствием минифицируем.

Внимание! Если в файле libs.css не появляется кода библиотек, а вы по-прежнему видите в нём конструкции @import, создайте отдельный файл _libs.sass для библиотек, который начинался бы с нижнего подчёркивания. Затем импортируйте этот файл в главный, тем самым объеденив и библиотеки и пользовательские стили в один файл.

Для минификации CSS установим пакеты gulp-cssnano и gulp-rename:

И подключим их в нашем gulpfile.js:

И создадим соответствующий таск css-libs. Сразу добавим данный таск в watch для того, чтобы библиотеки собирались в процессе запуска проекта. Таск sass лучше вызвать до запуска css-libs, чтобы нам было что минифицировать:

Подготовка к продакшену

Результирующий код для Gulp 4 будет представлен в конце статьи.

Для продакшена (сборки в папку dist) мы создадим отдельный таск build в конце gulpfile.js. В данной инструкции мы осуществим сборку Sass, JS и выгрузку того, что у нас готово в папку dist.

Здесь, присваивая переменным какие-либо действия, мы их выполняем. Таким образом можно выполнять мультизадачные таски. Можно и не присваивать, но мы сделаем так, ибо красивше.

Все прекрасно, но всегда есть одно «Но». Перед тем, как собирать проект нам желательно бы очистить папку dist, чтобы не оставалось лишних потрохов от предыдущих итераций с нашим проектом.

Установим и подключим пакет del:

Создаем таск очистки clean и добавляем его выполнение перед выполнение build:

Для Gulp 4 попробуйте составить таски самостоятельно, как мы это делали в предыдущих прмерах.

Оптимизация изображений

Как вы могли заметить, в нашем проекте на продакшене не хватает изображений. Давайте исправим это недоразумение и добавим обработку изображений в наш проект. Данный раздел выполнен с использованием Gulp 3. Код для Gulp 4 можно адаптировать самостоятельно, как мы это делали ранее.

В папке app/img есть 3 изображения, которые нам необходимо перенести в папку продакшена, оптимизируя.

Для оптимизации изображений установим 2 пакета (gulp-imagemin, imagemin-pngquant) и подключим их:

Далее создадим таск img для сжатия изображений на продакшен и вызовем его после очистки:

Все прекрасно. До тех пор, пока количество изображений в проекте не превышает 3 шт. Большое количество картинок будет обрабатываться значительно дольше, поэтому к обработке изображений было бы неплохо добавить кеш, чтобы картинки кешировались, экономя наше время.

Установи м подключим gulp-cache:

Модифицируем таск img:

Автоматическое создание префиксов CSS с помощью Gulp

Вендорные префиксы необходимы для обеспечения максимальной совместимости со всеми современными браузерами. Было бы логично сделать автоматическое добавление префиксов, чтобы написав в CSS или Sass:

Мы получили на выходе:

Установим пакет gulp-autoprefixer и подключим его в gulpfile.js:

И модифицируем наш таск sass:

Дефолтный таск Gulp

Внимание! Дефолтный таск для Gulp 4 отличается от приведённого в этой главе. Полный код для Gulp 4 можно будет посмотреть в конце статьи.

Итак, мы имеем 2 главных таска — gulp watch — для работы над проектом в режиме «онлайн» и gulp build — для сборки проекта на продакшен без лишних файлов, папок и со сжатыми картинками. Так как чаще всего нам нужен будет таск watch, можно повесить его на дефолтный таск, чтобы не писать в консоли постоянно gulp watch, а писать просто gulp.

Также, необходимо создать автономный таск для очистки кеша Gulp, чтобы его можно было вызывать простой командой gulp clear:

Если у вас возникнут проблемы с изображениями или другими кешируемыми файлами, просто почистите кеш.

В результате, у нас должен получиться такой gulpfile.js. Gulp 3:

Результирующий код для Gulp 4:

Проект-пример из данного урока вы можете посмотреть на GitHub и скачать: https://github.com/agragregra/gulp-lesson

Чтобы установить все пакеты и зависимости для скачанного примера, выполните команду npm i в папке проекта.

Помните — к любому плагину для Gulp есть хорошая документация по подключению и использованию на npmjs.com или на страничке GitHub.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Сборка фронтенда — часть 3. Сборка gulp

В предыдущих частях статьи про сборку фронтенда мы поговорили про основы сборки и написали простое тестовое приложение на backbone + require.js.

Теперь самое интересное — собственно сборка gulp. По ходу статьи мы напишем десяток gulp-задач для различных нужд сборки и подробно разберем, зачем те или иные задачи нужны вообще.

Внимание, это не статья по основам основ gulp! Предполагаю, что Вы знаете, что такое nodejs и npm. Если не знаете, то лучше предварительно погуглите, что это такое и как это все поставить. Установка nodejs, npm и gulp займет у Вас 5-10 минут. А теперь к самой статье.

Мое рабочее окружение

По некоторым причинам мне приходится работать со старой версией nodejs. Поэтому версии плагинов gulp из моего package.json могут отличаться от Ваших. Советую не лениться и не запускать npm install с моим package.json из исходников, а устанавливать все плагины руками, благо, что нужные инструкции в статье будут.

Все версии плагинов, указанные в исходниках, работают на таком окружении:

• os — windows7
• nodejs — 0.10.35
• npm — 1.4.28
• gulp — 3.9.1

package.json и gulpfile.js

Это первое, с чего мы начинаем сборку фронтенда — создадим package.json в корне проекта.

Стандартная заготовка, можно ничего не менять. После этого ставим gulp. Если он еще не установлен глобально, то делаем npm install -g gulp

Затем устанавливаем gulp как локальную зависимость для нашего проекта — npm install gulp —save-dev. Опция —save-dev обновит package.json, добавив в него секцию

Теперь создадим пока что пустой файл gulpfile.js, тоже в корне проекта, и приступим к задачам сборки. Начнем с базового — с очистки результатов предыдущей сборки.

gulp-clean — удаление файлов и папок

Как мы помним, собранные файлы будут складываться в папку build в корне проекта (на самом деле мы наследим и в src, но зачем и где — чуть позже). Поэтому перед каждым запуском сборки нужно очищать результаты предыдущей — то есть просто сносить папку build.

Ставим плагин gulp-clean — npm install gulp-clean —save-dev. А в gulpfile.js пишем такой код

Сначала мы объявляем переменные-модули, выполняющие всю работу. Пока это сам gulp и clean, но с каждой задачей раздел будет расширяться.

Зачем нужен объект path? Дело в том, что задач у нас будет много, также будет много путей к файлам и папкам. И их удобнее хранить в одном месте, в конфиге, а не разбрасывать по отдельным gulp-таскам. Сейчас объект небольшой, да еще и с пустыми полями, но по мере написания каждой задачи мы будем добавлять в него новые пути и он очень быстро разрастется. Как Вы уже догадались, в build будут пути к стилям, скриптам и картинкам, уже собранным для продакшена, в src — для разработки, в watch — тоже для разработки, файлы для наблюдения за ними, чтобы запускать задачи сборки в режиме онлайн. Но обо всем по порядку.

Сама gulp-таска в конце собственно и очищает папку build. Попробуйте сейчас создать эту папку, кинуть туда пару файлов и запустить в консоли gulp clean. Убедитесь, что после отработки задачи папки исчезла — то, что нужно.

gulp-sass — собираем стили

Ставим плагин gulp-sass: npm install gulp-sass —save-dev. Теперь сама задача. Давайте договоримся, что пока будем собирать стили для режима девелопера. Как мы помним, в предыдущем уроке мы так и не подключили стили к проекту, хотя и написали sass-модули. Пора это исправить. Дополним раздел var вот так:

Добавим пути к нашему конфигу:

Все просто: указываем, что начальный файл main.scss, который уже подключает в себе все дополнительные sass-модули. А также скажем, что положить выходной файл css мы хотим в папку src/styles. Называться он будет так же, как и sass-файл, только с нужным расширением — main.css.

И сама gulp-таска sass

Теперь запускайте в консоли gulp sass, убедитесь, что main.css создался и обновите страничку проекта в браузере. Если все сделали правильно, то стили применятся, появятся отступы по бокам страницы и поправятся шрифты — все хорошо.

Так как main.css у нас собирается автоматически, то нет нужды держать его в проекте, нужно удалять его при запуске gulp clean. Поэтому обновим конфиг:

Теперь запустите снова gulp clean и убедитесь, что удаляется не только папка build, но и файл main.css.

gulp-sourcemaps — sourcemaps для стилей

Вы могли заметить, что при сборке стилей мы не сжимали выходной файл. Это мы сделаем позже, когда займемся сборкой для продакшена. В режиме девелопера нам ни к чему сжатые стили, для отладки удобнее работать так. Вместо этого сейчас мы настроим sourcemaps.

Что это такое? Мы пишем стили для проекта в sass-файлах. Когда мы захотим отладить верстку, то откроем браузерный dev tools, поправим стили, как нужно и захотим их сохранить в проекте. Вот здесь-то нас и подстерегает неудобство. Стили собраны в один-единственный файл. Хорошо нам с тестовым приложением, где 3 строчки стилей лежат в двух файлах, а как быть со стилями, которые собираются из хотя бы полусотни sass-файлов? Для этого и нужны sourcemaps — эти файлы-«карты ресурсов» «запоминают», какие стили в каких исходных sass-файлах находятся. Что конечно же значительно облегчит работу с версткой.

Чтобы было совсем наглядно, вот два скриншота, как мы ищем, где лежат стили для тега h1. Вот здесь мы собрали стили не зная о sourcemaps: Заметьте, мы ничего не знаем о том, где стили для h1 искать в нашем проекте. А вот как выглядит dev tools, когда мы подключим sourcemaps Заметили разницу? Видно, что стили для h1 лежат в первой строке файла _page.scss. А ниже указаны для body — файл _common.scss — удобно. Надеюсь, если Вы до этого не знали про sourcemaps, то теперь точно захотите ими пользоваться 🙂

К тому же создавать их с помощью gulp очень просто. Ставим плагин npm install gulp-sourcemaps —save-dev. Пара изменений в gulpfile.js

На заметку: sourcemaps с таким же успехом применяются и при склеивании/сжатии js-файлов, так что пользуйтесь этим инструментом на полную. А мы переходим к сборке модулей requirejs в один файл. Если Вы не знакомы с подходом requirejs, то можете просто пропустить следующий раздел.

gulp-requirejs — сборка require.js

Начиная с этого раздела мы наконец-то вспомним, что сборка фронтенда в первую очередь задумана для боевого окружения, поэтому займемся amd-модулями requirejs. Все модули нужно собрать в один файл да еще сжать его и выкинуть в папку build/js с названием build.js. Здесь долго пояснять не буду, сборку мы разобрали в предыдущей части, когда писали тестовое приложение.

Ставим плагин gulp-requirejs npm install gulp-requirejs —save-dev. Подключаем его:

Прописываем новые пути в path

И самое хитрое — задача gulp-requirejs и конфиг для нее

Подробно объяснить здесь сложно, нужно знать принципы подключения requirejs и внимательно следить за путями к файлам и папкам. Если Вам лень в этом разбираться, то можете просто использовать этот готовый конфиг и по мере надобности понемногу в нем ковыряться.

Почему requirejs:build? Потому что для подключения собранного файла нам нужно будет сначала подключить библиотеку require.js в index.html, и поэтому мы сейчас напишем таску requirejs:copy, которая копирует нужную нам либу в папку build — готовит все для продакшена. Но пока запустите gulp requirejs:build и убедитесь, что сгенерировался файл build/js/build.js.

gulp-contrib-copy — копирование файлов

Теперь нам нужно скопировать файл src/lib.require.js в папку build/js, чтобы все было готово для подключения javascript на странице. npm install gulp-contrib-copy —save-dev Обновляем gulpfile.js

Запустим gulp requirejs:copy_lib и увидим, что в папке build/js/ рядом с build.js появился require.js — значит, все получилось! Идем дальше.

gulp-uglify — сжатие js-файлов

В двух последних задачах requirejs:build и requirejs:copy_lib мы подготовили два файла, предназначенных для боевого окружения. Но хорошим тоном считается сжатие файлов для уменьшения трафика пользователей и ускорения загрузки. В этом нам поможет плагин gulp-uglify.

Ставим. npm install gulp-uglify —save-dev. Сам по себе плагин не используется, он действует совместно с другими задачами, в нашем случае это будет и сборка requirejs:build, и копирование библиотечки requirejs:copy_lib. Поправим код

Посмотрим, что мы изменили. Кроме стандартного подключения, мы добавили всего лишь одну строку .pipe(uglify()) к нашим задачам непосредственно перед формированием выходных файлов. Теперь запустите обе gulp-таски снова и проверьте, что в build/js/ лежат те же файлы, только уже минифицированные — и это пригодно для продакшена. Переходим к последней на сегодня задаче сборки javascript — посмотрим, как работает плагин gulp-concat

gulp-concat — склеивание файлов

Что и зачем мы собрались клеить? Несмотря на то, что весь js-код мы разбили на amd-модули и собрали с помощью gulp-requirejs, очень часто на проекте возникает необходимость подключить какие-то сторонние скрипты, которые не хочется мешать с основным кодом. Это как правило, скрипты вроде inspectlet и яндекс-метрики, которые в больших количествах любят притаскивать аналитики и маркетологи.

Сложим эти файлы в папке src/scripts, чтобы они не мозолили нам глаза, и будем склеивать их все в один, сколько бы их там ни было, и выкидывать в папку build/js/ под названием scripts.js, предварительно сжав. Ух, какое длинное предложение получилось!
Наши действия: создадим папку src/scripts и создадим в ней для примера 3 файла, google-analytics.js, inspectlet.js и shoppyboom.js. Их содержимое незатейливо:

Установим плагин npm install gulp-concat —save-dev. И теперь gulpfile.js

Все достаточно просто. Указываем исходную папку, из которой будут браться все js-файлы, склеиваться в один под названием scripts.js, сжиматься и выкидываться в папку build/js/ уже третьим и последним по счету js-файлом для продакшена. И конечно же, запускайте gulp scripts и проверяйте, что файл действительно есть с содержимым

Мы вплотную подошли к тому, чтобы запустить наше приложение в production-режиме. Но до этого осталось сделать еще одну важную задачу — оптимизацию и сжатие изображений.

gulp-imagemin и imagemin-pngquant — оптимизация и сжатие изображений

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

Установка npm install gulp-imagemin —save-dev и npm install imagemin-pngquant —save-dev. Но здесь хочу обратить Ваше внимание. Именно с этими плагинами у меня прошло не все так гладко. С моей старой версией ноды 0.10.35 согласились работать плагины только с версиями 2.1.0 и 4.1.2 соответственно.

Пробуйте сначала ставить их, как обычно, последние версии по умолчанию. Если Вы столкнетесь проблемой сборки, в консоли будут сыпаться gulp ошибки при сборке или даже при установке. И тогда придется с гуглом наперевес искать подходящие под Вашу ноду версии оных плагинов. Ставить их придется с указанием конкретной версии, вот так npm install [email protected] —save-dev. Второй плагин аналогично. При этом в package.json имеет смысл убрать ^ из версии плагинов, то есть

Иначе когда Вы захотите обновить версии всех плагинов и запустите npm install, то рискуете обновиться и поломать сборку картинок. А затем долго и нудно возвращать старые версии. Впрочем, будем надеяться, что с Вашей адекватной версии ноды все прекрасно установится и по умолчанию. Редактируем gulpfile.js

Если с плагинами все хорошо и все сделали правильно, то запуск gulp img соберет нам все картинки (всю одну) и выкинет в build/img/ в сжатом виде. Проверяйте. А мы меж тем переходим к самой интересной на мой взгляд теме — препроцессинга html и окончательному формированию production-окружению.

gulp-preprocess — препроцессинг html

На самом деле, плагин умеет препроцессить не только html, но и js, что тоже бывает очень полезно. Но в нашем случае мы рассмотрим только html. Давайте поставим плагин, дабы не забыть про него, и затем разберемся, а что же такое препроцессинг и зачем он нужен.
npm install gulp-preprocess —save-dev

Представим, что у нас настроены задачи для генерации двух вариантов css-файлов: сжатых (для production) и обычных с sourcemaps (для development). А еще мы в режиме разработки не хотим подключать упомянутые ранее js-файлы скриптов, но хотим их на production. А если мы разрабатываем SPA и общаемся с сервером через api, то адреса серверов могут быть различными. Например, на боевом сайте мы обращаемся к серверу по запросам вида webdevkin.ru/api/v1/, но параллельно работаем над новой версией api и тестируем ее на test.webdevkin.ru/api/v2/.

Все эти варианты сводятся к тому, что например, главный html-файл в разных режимах будет пусть и парой строк кода, но различаться. Каждый раз помнить об этом и руками менять нужные строки скучно и чревато ошибками, потому и придумали препроцессинг. Мы готовим шаблон-заготовку html-файла, прогоняем его через задачу препроцессинга и на выходе получаем файл с нужными настройками. Смотрим на примере.

Создадим папку html в src и перенесем в нее файл index.html. Это будет заготовка html, в которой мы чуть поправим содержимое body.

Ничего сложного нет, для режима разработки development мы подключаем require.js из папки lib, а для production — из js. Напомню, что src и build у нас — это корневые папки проектов. И файлы js в них располагаются в разных местах. Плюс для production подключим дополнительно js/scripts.js, которые не нужны нам в разработке.

Надеюсь, ситуация и полезность такого подхода немного проясняется. Осталось сделать так, чтобы эта html-заготовка превратилась в валидный html-файл. В этом нам поможет плагин gulp-preprocess.
npm install gulp-preprocess —save-dev
Добавляем задачу в gulpfile.js

Что мы сделали? Добавили пути в конфиг, указали корневые папки обоих проектов, для src еще указали, где хранится исходный html-шаблон. Не забыли включить генерируемый src/index.html в задачу очистки. build/index.html специально не включаем, папка build и так удаляется целиком. И написали 2 задачи препроцессинга: html:dev и html:prod.

Эти 2 задачи отличаются друг от друга только установкой окружения NODE_ENV и выходными путями, куда складывается преобразованная html. Запустите по очереди gulp html:dev и gulp html:prod и увидите, что в папках src и build соответственно появились index.html с разным, нужным нам содержимым.

Итак, js-скрипты подключаются так, как нам нужно. Но не будем забывать про стили, ибо собранный файл main.css нужно подключать из разных папок: src/styles и build/css. Заменим строку подключения стилей в srс/html/index.html на

Пути к стилям мы указали правильно, но у нас есть только одна задача sass, которая собирает несжатый main.css в src/styles да еще и генерирует sourcemaps. Это отлично для разработки и никуда не годится для боевого сайта. Давайте это исправим. Сначала добавим путь к стилям в build

А затем вместо задачи sass создадим две: sass:dev и sass:prod.

Видим, что для сборки development ничего не поменялось, кроме названия. А вот dev:prod существенно отличается: мы не генерируем в ней sourcemaps, зато сжимаем выходной файл опцией . Как обычно, проверяйте, что все работает, gulp sass:dev и gulp sass:prod.

Теперь когда мы научились препроцессить html, собирать стили, скрипты и requirejs-модули, копировать файлы и оптимизировать изображения, мы переходим к кульминации статьи — собираем все написанные задачи вместе.

gulp develop и gulp production — запускаем сборку одной командой

Мы написали уже с десяток задач под разные окружения, но не собираемся же каждый раз вбивать все их руками. Не для этого же придуманы инструменты сборки. Нет, нам понадобятся всего две задачи, gulp develop и gulp production, которые сами разберутся, какие задачи нам нужно выполнить для нужного окружения. Привожу сразу код и все встанет на свои места.

Все! По запуску одной команды мы сгенерируем все нужные файлы для разработки или деплоя на продакшен. В режиме development нам достаточно только препроцессить html и собрать стили. В production делаем все — и препроцессинг, и стили, собираем модули requirejs в один файл, еще и копируем библиотечку require, а также оптимизируем изображения и склеиваем и копируем файлы scripts.

gulp-sync — запускаем задачи синхронно

Это небольшое отступление от темы. Мы только что написали задачи develop и production, которые запускают множество мелких задач. Природа gulp-a такова, что в таких случаях все задачи запускаются асинхронно. И это здорово, положительно сказывается на скорости работы, если бы не одно но.

Есть задачи, которые должны выполняться только последовательно. В нашем случае, в первую очередь должна отработать очистка предыдущих результатов, и только потом запускаться все остальные таски. gulp умеет делать это нативными средствами, но не очень удобочитаемыми, поэтому воспользуемся сторонним плагином gulp-sync.
npm install gulp-sync —save-dev
И поправим код gulpfile-a

Немного поправили задачи develop и production. И теперь мы уверены, что clean не очистит нам уже возможно сгенерированные другими задачами файлы.

gulp-watch — собираем в режиме онлайн

Написанные задачи отлично подходят для запуска сборки в режиме production. Но для разработки все же чего-то не хватает, а именно. Когда мы поменяем пару строк в sass-файлах или в index.html, нам придется запускать gulp sass:dev, gulp html:dev или gulp develop. Каждый раз врукопашную это делать совсем не интересно. Для этой рутинной работы существует замечательный плагин gulp-watch. Он следит за изменяемыми нами файлами и автоматически запускает нужные задачи сборки. Посмотрим, как это работает.

npm install gulp-watch —save-dev
Правим код

Казалось бы, сложная задача, которая сэкономит нам уйму времени, но так легко и быстро настраивается. Всего лишь указали, за какими файлами мы хотим следить и какие задачи запускать при их изменении. Обратите внимание, мы добавили задачу watch в develop. Теперь gulp develop не только соберет стили и html для разработки, но и запустить задачу их автоматической пересборки — отлично!

Для проверки запускаем gulp develop и пробуем редактировать, например, sass-файлы. В терминале сразу увидите, как gulp реагирует на Ваши действия и запускает задачу sass. То же самое и с html. Параллельно проверяте содержимое src/styles/main.css и src/index.html и убеждайтесь, что их содержимое меняется.

browser-sync — запуск локального веб-сервера

И напоследок рассмотрим очень крутую штуку, легко позволяющую поднять локально веб-сервер. Я упоминал, что для проверки работы Вам нужно было настроить apache или nginx, или запустить сервер средствами IDE, или заливать файлы на хостинг. С помощью этого плагина наш проект становится совершенно самодостаточным. Всего лишь одна команда позволит запустить проект в нужном режиме, development или production. То есть из двух разных папок, src или build. Давайте поставим плагин и проверим на примере.
npm install browser-sync —save-dev

Мы создали конфиги для веб-сервера, указав разные корневые папки и порты, а также написали собственно задачи для запуска webserver:dev и webserver:prod. webserver:dev мы еще добавили в задачу develop. Проверим, что из этого получилось.

Запустите теперь gulp develop и немного подождите. У Вас откроется браузер, где в новой вкладке по адресу http://localhost:9001 откроется наш проект, запущенный из папки src. Откройте консоль и убедитесь, что это действительно режим разработки: стили и скрипты не сжаты, 3 файла scripts не загружены, для стилей есть sourcemaps. При этом в фоне работает watch, и если Вы поменяете стили, то переключившись в браузер и обновив страницу, Вы сразу увидите сделанные обновления. Просто отлично!

Получается, теперь все что нам нужно, чтобы начать работать — это запустить gulp develop. Остальное все сделается за нас: очистятся результаты предыдущей сборки, соберутся стили и html, запустится наблюдатель watch и веб-сервер. Да еще и откроется браузер с запущенным проектом.

В режим production я не стал включать webserver:prod — мы собираем для продакшена не чтобы запустить браузер, а чтобы собрать файлы и залить их на боевой сайт. Но убедиться, что все собрано правильно и корректно работает, смысл имеет. Сделайте сначала gulp production, а затем gulp webserver:prod. Проект из папки build запустится с адресом http://localhost:9001.

Открыв dev tools, Вы легко проверите, что подключились именно продакшеновские файлы, сжатые стили и скрипты, никаких sourcemaps. Также заметите 3 отдельных js-файла из папки scripts, которые сыпят в консоль сообщения ‘init что-то там’.

Дополнение: browserSync.reload

Грамотный человек в комментариях (Dima) напоминает про одну замечательную вещь: browserSync.reload. Иными словами, liveReload, живая перезагрузка. Настроив ее, нам больше не придется обновлять страницу в браузере руками, после правки кода она перезагрузится сама. И сделать это очень просто.

Допустим, мы хотим обновлять страницу при изменении html, стилей, javascript-кода и шаблонов в папке tpl. Конечно, только в режиме develop. Для этого в таски html:dev и sass:dev нужно дописать одну строчку — .pipe(browserSync.reload())

Для js-кода и шаблонов делаем чуть по-другому. Добавим пути к отслеживаемым файлам в конфиг path.watch и одну строку в watch-таску

Перезапускайте gulp develop и пробуйте редактировать код, страница обновляется, кодить стало намного приятнее.

browserSync tunnel

Хочется упомянуть еще об одной небольшой детали насчет browserSync. Откройте терминал и увидите примерно такую картину Обратите внимание на строку
Tunnel: http://pjwhpjlsom.localtunnel.me
Она означает, что прямо сейчас Ваш проект доступен по этой ссылке извне. Можно отправить ее коллеге-программисту или дизайнеру. Конечно, это работает только до тех пор, пока у Вас запущен веб-сервер. При следующем запуске адрес поменяется: удобно и безопасно.

Выводы, исходники проекта и нужные ссылки

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

Моей главной целью было заинтересовать читателей, мало знакомых с инструментами и принципами сборки. Я постарался показать реальные задачи, которые возникают при сборке практически любого проекта, даже самого простого. Мы создали и настроили gulp так, что теперь можно использовать только 2 команды для всей работы и сколь угодно расширять проект, не заботясь о рутинных операциях.

gulp, как, например, и git, относится к таким инструментам, без которых в принципе можно обойтись. Код они за нас не напишут. Но после знакомства с ними ты уже не можешь представить, как жил и работал до этого. Они становятся настолько привычными, что любой проект ты начинаешь с создания репозитория и настройки сборки. И только когда все подготовительные операции пройдены, ты со спокойной душой начинаешь заниматься программированием.

Исходники проекта доступны по этой ссылке. Желаю удачной сборки и отличных проектов! Вопросы, пожелания и критику оставляйте в комментариях.

Живая перезагрузка

Живая перезагрузка — это техника в веб-разработке, которая позволяет разработчику видеть результат своего кода без обновления браузера.

В традиционном процессе вы должны нажать F5 или кнопку Обновить в своём браузере, чтобы попросить его обновить внесённые изменения. Это заставляет вас поочерёдно переключаться между редактором и браузером. Один раз, два, три раза и больше. Вы можете заметить, что эта привычка может оказаться очень утомительной и трудоёмкой.

Цель живой перегрузки — избежать ручной работы. Каждый раз, когда вы нажимаете Ctrl + S или сохраняетесь, ваш браузер будет перезагружаться самостоятельно. Круто!

Существует приложение под названием liveReload, которое вы могли бы использовать в сочетании с плагином Google Chrome, чтобы обеспечить живую перезагрузку. Я попытался заставить его работать как на Linux, так и Windows, но не мог. Поэтому, пожалуйста, простите меня. Одно несомненно, сегодня этот плагин есть с Gulp (gulp-livereload) и вы можете его опробовать.

Я не единственный, у кого не всё хорошо с liveReload. Большинство людей, несомненно, сталкивались со многими трудностями, пытаясь использовать его, так что они создали ему полную замену: gulp-browserSync.

Живая перезагрузка с gulp-browserSync

BrowserSync является вероятно одним из самых полезных плагинов, который хотелось бы иметь разработчику. Он на деле даёт вам возможность запустить сервер, на котором вы можете выполнять свои приложения. Он заботится о перезагрузке ваших HTML/PHP-файлов. У него также есть возможность обновить/внедрить CSS и JavaScript-файлы в HTML и многое другое. С помощью этого плагина вы идёте исключительно вперёд.

Теперь посмотрим, как это работает. Перейдите в папку проекта и установите плагин browser-sync так:

Включите его в файл gulpfile.js:

Функция перезагрузки BrowserSync называется reload() . Давайте вызовем её и сохраним в переменной, просто для понятности.

Обратите внимание, что там, где я использую reload() вы также можете использовать browserSync.reload() .

Задайте переменную paths вроде этого:

Эти файлы мы отслеживаем на любые изменения.

Мы создали задачу для файлов Sass и JavaScript, теперь давайте добавим одну для HTML-файлов.

Всё что делает эта задача — пропускает наш HTML-файл через функцию reload() из browser-sync. Если вы, к примеру, используете jade то могли бы компилировать его до перезагрузки.

Делаем то же самое с нашими существующими задачами:

browser-sync нужно знать расположение файлов, которые мы перезагружаем/синхронизируем и запустить мини-сервер основанный на этом; порт для прослушивания; прокси, если возможно и др. Посмотрите все варианты здесь.

Давайте настроим browser-sync и предоставим ему всю информацию.

Обратите внимание, что если вы не указали точный номер порта, browser-sync будет использовать порт 3000 по умолчанию.

Теперь добавьте эту задачу в задачу watcher:

И, наконец, подретушируем задачу default:

Окончательно файл gulpfile.js должен выглядеть следующим образом:

После этого перейдите в папку проекта, если вы ещё не там, и запустите gulp. Сделайте несколько изменений в HTML или Sass-файле и наблюдайте магию Gulp! Если всё пойдёт хорошо, в консоли у вас должно быть что-то вроде следующего.

Browser-sync и PHP-файлы

Измените файл index.html на index.php и подправьте пути так:

Это предполагает, что вы хотите работать с PHP, а не только с HTML. Перейдите к командной строке, остановите текущий процесс через Ctrl + C , а затем запустите gulp снова.

Gulp выполнит ваше приложение на http://localhost:8080, но вы увидите только это на странице:

Помните, перед выполнением любых инструкций PHP, вам нужен сервер PHP. Так что через эту ошибку Gulp пытается сказать нам, что никакого PHP-сервера не найдено.

Всё, что нам нужно сейчас сделать — это запустить сервер PHP вместе с нашими задачами. Для этого мы используем плагин gulp-connect-php.

Запуск PHP-сервера по требованию с browserSync

Прежде всего, начнём с установки плагина gulp-connect-php, который нам поможет.

Теперь включим его в gulpfile.js:

Добавим задачу php:

Подробнее о настройках gulp-connect-php читайте здесь. Поскольку мы можем установить port , baseDir и другие параметры из настроек PHP-сервера, мы можем модифицировать нашу задачу browserSync и сделать её легче:

Обратите внимание: я создал сервер не из browserSync, а из PHP. Скорее создал прокси для browserSync.

Окончательный файл должен выглядеть следующим образом:

Резюме

Живая перезагрузка — это интересная функция, с которой вы действительно можете наслаждаться Gulp. По-прежнему есть несколько способов написания задач и особенно, когда сочетается browserSync и gulp-connect-php. Я приглашаю вас посмотреть соответствующие сайты ради новых идей.

Блог Vaden Pro

Достаточно часто у нас возникает необходимость включить PHP код внутрь HTML страницы. Сделать это достаточно просто, когда понимаешь основные принципы работы парсера кода и знаешь основные методы его вставки с различиями между ними. Об этом и пойдет речь далее.

Принцип обработки файла содержащего PHP

После того, как парсер заходит на страницу, он начинает читать код построчно до тех пор, пока не наткнется на специальные теги, обозначающие начало и конец кода PHP, до этого момента он просто выводит содержимое документа на экран монитора.

После обнаружения скрипта, происходит его исполнение, и когда заканчивается обработка всего, что написано до тега, завершающего вставку PHP, снова продолжается построчный вывод информации на экран пользователя.

Для лучшего понимания можете запустить у себя файл php следующего содержания:

Способы вставки PHP кода

Этот способ вставки выигрывает у своих альтернатив по ряду причин:

• Не требует дополнительной активации или чего-либо в этом роде (доступен всегда)
• Может быть без опасений использован в файлах со стандартами кода XML и XHTML
• В силу своей распространенности стал практически общепринятым стандартом вставки PHP скриптов

Данная конструкция хоть и не требует никаких предварительных настроек от нас, как и предыдущая, но на практике встречается на порядок реже, поскольку не несет в себе никаких преимуществ.

Не смотря на всю свою простоту и привлекательность есть ряд причин по которым эта конструкция для вставки PHP не получила всеобщего признания, как первая:

• Чтобы его возможно было использовать, нужно зайти в файл php.ini , найти в нем строку содержащую short_open_tag и активировать данный вид вставки скриптов в HTML код (в случае скомпилированного кода используется опция —enable-short-tags)
• Иногда могут появляться проблемы с их поддержкой на не родном сервере, потому если Вы не имеете доступа к платформе, где будут после располагаться вписанные подобным образом скрипты, то лучше не применять эту конструкцию.
• С версии PHP 5.4 конструкция будет верно истолкована парсером даже, если short_open_tag не будет активен, тем не менее ее применение на практике по-прежнему испытывает проблемы с совместимостью

Удобный на первый взгляд вариант также имеющий ряд проблем с применением на практике:

Gulp с нуля — руководство для начинающих веб-разработчиков

Приветствую вас дорогой посетитель! Данную статью я хочу посвятить очень интересной и важной теме — фронтенд-разработка при помощи пакета Gulp. Скорее всего многие из вас уже слышали о нем, даже если не слышали, то скорее всего видели его файлы проекта. Сегодня большинство расширений (плагины jQuery, различные фреймворки и т.д.) ведут именно при помощи подобных пакетов. На подобии Gulp есть и другие пакеты, например, GruntJs — это «брат-близнец» Gulp и работает по той же аналогии. Например, на GruntJs создана сборка Twitter Bootstrap. Я сам начинал изучение именно с Grunt.

Вообще в сети уже появилось масса материалов по Gulp и я сначала думал, что не буду писать, но потом решил — пусть и у меня будет. При изучении какой либо темы я по себе знаю, что никогда не обходится одной лишь статьей, да и пишут ведь все по разному — кто-то развернуто, кто-то нет. Поэтому я постараюсь изложить все максимально просто и понятно.

Что такое Gulp, чем он хорош и нужен ли он простому верстальщику?

Так что же такое Gulp?

Gulp — это инструмент фронтенд-разработчика, который автоматизирует большинство рутинных задач.

Gulp позволяет решать такие задачи, как:

• использование различных JS, CSS, HTML препроцессоров для ускорения верстки (CoffeeScript, SASS, LESS, Stylus, Pug (Jade) и др.);
• объединение файлов в один — js, css, html;
• минимизация кода файлов — js, css, html;
• создание локального веб-сервера и перезагрузка страницы браузера при сохранении файла проекта (live reaload);
• автоматическая простановка вендорных префиксов в CSS-файле для поддержки стилей устаревшими браузерами;
• работа с изображениями сайта — объединение в спрайты (в том числе и SVG-спрайты), оптимизация (уменьшение веса);
• копирование файлов проекта из одной папки в другую, создавая при это рез. копию;
• создание иконочных шрифтов;
• и многое другое…

Одним словом, круг задач, решаемых с помощью галп достаточно широк и грех всем этим не воспользоваться. Когда я впервые столкнулся с GruntJs мне казалось, что подобные сборки нужны только для крупных и поддерживаемых проектов. А я верстаю небольших макеты и мне это не нужно. Ох как же я ошибался. На самом деле данный инструмент нужен любому веб-разработчику, он здорово экономит время. Представьте, я раньше делал спрайты изображений вручную — это же натуральная рутина. А в Gulp, установив нужный плагин мне достаточно добавить нужное изображение в определенную папку и скрипт сделает все за меня, выдав уже готовый объединенный файл изображений.

Ну что сказать, все в жизни происходит когда-то впервые. Если сказать в целом, Gulp и множество плагинов для него превращает его в мощный инструмент решения задач как маленьких, так и крупных проектов. Теперь давайте разберем более подробнее как его установить и как с ним работать.

Установка Gulp

Установку Gulp я буду показывать на примере ОС Windows 10 x64 последней сборки, так как я работаю именно в данной системе.

Первым делом нам необходимо установить node.js. Данный пакет превращает клиентский язык javaScript в серверный. Для тех, кто не знает язык javaScript интерпретирует браузер пользователя. Кстати, Gulp создан на языке javaScript и если вы знакомы с данным языком, то освоить его вам будет намного легче.

Для установки node.js необходимо скачать инсталлятор с официального сайта. Качаем последнюю стабильную версию. Пакет устанавливается как обычная программа и ничего сложного в этом нет.

После установки node.js можно проверить правильно ли все установилось. Открываем консольное окно (командная строка) — в ОС Windows это комбинация клавиш Win+R -> cmd -> Enter . Вводим команду:

Если все правильно установили в ответ вы увидите версию установленного пакета.

Все, можно приступать к установке Gulp.

Пишем команду для установки Gulp:

Давайте разберем, что значит данная запись:

• npm — говорит о том, что мы запускаем пакет менеджер, который установит Gulp;
• i — это сокращенная запись install, т.е. установить;
• gulp — имя устанавливаемого пакета;
• -g — данный флаг говорит о том, что мы устанавливаем Gulp глобально в систему. Без данного ключа gulp установится в ту папку, из которой запускается команда. Так что имейте это ввиду.

Установка не занимает много времени, примерно 1-2 мин. После завершения работы установщика галп можно проверить корректность установки, также, как и node.js:

Если все правильно, то выдаст версию установленного галп.

Создание проекта

Двигаемся дальше. Теперь создайте папку проекта в удобном месте вашего компьютера. Назовем ее, например, gproject.

Внимание! Не называйте папку проекта кириллистическими символами, т.е. русскими буквами — только латиница. Тоже самое касается пути до папки проекта — не должно быть русских названий папок. Иначе корректная работа пакета не гарантируется.

Перейдем в папку проекта и запустим консоль команд для данного каталога. Наиболее быстрый вариант сделать это зажать клавишу «Shift» и удерживая ее щелкнуть правой кнопкой мыши на пустой области окна каталога. Откроется контекстное меню, в котором выбираем «Открываем окно PowerShell здесь«. Данный пункт может называться и по другому — «Открыть окно команд«.

Запускаем инициализацию проекта командой:

Все команды в дальнейшем пишутся именно в консоли, повторяться далее я не буду.

Заполняем необходимые поля проекта по шагам и желательно латиницей. После ввода названия жмем Enter и переходим с следующему шагу.

• package-name: вводим название проекта маленькими буквами
• version: оставляем по умолчанию — 1.0.0
• description: вводим описание проекта, например, My first gulp project.
• entry point: (index.js), test command:, git repository:, keywords: — данные шаги оставляем по умолчанию, жмем Enter и переходим к следующему шагу
• author: впишите имя автора, я ввел Zaur Magomedov
• license: оставляем по умолчанию
• Is this ok? — вводим «yes» и жмем Enter поле чего в папке нашего проекта появится файл package.json.

Файл package.json содержит в себе информацию о проекте + информацию об установленных пакетах (плагинов). Это своего рода файл манифеста. Теперь давайте установим Gulp локально в папку нашего проекта. Для этого пишем следующую команду:

флаг —save-dev как раз говорит установщику установить gulp локально в папку нашего проекта.

Внимание! Локально установится та версия галпа, что и глобальная.

При установке gulp название пакета и его версия автоматически пропишутся в файле package.json. Вообще такой подход позволяет сохранять файл package.json со всеми установленными пакетами (зависимости), а при разворачивании нового проекта достаточно скопировать данный файл и запустить команду установки в консоли проекта — npm install и все пакеты в проект установятся автоматически. Сейчас может вам будет не совсем понятно, но дальше я уверен вы поймете.

И так, после установки gulp в папке проекта должна появиться папка node_modules, она содержит в себе необходимые зависимости. Также все новые установленные зависимости, прописываемые в package.json будут складываться именно в данную папку. Так что ничего не трогайте в ней и не удаляйте. Не пугайтесь если увидите в ней много файлов и папок.

Давайте откроем файл package.json реактором кода и взглянем на его содержимое.

Мы видим всю ту информацию, которую вводили при инициализации проекта + ниже в блоке «devDependencies» указаны установленные зависимости и их версии. В данном случае это gulp версии 3.9.1. Как я и говорил установилась локально именно та версия, что стоит глобально.

Структура каталогов проекта Gulp

Следующее, что мы сделаем это создадим структуру каталога проекта. Структуру будем создаваться с учетом логики по общепринятым правилам хорошего тона веб-разработчиков. Но вообще, вам никто не мешает создать собственную структуру, такую, какая удобна будет именно вам.

Теперь давайте разберем предназначение каждой папки.

dist — в данную папку будут складываться все готовые файлы после компиляции, ее еще называют папкой продакшена, т.е. итог работы. Папка dist будет содержать в себе вложенные папки. Они создадутся автоматически при компиляции, поэтому я их в структуре не указал.

src — здесь будут храниться исходники файлов проекта. Вообще, в дочерних папках может быть очень много файлов, зависит от размера проекта. Каждые типы файлов потом объединяются в общий файл и копируются в папку продакшена. В корне лежит файл index.html. Вообще для HTML можно создать отдельный каталог, но я здесь не стал усложнять и создал всего лишь главный файл.

image — неоптимизированные изображения и иконки проекта.

js — файлы javaScript.

sass — файлы препроцессоров SASS или SCSS.

node_modules — с этой папкой мы уже знакомы — все модули и зависимости gulp.

gulpfile.js — это главный файл пакета Gulp. Для чего он предназначен поговорим чуть ниже.

Gulpfile.js

Это важный файл без которого Gulp проект работать не может. Здесь записываются все задачи для выполнения — это так называемые таски (task), что в переводе с английского означает — задача. В основном весь gulpfile состоит из сплошных тасков. Таски создаются для подключаемых дополнительных плагинов. Без таска плагин работать не будет. Давайте обо всем по порядку.

Создайте в корне своего проекта файл gulpfile.js и вставьте в него следующий код:

Сразу, не отходя от кассы, разберем что это за код и за что отвечает каждая строчка.

Данной строчкой мы подключаем gulp. Создается не просто переменная, а объект с данными, с которыми мы в дальнейшем будем работать. По данной аналогии подключаются все дополнительные плагины галп.

А это простейший таск для вывода сообщения в окне консоли. myFirstTask — это название нашего таска, оно может быть любым.

Данной строкой мы запускаем все прописанные здесь таски. Этот таск по умолчанию, который запускает одновременно все перечисленные в нем таски. В данном случае указан только один созданный нами — [«myFirstTask»] . Их может быть несколько, указываются в кавычках и через запятую. Например, если бы у нас было 2 таска, то мы бы указали так — [«myFirstTask», «mySecondTask»] . И одной командой мы бы запустили сразу 2 данных таска.

Итак, давайте же уже запустим и посмотрим на результат. Вводим команду — gulp и если ошибок нет, нам должно выдать — Привет, я твой первый таск!

В данном случае мы запустили таск по умолчанию, но можно запустить отдельно каждый таск. Например, для нашего таска будет следующая команда — gulp myFirstTask , результат будет тот же самый.

Теперь давайте установим дополнительные плагины и рассмотрим более сложные таски.

Установка плагинов Gulp

Давайте создадим небольшой проект для верстки, установив некоторые плагины, которые упростят нам работу в разы. Откроем наш gulpfile.js и cразу под строкой var gulp = require(«gulp»); запишем подключение плагинов:

Переменные мы создали, но еще нужно установить и сами плагины. Устанавливать будем локально в папку проекта. Для установки плагина необходимо написать команду:

Здесь gulp-jshint — это название плагина. Чтобы установить несколько плагинов разом необходимо их просто прописать через пробел:

После установки плагинов, как говорилось выше, все их названия и версии записываются автоматически в файл package.json. Теперь мой файл выглядит так:

Теперь нам необходимо создать таски для наших плагинов. Вот что у меня получилось в файле gulpfile.js:

Теперь давайте разберем из чего состоит отдельный таск:

• taskname — название таска — название может произвольным;
• source-files — директория до файлов исходников, необходимо указать полный путь и расширения файлов, например, путь до всех фалов с расширением .js будет таким — templatename/js/*.js;
• .pipe() — метод, который позволяет работать с установленным плагином
• plugin-name — название плагина;
• dest(«filder-path») — путь до папки продакшена, т.е. куда выгрузить после отработки плагина

Теперь, например, посмотрите наглядно на таск для работы с файлами javaScript:

Если заметили в gulpfile.js мы в конце создали таск под названием watch. Как он работает, ведь плагина для него мы не устанавливали? Все верно, это встроенная функция gulp. Данный таск позволяет следить за файлами, в которых были сделаны изменения. Как только в определенных файлах находятся изменения запускается указанный таск.

Ниже запускаем все таски по умолчанию.

Все, проект готов. Для запуска задаем команду — gulp . Побегут строчки и если ошибок нет вы должны увидеть следующую картину.

Как видим, все наши задачи запустились, картинки сжались на 3.5%.

Хотелось бы отметить, что когда вы вносите изменения в gulpfile.js необходимо перезапускать команду gulp , предварительно остановив его, для того, чтобы изменения вступили в силу. Для остановки просто два раза подряд вводим комбинацию клавиш Ctrl + С , когда увидим мигающий курсор, снова вводим — gulp .

Разворачивание готовой сборки одной командой

Вы создали сборку, теперь хотите реально создать на ней проект. Достаточно скопировать папку сборки и запустить установку. Вообще при установке должны устанавливаться все последние версии зависимостей, включая сам gulp (при обновлении глобальной версии). Для этого нам необходимо подредактировать файл package.json. В блоке devDependencies, где перечислены установленные расширения вместо версии необходимо указать ключевое слово — latest . Вот как теперь выглядит мой файл:

Теперь для быстрого разворачивания проекта необходимо сделать следующее — копируем все файлы проекта Gulp за исключением папки node_modules в другую папку вашего проекта. Открываем локально консоль и вводим команду npm i после чего запуститься установка gulp и всех зависимостей. Все, можно начинать работу.

Дополнительные полезные плагины для Gulp

Проект, что мы создали выше это самый простейший набор плагинов Gulp. Его функциональность можно значительно расширить, установив и настроив дополнительные плагины. Я составил список, которые сам использую в своих проектах.

Plumber — дает возможность продолжить работу gulp при ошибке в коде. На самом деле, если вы в коде (html, js, sass, css) сделаете ошибку gulp выдаст ее в консоли и прекратит свою работу. Вам необходимо будет исправить ошибку и вновь запустить gulp.

Sourcemaps — создает карту подключений файлов css и js. Обычно в подобных проектах файлы стилей и скриптов делят на несколько частей для удобства. Так вот, чтобы потом ориентироваться в каком файле и в какой строке находится та или иная запись как раз и нужна карта подключений.

Tinypng — сжатие изображений. Работает по той же аналогии, что и imagemin, но сжимает значительно лучше.

SvgSprite — сборка svg-спрайта иконок. В последнее время я перешел с иконочных шрифтов на svg иконки. Чтобы уменьшить количество http запросов к серверу нужно собирать иконки в спрайты.

Rigger — объединяет html-файлы в один. Необходимо, когда вы разбиваете html-файлы на отдельные неизменяемые блоки, например, шапка сайта, футер и т.д.

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

Spritesmith — создание спрайтов картинок. Еще один плагин для сборки спрайтов, только в данном случае из иконок Png. Также использую его частенько, т.к. не всегда иконки в макете бывают в формате svg.

Rimraf — очистка папки dist. Бывает, что приходится очищать время от времени папку продакшена dist, т.к. в нем могут скопиться неиспользуемые файлы. Например, вы переименовали файл стилей в другое название, таким образом у вас в dist будут две копии — старая и новая.

На этом я завершаю данную статью, которая и так получилась достаточно объемной. Я сам очень долго изучал эту тему, а инструкции в интернете в основном являлись переводами зарубежных статей, в которых описывалось все скромно.

Конечно я буду еще писать на тему Gulp, т.к. сам постоянно развиваюсь и стараюсь делать свои проекты как можно проще и быстрее. Обязательно поделюсь своей сборкой в Github.

Жду ваши комментарии ниже. Подписывайтесь на мой канал в телеграм. До встречи в следующих статьях!

Остались вопросы? Посмотрите видео.

Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

PHP include: как использовать в HTML верстке сайта?

До этого момента, рассматривая HTML и CSS, мы говорили только о статических страницах, то есть таких, которые, как бы пользователь с ними не взаимодействовал, всегда остаются неизменными, а чтобы содержимое или оформление их поменялось, хозяину страницы надо править код вручную.

Динамические страницы и что для них нужно

Помимо статических есть ещё динамические страницы. Таких сейчас в Интернете большинство. Информация в них подгружается из внешних источников, например базы данных или других файлов. Содержимое и форматирование таких страниц может меняться в зависимости от действий пользователя. Для правки динамических сайтов не обязательно вмешиваться в их код – достаточно изменить контент в специально для него предназначенном файле или базе данных, которая, к слову, представляет собой тоже файл, только определённым образом структурированный.

Для создания динамических сайтов только HTML и CSS недостаточно. Тут используются ещё и языки программирования, а также базы данных и языки запросов к ним. Чаще всего современные динамические сайты используют в своей работе HTML, CSS, PHP, JavaScript, SQL. Первые две аббревиатуры вам уже знакомы не понаслышке, SQL применяется для доступа к базам данных, JavaScript — клиентский язык, команды которого обрабатываются браузером и зачастую используются, чтобы показывать вам всякую красоту вроде шторок или плавно открывающихся фотографий, а вот PHP — это серверный язык программирования, который работает, в том числе, с содержимым сайта и делает его динамическим, с ним мы сегодня и соприкоснёмся.

Пример использования команды include

В предыдущей статье я рассказывал о блочной вёрстке сайта и приводил в пример простейшую страницу (документ index.html и привязанный к нему файл style.css).

Сейчас мы разделим документ index.html на несколько файлов, каждый из которых будет содержать свою часть страницы, что поможет ещё сильней разделить код, улучшить структуру шаблона и, по сути, сделать страницу динамической. Для этой цели мы будем использовать язык PHP, а точнее лишь одну его директиву — функцию include(), которая включает один файл в другой.

1. Смените разрешение созданного в статье о блочной вёрстке файла index с .html на .php, чтобы документ назывался index.php. Тип файла .PHP указывает серверу, что документ был написан или использует вставки на одноимённом языке программирования.

2. В папке со страницей создайте директорию blocks.

3. Всю вспомогательную информацию (верх, низ, навигацию и боковую панель сайта) вынесем в отдельные файлы, которые разместим в папке blocks.

Bootstrap 4 — Сборка проекта с помощью Gulp

В этой статье рассмотрим пример Gulp окружения, которое можно использовать для комфортной фронтенд разработки веб-проекта. Данный пример по умолчанию сконфигурирован для создания сайтов и веб-приложений, в основу которых положен фреймворк Bootstrap 4.

Проект, рассматриваемый в рамках этой статьи расположен на Github по адресу: https://github.com/itchief/gulp-project-bootstrap-4

Инструкция по установке Gulp окружения

Для создания окружения необходимо иметь следующие установленные программы:

• «Node.js» (загрузить установщик «Node.js» для своей операционной системы можно c этой страницы; для проекта требуется версия программы не ниже 10 );
• «Gulp» (установить Gulp можно посредством выполнения в консоли следующей команды: npm install -g gulp-cli ).

Последняя версия этого проекта (v.2.2.2) основана на Gulp 4 версии .

Если вы используете первую версию проекта, то дополнительно необходимо ещё установить пакетный менеджер Bower.

Ключ -g указывает npm , что пакет необходимо загрузить не в текущую, а в общую папку.

Выполнение инсталляции программы Bower осуществляется аналогично Gulp (актуально только для версии проекта 1.0.0):

После установки основных программ необходимо загрузить с Github архив проекта. Для этого можно воспользоваться этой ссылкой. Последняя версия проекта имеет номер 2.2.2.

Далее следует распаковать архив и перенести файлы из каталога «gulp-project-bootstrap-4» в корневую директорию проекта.

Если нужна не текущая, а какая-то определённая версия (например, 1.0.0), то её можно загрузить со страницы Releases.

Следующий этап – это установка npm пакетов и их зависимостей. Для этого в консоли (должны находиться в корневой директории проекта) необходимо выполнить команду:

Данная команда установит все пакеты, которые нужны как для работы самого окружения, так и для фронтенда. Выполняет npm эти действия в соответствии с инструкциями, написанными в файле «package.json».

При использовании первой версии проекта (1.0.0), в которой используется менеджер пакетов Bower, необходимо выполнить ещё команду:

Данная программа установит фронтенд пакеты, указанные в файле «bower.json».

Как использовать Gulp окружение?

Открыть командную строку (путь должен указывать на корневую папку проекта) и ввести gulp (обычный режим):

После ввода этой команды запустится задача по умолчанию, т.е. «default». Эта задача в свою очередь запустит серию других задач: «build», «webserver» и «watch».

Задача «build» выполнит сборку проекта для продакшена (т.е. она запустит «clean:build», «html:build», «css:build», «js:build», «fonts:build» и «image:build»). Эти задачи поместят в папку «assets/build» результирующие файлы проекта.

Задача «webserver» предназначена для запуска локального веб-сервера с «живой перезагрузкой» страниц в браузере. С помощью него можно очень просто посмотреть проект и выполнить его тестирование.

Задача «watch» используется для отслеживания изменения исходных файлов в папке «assets/src» и выполнение если это призошло различных задач. Другими словами, она позволяет автоматически запускать необходимые задачи и поддерживать результирующие файлы (содержимое папки «assets/build») в актуальном состоянии.

Кроме этого можно выполнять выборочную (самостоятельную) сборку той или иной части проекта.

Например, для сборки только CSS части сайта достаточно ввести команду:

Список других задач:

Описание Gulp окружения

В этом разделе разберём:

• основные инструменты и файловую структуру Gulp окружения;
• как осуществляется подключение исходников Bootstrap к проекту и их настройка;
• как самостоятельно (с нуля) выполнить инициализацию Gulp проекта и установку зависимостей (без использования готового package.json)
• как с нуля выполнить инициализацию Bower и установку фронтенд пакетов (без использования готового «bower.json»)*;
• содержимое файла сборщика проекта Gulp (gulpfile.js)

* Менеджер пакетов Bower не используется в проекте, начиная с версии 2.0.0.

Список инструментов

Окружение, предназначенное для разработки фронтенд проекта (сайта), построено на базе следующих инструментов:

• Node.js (среды, в которой будет выполняться окружение);
• npm (пакетного менеджера, входящего в Node.js; будет использоваться для загрузки Gulp, плагинов и фронтенд пакетов);
• jQuery, Popover, Bootstrap (пакеты, которые будут использоваться для сборки css и js частей сайта);
• Gulp и его плагины (будут использоваться для сборки проекта и выполнения других веб задач).

В первых версиях проекта дополнительно ещё использовался пакетный менеджер Bower. Он применялся за загрузки библиотек jQuery, Popover и Bootstrap. В версиях проекта, начиная с 2.0.0, загрузка данных библиотек выполняется посредством npm.

Файловая структура Gulp проекта

Файловую структуру проекта можно организовать по-разному. Это может зависеть как от предпочтений конкретного разработчика, так и от проекта, для которого она создаётся.

В данной статье будем придерживаться следующей структуры:

В корне проекта расположена папка «assets» и файлы «gulpfile.js», «package.json». Файл «gulpfile.js» будет содержать задачи для сборщика проекта Gulp.

В первой версии проекта также использовались файлы «.bowerrc» и «bower.json». Файл «bower.json» — это конфигурационный файл менеджера Bower, на основании которого определялись необходимые для загрузки фронтенд пакеты. В данном проекте он использовался для загрузки Bootstrap, jQuery и Popper.

В папке «assets» находятся две папки: «src» (для исходных файлов) и «build» (для готовых файлов; в эту папку их будет помещать сборщик Gulp). В папке «src» расположены каталоги «fonts» (для шрифтов), «img» (для исходных изображений), «js» (для js-файлов), «style» (для стилей) и «template» (для HTML фрагментов) и файл «index.html».

В первой версии проекта в папке «src» ещё находилась директория «bower_components». Она предназначалась для компонентов, загрузка которых выполнялась с помощью Bower. В текущей версии её нет.

В каталоге «js» распологаются два файла: «main.js» и «my.js». Файл «my.js» используется для написания своих скриптов, а «main.js» – для определения списка файлов, содержимое которых необходимо будет включить в итоговый js-файл. Под итоговым понимается файл, который должен получиться на выходе (в каталоге «build»).

Директория «style» отведена под стили. В данной директории находятся три файла: «main.scss» (содержит список файлов, содержимое которых необходимо включить в итоговый файл стилей), «my.scss» (используется для написания своих стилей) и «variables.scss» (содержит SCSS переменные, с помощью которых будем изменять стили Bootstrap 4, а также использовать его для создания своих переменных).

Файл «index.html» — это главная страница создаваемого проекта. Кроме «index.html» в данную директорию можно поместить и другие html страницы.

Директория «template» предназначена для помещения в неё фрагментов HTML страниц. Например, в данной директории можно создать файлы «head.html» и «footer.html», и импортировать их содержимое (используя синтаксис //= путь_к_файлу ) сразу в несколько страниц. Это позволит более просто создавать и редактировать html страницы, т.к. отдельные части страниц уже будут находиться в отдельных файлах.

Подключение исходников Bootstrap 4 к проекту и их настройка

Существуют разные способы подключения фреймворка Bootstrap 4 к проекту, а также варианты работы с ним.

Наиболее гибкий вариант заключается в использовании исходных кодов. В этом случае можно не только очень просто изменять дефолтные стили Bootstrap, но и подключать к проекту только те классы и компоненты, которые в нём будут использоваться.

Исходные коды CSS стилей Bootstrap 4 написаны на языке SCSS и представлены посредством большого количества небольших файлов.

Список SCSS файлов (расположены в каталоге «node_modules/bootstrap/scss/»): «functions.scss», «variables.scss», «mixins.scss», «variables.scss», «print.scss», «reboot.scss», «type.scss», «images.scss», «code.scss», «grid.scss», «tables.scss», «forms.scss», «buttons.scss», «transitions.scss», «dropdown.scss» и др.

Каждой такой файл выполняет либо определённую служебную задачу, либо отвечает за стилизацию какой-то определённой функции фреймворка или компонента. Файлы SCSS имеют краткие и понятные имена. Используя только их можно достаточно точно понять назначение каждого из них.

Настройка или изменение дефолтных стилей Bootstrap 4 осуществляется посредством переопределения значений переменных SCSS. Все SCSS переменные для удобства собраны в одном месте (в файле «variables.scss»). Но, переопределять их значения желательно, конечно же, не в этом файле, а в своём (например, имеющим такое же имя «variables.scss», но находящемся в «assets/style/variables.scss»).

Например, изменение цвета тем success и danger, осуществляется посредством изменения значений переменных $green и $red :

Обратите внимание, что после копирования переменных Bootstrap 4 в свой файл CSS («assets/style/variables.scss»), у них необходимо убрать метку !default .

Метка !default предназначена для установления SCSS переменной значения по умолчанию. Если же у SCSS переменной уже есть значение, то новое значение, если оно указано с ключом !default , установлено не будет.

Указать какие исходные SCSS файлы Bootstrap 4 должны участвовать при компиляции в CSS, а какие нет, выполняется посредством SCSS файла «assets/style/main.scss». Другими словами именно содержимое этого файла и будем определять тот набор стилей, который после компиляции будет подключен к веб-странице.

Кроме этого, к этому файлу также подключёны файлы «assets/style/variables.scss» (для переопределения переменных Bootstrap) и «assets/style/my.scss» (для создания своих стилей).

Содержимое файла «main.scss» (пример):

Кроме этого, для работы некоторых компонентов Bootstrap 4 нужен ещё JavaScript код.

Список js-файлов Bootstrap 4 (находятся в каталоге «node_modules/bootstrap/js/dist/»): «util.js», «alert.js», «button.js», «carousel.js», «collapse.js», «dropdown.js», «modal.js», «tooltip.js», «popover.js», «scrollspy.js», «tab.js» и «toast.js».

Определение какие js-файлы фреймворка Bootstrap 4 необходимо включить в итоговый js-файл проекта, а какие нет, выполняется посредством «main.js».

Импортирование нужных файлов в результирующий build/main.js осуществляется посредством следующей конструкции:

Выполняет это действие будет Gulp плагин «gulp-rigger». Как его установить и подключить будет описано ниже.

В данный файл можно также импортировать jQuery, Popper (необходим для работы компонентов Dropdown, Tooltip и Popover) и при необходимости свои js-файлы.

Содержимое файла «main.js» (пример):

Как с нуля выполнить инициализацию Gulp проекта и установку зависимостей?

Начинается разработка проекта обычно с создания файла «package.json» (манифеста).

Файл «package.json» будет содержать общую информацию о проекте (название, версию, описание, имя автора и др.), а также данные о пакетах, от которых этот проект зависит.

Для создания манифеста, необходимо перейти в корневую папку проекта и ввести команду:

После ввода команды необходимо ответить на следующие вопросы:

• имя проекта (name) – «bootstrap-4»;
• номер версии (version) – «2.0.0»;
• описание (description) – «Start project with use Bootstrap 4»;
• автор (author) – «itchief.ru»;
• git репозиторий (git repository) — «»;
• точка входа (entry point), тестовая команда (test command), лицензия (license), ключевые слова (keywords) – значения по умолчанию.

На вопрос «Is this ok?» ответим «yes» или нажмём Enter .

В результате в корневой папке проекта появится файл «package.json».

Теперь установим пакеты, которые будем использовать в проекте с помощью следующей команды:

Ключ «—save-dev» или «—save-prod» определяет в какую секцию файла «package.json» попадёт информация о нём.

Список пакетов, которые будут использоваться в проекте:

После установки всех зависимостей, файл package.json будет иметь следующее содержимое:

Как с нуля выполнить инициализацию Bower и установку фронтенд пакетов?

Определим папку, в которую Bower будет загружать пакеты. Для этого создадим файл .bowerrc и введём в него следующее:

Сохраним файл .bowerrc . Теперь все компоненты будут загружаться в каталог bower_components , находящийся в assets/src/ .

Выполним инициализацию Bower (создадим файл-манифест bower.json ). Создание файла bower.json можно осуществить с помощью команды (в корневой папке проекта):

После этого необходимо ответить на следующие вопросы:

• имя проекта (name) – bootstrap-4;
• описание (description) – Start project on Bootstrap 4 — itchief.ru;
• автор (author) – itchief.ru;
• установить установленные компоненты как зависимости (set currently installed components as dependencies) – Y (Да);
• хотите вы отметить этот пакет как приватный, это предотвратит его случайную публикацию в реестре Bower (would you like to mark this package as private which prevents it from being accidentally published to the registry) – Y (Да);
• на остальные вопросы оставим ответы, предлагаемые программой по умолчанию;

В результате этих действий будет создан файл bower.json .

Загрузим Bootstrap 4 и пакеты от которых он зависит (Popper и jQuery) в наш проект с помощью Bower.

Для этого в консоли необходимо ввести следующую команду:

Ключ -save необходим для того, чтобы информацию о пакете записать в секцию dependencies файла bower.json .

В результате bower.json будет иметь следующее содержимое:

Если вы не хотите инициализировать Bower (bower.json) с помощью команды bower init и устанавливать пакеты вручную, то можете просто создать файл bower.json (например, с помощью файлового менеджера) и вставить в него вышепредставленное текстовое содержимое. Для установки зависимостей в проект достаточно будет ввести следующую команду:

Описание файла сборщика проекта Gulp (gulpfile.js)

Все действия, выполненные до этого, были подготовительными. Весь функционал, который будет выполнять создаваемое окружение, будет определяться файлом «gulpfile.js».

Файл «gulpfile.js» представляет собой список задач.

Основные задачи которые будут выполнять этот файл:

• сбор нескольких файлов стилей в один, компиляция полученного SCSS в CSS, добавление автопрефиксов, минимизация CSS и создание source map;
• импорт всех необходимых js-файлов в один, минимизация этого файла и создание source map;
• сбор html файла, перенос шрифтов, обработка (сжатие) картинок и автоматическое обновление страниц посредством Browser Sync.

Кроме этого чтобы эти задачи не запускать при изменении исходных файлов вручную, создадим ещё одну задачу «watch». Она будет отслеживать изменения файлов, и запускать определённые задачи автоматически.

Код файла «gulpfile.js» (при использовании Gulp 4):

Код файла «gulpfile.js» содержит комментарии. С помощью них поясняется что выполняет тот или иной фрагмент инструкций.

Создание задачи в Gulp выполняется очень просто:

Задачи в gulp построены очень просто. Их каркас действий в большинстве случаев можно представить так:

• получить данные из исходных файлов;
• обработать исходные данные посредством gulp плагинов;
• сохранить полученный результат (файлы) в каталог «build».

Включить другой HTML файл в файл HTML

У меня есть 2 файла HTML, предположим a.html и b.html . В a.html я хочу включить b.html .

В JSF я могу сделать это так:

Это означает, что внутри файла a.xhtml я могу включить b.xhtml .

Как мы можем сделать это в файле *.html ?

На мой взгляд, лучшее решение использует jQuery:

Этот метод является простым и чистым решением моей проблемы.

Документация jQuery .load() здесь.

Расширение ответа lolo сверху, вот немного больше автоматизации, если вам нужно включить много файлов:

PHP include: как использовать в HTML верстке сайта?

До этого момента, рассматривая HTML и CSS, мы говорили только о статических страницах, то есть таких, которые, как бы пользователь с ними не взаимодействовал, всегда остаются неизменными, а чтобы содержимое или оформление их поменялось, хозяину страницы надо править код вручную.

Динамические страницы и что для них нужно

Помимо статических есть ещё динамические страницы. Таких сейчас в Интернете большинство. Информация в них подгружается из внешних источников, например базы данных или других файлов. Содержимое и форматирование таких страниц может меняться в зависимости от действий пользователя. Для правки динамических сайтов не обязательно вмешиваться в их код – достаточно изменить контент в специально для него предназначенном файле или базе данных, которая, к слову, представляет собой тоже файл, только определённым образом структурированный.

Для создания динамических сайтов только HTML и CSS недостаточно. Тут используются ещё и языки программирования, а также базы данных и языки запросов к ним. Чаще всего современные динамические сайты используют в своей работе HTML, CSS, PHP, JavaScript, SQL. Первые две аббревиатуры вам уже знакомы не понаслышке, SQL применяется для доступа к базам данных, JavaScript — клиентский язык, команды которого обрабатываются браузером и зачастую используются, чтобы показывать вам всякую красоту вроде шторок или плавно открывающихся фотографий, а вот PHP — это серверный язык программирования, который работает, в том числе, с содержимым сайта и делает его динамическим, с ним мы сегодня и соприкоснёмся.

Пример использования команды include

В предыдущей статье я рассказывал о блочной вёрстке сайта и приводил в пример простейшую страницу (документ index.html и привязанный к нему файл style.css).

Сейчас мы разделим документ index.html на несколько файлов, каждый из которых будет содержать свою часть страницы, что поможет ещё сильней разделить код, улучшить структуру шаблона и, по сути, сделать страницу динамической. Для этой цели мы будем использовать язык PHP, а точнее лишь одну его директиву — функцию include(), которая включает один файл в другой.

1. Смените разрешение созданного в статье о блочной вёрстке файла index с .html на .php, чтобы документ назывался index.php. Тип файла .PHP указывает серверу, что документ был написан или использует вставки на одноимённом языке программирования.

2. В папке со страницей создайте директорию blocks.

3. Всю вспомогательную информацию (верх, низ, навигацию и боковую панель сайта) вынесем в отдельные файлы, которые разместим в папке blocks.