Как подключить html файлы gulp
Обновлено: 04.07.2024
Где-нибудь создать папку, к примеру к корне диска С, называем gulp, и в ней папка myproject. Главное, чтобы в пути к ней не было русских букв.
В окне команд пишем:
там нужно будет ответить на несколько вопросов:
это установка зависимостей пакетов, которые работают вместе с gulp. В нашей папке появилась папка _node_modules.
Устанавливаем проверку обновлений пакетов в gulp
Нужно установить проверку обновлений всех пакетов, которые мы наустанавливаем в галп:
Поэтому надо написать:
В нашей папке myproject надо создать такую структуру папок:
В корне создаем папки app и dist
Внутри app:
Не забыть создать файл index.html.
Создаем файл gulpfile.js в корневой папке.
Проверяем работу gulp. Открываем этот файл и пишем в него:
ОБЯЗАТЕЛЬНО ТОЧКУ С ЗАПЯТОЙ В КОНЦЕ!! Иначе не заработает.
Шаблон для создания любой задачи (task) в gulp:
Т.е. откуда брать файл, что с ним сделать и куда отгрузить.
РЕАЛЬНО ЖЕ в него пишем следующее, все с самого начала:
Заходим в папку app>sass и создаем там файл main.sass.
Пишем в него хотя бы что-нибудь, чтобы проверить работу:
Возвращаемся в файл gulpfile.js и пишем в него (добавляем строки):
Теперь в командной строке запускаем gulp sass .
В итоге создастся файл main.css в папке app>css, скомпилированный и оптимизированный уже.
Маски для создания путей для источника файлов, на примерах
Дополнительно
В папке sass можно создать файл с именем, начинающимся с нижнего подчеркивания, например _part.sass. Такие файлы не участвуют в комплияции как отдельные файлы. Их надо просто импортировать командой @import в основной файл. Т.е.:
В файл main.sass в самое начало добавляем импорт и получаем:
В итоге этот фрагмент будет в начале того файла, куда импортируешь. То есть если в main.sass написать, то этот фрагмент будет в итоговом скомпилированном main.css.
Автоматическая компиляция файлов sass при сохранении
Используется метод watch. Синтаксис такой:
Чтобы выйти из этого режима слежения нужно нажать Cntrl+С ДВА РАЗА .
LiveReload
Останавливаем режим слежения (если запущен) Cntrl+С ДВА РАЗА и устанавливаем эту штуку:
Установить установили, а теперь нужно подключить его в gulpfile.js.
добавляем эту строку
то есть теперь начало в файле получается таким:
теперь надо написать таск (выполнение задачи) для браузер-синка:
Чтобы автоматически отражались не только css, но и html и js, нужно добавить пару строк в таск watch:
Создаем папку libs в папке app. Туда мы будем сваливать все какие-то библиотеки, jquery плагины и другие плагины.
Bower
Для установки новых библиотек лучше использовать Bower (используется для установки новых плагинов)
устанавливаем его npm i -g bower
На их сайте говорится, что для работы нужен git, скачиваем и устанавливаем его для своей платформы.
В корневой папке myproject создаем файл .bowerrc (начинающийся с точки).
сохраняем. Так, он говорит менеджеру пакетов куда устанавливать новые плагины.
Теперь для примера установим два плагина, в командной строке пишем:
появятся две папки jquery и magnific-popup в папке app>libs.
Установить два пакета для сбора всех файлов js и минизации:
npm i gulp-concat gulp-uglifyjs --save-dev
После установки любой приблуды, надо не забывать подключать ее в файле gulpfile.js, поэтому добавляем там строки:
Создаем таск для этой утилиты:
Подключаем jquery в html.
В конце тега body добавляем строки:
т.е. общую сжатую библиотеку и ручной (common.js), он обычно не сжимается, т.к. весит немного.
В папке app>sass создаем файл libs.sass, куда будем сваливать все css библиотеки.
Устанавливаем утилиты, которые будут сжимать css и добавлять в название суффикс mini:
И опять после установки их нужно подключить в основном файле gulpfile.js. последние 2 строчки это они:
пишем таск для них:
Подключаем css стили в html документ:
Сваливаем готовое в папку dist
Для этого создаем таск
Для того, чтобы перестраховаться, лучше бы для начала очистить папку dist от прежних файлов, если там что-то было.
Для этого устанавливаем утилиту для удаления файлов, пишем в командной строке:
После успешной установки, ее надо подключить в файл gulpfile.js, как обычно:
Оптимизация изображений в gulp
Устанавливаем пакет для оптимизации изображений
Подключаем его в gulpfile.js
Пишем таск для них.
И вставляем вызов этого таск в таск build, т.е. добавляем
теперь при запуске таска build будут все эти таски выполняться последовательно, которые в него запихали.
Если изображений много, то надо установить кеш
потом подключаем его в начале файла gulpfile.js:
И немного модифицируем после этого таск img:
Если мы поменяем папку для изображений или файлы, которые хотим оптимизировать, то у нас не будет работать минификация изображений из-за кеша.
Поэтому надо написать новый таск для очистки кеша:
Он запускается чисто вручную, т.к. нужен редко, и нет необходимости его встраивать его в какой-либо таск.
Автоматическое создание вендорных префиксов в gulp
Для этого сначала устанавливаем пакет:
Как всегда теперь подключаем его в начале файла.
И добавляем новый пайп в таск sass:
Резюме
Итоговое содержание файла gulpfile.js
Итоговое содержание файла package.json
Структура папок
п.с. статья построена на базе видосика канала webdesigner master:
От автора: для меня крайне удивительно, что никогда не было возможности включения HTML в другие HTML-файлы. Похоже, на горизонте нет ничего, что могло бы решить эту проблему. Я говорю о прямом включении, взять кусок HTML и вставить его прямо в другой.
Например, сценарий использования для большей части всего Интернета, включение заголовка и футера для всех страниц:
Это не реально, кстати. Я просто хотел бы, чтобы вы поняли, о чем речь.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Люди искали другие языки, чтобы решить эту проблему. В некотором смысле, это предварительная обработка HTML. Задолго до того, как мы обрабатывали CSS, мы использовали инструменты для манипулирования HTML. И мы до сих пор делаем это, потому что идея включений полезна практически для любого веб-сайта в мире.
Использовать PHP
Можете ли вы использовать вместо этого PHP?
Это выполнит включение на уровне сервера, и запрос будет выполнен на уровне файловой системы на сервере, поэтому это должно быть намного быстрее, чем решение на стороне клиента.
Использовать Gulp
Что может быть еще быстрее, чем на стороне сервера? Если включение предварительно обрабатывается еще до того, как оно будет на сервере. У Gulp есть множество процессоров, которые могут это делать. Одним из них является gulp-file-include. Это будет выглядеть так:
И вы бы обработали это так:
Похоже, что этот конкретный плагин имеет необычные функции, в которых вы можете передавать переменные во включения, что позволяет создавать небольшие компоненты, управляемые данными.
Использовать Grunt
Это то, что делает плагин grunt-bake. Вы настраиваете Grunt для обработки HTML:
Тогда HTML может использовать этот специальный синтаксис для включений:
Использовать Handlebars
У Handlebars есть партиалы. Вы регистрируете их:
И после этого используете:
Использовать Pug
Затем вы запускаете это с чем-то вроде gulp-pug.
Использовать Nunjucks
Я люблю Nunjucks! Nunjucks имеет включения. Мы бы сделали это так:
Если вы поместите это в файл с именем index.njk, то можете обработать его с помощью простого скрипта Node в index.html следующим образом:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
fs . writeFile ( "index.html" , nunjucks . render ( "index.njk" ) , function ( err , data ) <Или обработайте это чем-то вроде gulp-nunjucks. 11ty имеет встроенный Nunjucks, как и большинство других, упомянутых до сих пор. Это может подойти вам, если вы на самом деле создаете маленький сайт.
Использовать Ajax
Вы можете получить содержимое для заголовка и футера из соответствующих файлов и вывести содержимое.
Использовать фреймы
Вы могли бы сделать это:
Но содержимое в этих iframe не использует тот же DOM, поэтому это немного странно, не говоря уже о том, что этот стиль медленный и неудобный (поскольку iframes не знает высоты содержимого).
Скотт Джел задокументировал классную идею: вы можете заставить iframe внедрить свое содержимое на родительскую страницу, а затем удалить самого себя.
< iframe src = "header.html" onload = "this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()" > < / iframe > < iframe src = "footer.html" onload = "this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()" > < / iframe >Использовать Jekyll
Использовать Sergey
Хорошо, я назову еще один SSG, потому что он довольно новый и очень компактный. В Sergey есть формат стиля веб-компонентов:
Вы задаете имена файлам header.html и footer.html, вставляете их в папку /includes/, а затем будет выполнена сборка с обработкой включений, когда вы запустите скрипт npm.
Использовать Apache SSI
Apache, супер-пупер общий веб-сервер, он может выполнять включения. Вы можете сделать это так:
Но вам нужна правильная конфигурация Apache, чтобы все было обработано правильно. Я старался изо всех сил, чтобы создать рабочую демо-версию, но мне не повезло. Я попытался использовать .htaccessв папке на сервере Apache и переключился на то, что мне показалось правильным:
Я уверен, что есть какой-то способ заставить это работать, и если вы это сделаете, то это здорово, что ему не нужно других зависимостей.
Использовать CodeKit
Это только для Mac, но в CodeKit есть специальный язык, называемый Kit, суть 90% того, что он обрабатывает, это включения HTML. Он использует специальные комментарии HTML:
Использовать Dreamweaver
Lol, шутка. Но это действительно работает.
Черт побери. Это довольно много способов, не так ли?
Как я сказал в начале, меня очень удивительно, что сам HTML не обращался к этому напрямую. Не то чтобы я думал, что для производительности было бы хорошей идеей иметь операторы <include>, запускающие сетевые запросы по всему коду, но это есть в других платформах. Использование импорта ES6 напрямую без упаковки тоже не всегда хорошая идея, но у нас это есть. Использование @import в CSS не всегда хорошая идея, но она у нас есть. Если бы у платформы был собственный синтаксис, возможно, другие инструменты смогли бы использовать это, подобно тому, как упаковщики JavaScript поддерживают формат импорта ES6.
Использование сборщика проектов Gulp значительно облегчает и ускоряет разработку веб-проектов.
Так же используя сборщики на выходе вы получаете минифицированные (css, js, html файлы) и адаптированные для разных браузеров файлы (css файлы).
Так же используя дополнительные модули Gulp, такие, как gulp-webp вы сможете конвертировать ваши .jpg/.jpg изображения в современный web формат .webp, что позволит ускорить загрузку ваших страниц.
Часть 1 – Установка Gulp
Для установки вам понадобится предварительно установленный Node.js, загрузить его можно по ссылке.
Далее запускаем установку через командную строку следующую команду:
Флаг --global устанавливает gulp для всей системы и вы можете использовать его в нескольких проектах.
Переходим к вашему проекту используя команду:
Далее вводим команду:
Так мы создадим файл package.json, этот файл содержит информацию о вашем проекте, зависимости, настройки модулей.
Устанавливаем зависимости gulp:
Данная команда установит локально в проект необходимые модули.
Часть 2 – Настройка Gulp
Создаем файл gulpfile.js
В этом файле мы описываем нужные нам задачи и прописываем все модули для дальнейшей работы.
Какие модули использует веб студия Atekla для разработки своих проектов:
- gulp-autoprefixer
- gulp-file-include
- gulp-sass
- gulp-uglify
- gulp-htmlmin
- gulp-webp
- gulp-clone
- browser-sync
За что отвечают модули?
Gulp-autoprefixer – собирает CSS файл с префиксами для различных браузеров, плюс добавляет правила для поддержки старых браузеров.
Gulp-file-include – позволяет подключать ваши html файлы как если бы вы работали с PHP
Gulp-sass – позволяет собирать CSS файлы если ваш проект написан с помощью SASS/SCSS
Gulp-uglify – минификация JS файлов
Gulp-htmlmin – минификация HTML файлов
Gulp-webp – конвертация JPG/PNG изображений в WEBP с настройкой качества изображения
Gulp-clone – позволяет сохранить исходное изображение JPG/PNG и перенести его в папку проекта для использования в браузерах без поддержки WEBP
Browser-sync – верстайте ваш проект без хостинга и использования MAMP.
Часть 3 - Создание файла gulpfile.js
Подключаем модули в файл gulpfile.js
Создаем пути для работы Gulp
Задача Webserver – создает локальный хостинг для верстки
Что такое Gulp, зачем он нужен, его возможности, как установить и как начать использовать в разработке сайтов.
Gulp - что это такое и зачем он нужен
Gulp - это инструмент, позволяющий ускорить процесс web-разработки. Gulp автоматически выполняет все самые необходимые часто используемые задачи.
Возможности Gulp:
-
при сохранении кода
- Использование препроцессоров для CSS (например, Sass), для JavaScript (например, CoffeeScript), для HTML (например, Pug)
- Минификация CSS, JavaScript, HTML (уменьшение размера кода путём удаления ненужных символов и пробелов)
- Соединение файлов в один (например, из пяти CSS файлов сделать один файл CSS)
- Создание , удаление и переименование файлов и папок проекта
- Автоматическое создание вендорных префиксов (-webkit, -moz, -o, -ms), чтобы старые версии браузеров поддерживали все css-свойства
- Оптимизация изображений
- И многое другое.
Как установить Gulp глобально в системе
Установка Gulp глобально необходима для того, чтобы была доступна команда gulp в окне команд / bash.
Для установки Gulp нам понадобится пакетный менеджер npm , который входит в состав Node.js . С помощью npm мы будем устанавливать пакеты в каталог node_modules . Если Node.js не установлен, то устанавливаем его. Далее можно начать установку Gulp.
Открыть командную строку и ввести следующий текст:
Коротко о том, что это значит:
- npm - это менеджер пакетов, с помощью которого будем устанавливать Gulp
- i (install) - означает установка
- gulp - это установка Gulp
- -g (global) - установить глобально, а не в какую-то конкретную папку
Таким образом Gulp установлен глобально . Приступим к установке Gulp в папку проекта.
Установка Gulp в папку проекта
Нам также необходимо установить Gulp локально в папке проекта, чтобы мы могли его подключать в gulpfile.js .
При создании папок будущего проекта важно помнить следующее: все папки проекта должны быть написаны латинскими буквами, никаких русских символов не должно быть, это необходимо для корректной работы.
Создадим корневую папку для нашего проекта. Назовём, например, gulp-project . Зайдём в неё, зажмём клавишу shift и выберем в контекстном меню пункт Открыть PowerShell здесь или Открыть окно команд (и т.п.).
Выполним следующую команду для создания файла package.json :
Или чтобы быстро создать package.json используйте:
Этот файл будет содержать всю информацию о проекте (название, описание, автор и т.д.), а так же об используемых зависимостях в проекте.
Создание файла package.json с командой npm init:
Введём название проекта, описание и автора, а остальные пункты пока оставим по умолчанию, нажимая «Enter» . Ответив на все вопросы, будет создан файл package.json .
Теперь мы можем установить Gulp в наш проект, а именно в папку gulp-project , которую мы создавали для нашего проекта.
Для установки Gulp в нашу папку воспользуемся командой:
Есть несколько отличий от установки Gulp глобально.
Здесь нет -g , т.е. Gulp будет устанавливаться локально в ту папку, в которой была открыта консоль. И появилась запись (флаг) --save-dev (-D) , благодаря этому, пакет и его версия будет добавлен в package.json. Это нужно для последующей быстрой установки пакетов в других проектах путём копирования файла package.json .
После установки gulp мы увидим примерно следующее:
Мы установили Gulp в нашу папку gulp-project , в которой появилась новая папка node_modules . В ней и находится Gulp, а так же будут храниться все зависимости нашего проекта.
Так же если зайти в package.json , то увидим изменения:
Создание структуры Gulp проекта
Структура может быть практически любой. У нас будет следующая:
- gulp-project/
- app/
- assets/
- css/
- fonts/
- img/
- js/
- libs/
- sass/
- app/ - рабочая папка проекта, в ней будут находиться все исходники - шрифты, изображения, css и js файлы;
- dist/ - папка продакшена, в ней будет находиться готовый оптимизированный проект;
- node_modules/ - папка с модулями и зависимостями;
- gulpfile.js - файл конфигурации, в котором будем описывать все задачи Gulp;
- package.json - файл, содержащий информацию о проекте (название, описание, автор, зависимости и т.д.)
Как создавать задачи (таски) Gulp
Создадим файл gulpfile.js и начнём его заполнение.
Сначала нужно подключить Gulp к проекту, который находится в папке node_modules . Для этого напишем следующий код.
В фигурных скобках мы укажем, все необходимые функции (методы), которые мы будем использовать.
Теперь Gulp подключен к нашему проекту. Далее, мы будем подключать все необходимые пакеты (плагины) для Gulp.
Задача (функция) в Gulp имеет следующий вид.
Создадим простейшую задачу (функцию), которая будет выводить строку 'Привет, Gulp!'.
output - имя функции (задачи), оно может быть любым.
Выполнение задачи
Чтобы запустить задачу, нужно выполнить команду gulp название_задачи . В нашем случае команда будет следующей.
Запуск задачи Gulp по умолчанию
Чтобы выполнять задачу output командой gulp , сделаем нашу функцию задачей по умолчанию, присвоив default .
Пока что у нас только одна задача, которая выводит на экран Привет, Gulp! .
И теперь чтобы запустить нашу задачу, достаточно просто написать gulp .
Это был самый простой пример работы Gulp. Для более сложных задач используются дополнительные методы.
Методы gulp
Мы уже видели в коде выше метод series - который позволяет выполнять перечисляемые задачи последовательно (следующая задача выполняется только после завершения предыдущей). Постепенно мы рассмотрим все методы Gulp.
- src - какие файлы использовать для обработки в потоке;
- dest - куда выгружать обработанные в потоке файлы (место назначения);
- watch - наблюдение за изменениями в файлах;
- series - вызов задач последовательно;
- parallel - вызов задач параллельно.
Как создавать задачи мы рассмотрели. Теперь рассмотрим, как выбирать необходимые файлы.
Gulp src / dest
Сначала рассмотрим пример, затем уже разберём какие паттерны (выборки) для выбора файлов можно использовать.
В данном примере мы видим работу двух методов:
- src (source) - выбираем файлы для обработки;
- dest (destination) - место назначения.
В src мы использовали паттерн css/**.css для выбора всех css файлов внутри папки /assets/css/ (исключая файлы в подпапках, если таковые имеются).
Примеры наиболее используемых паттернов для выбора файлов:
- app/**/*.* - выбор всех файлов в папке app ;
- app/js/**/*.js - выбор всех js файлов в папке js ;
- app/**/*. - все css и js файлы в папке app ;
- app//**/*. - все js и css-файлы в папках folder1 и folder2 ;
- ['app/**/*.css', 'app/**/*.js'] - получаем сначала все css, потом все js в папке app ;
- ['app/**/*.*', '!app/**/*.js'] - все файлы в папке app , кроме js-файлов. ( ! - знак исключения).
Gulp series / parallel
В нашем примере была указана одна функция, но задач в gulp может быть очень много. Чтобы выполнять все перечисленные функции одной командой gulp необходимо сделать следующее.
В series мы перечисляем список задач для последовательного выполнения.
Если нам не важно когда закончится та или иная задача, мы можем использовать метод parallel :
В данном примере, сначала выполнится задача output , затем последовательно будут выполняться otherFunc и otherFunc2 , и после их завершения начнёт своё выполнение задача otherFunc3 .
Gulp lastRun()
Используется для ускорения времени выполнения, за счёт пропуска файлов, которые не изменились с момента последнего успешного завершения задачи.
Установка, подключение и использование плагинов Gulp
Предположим, нам необходим установить плагин del - его используют для удаления файлов и папок.
Это наипростейший пример, но он хорошо демонстрирует последовательность действий.
- 1. Установка.
- 2. Подключение.
- 3. Создание задачи
Просмотр списка задач Gulp
Чтобы просмотреть задачи, которые вы можете выполнить, используйте следующую команду.
Обновление плагинов (версий пакетов)
Чтобы проверить наличие новых версий плагинов (пакетов) в package.json , установим npm-check . Данный плагин может не только находить устаревшие зависимости, но так же неправильные и неиспользованные.
Использование - проверка актуальности версий пакетов.
Обновление в автоматическом режиме.
Или же можете самостоятельно обновить/установить/удалить нужный пакет следуя предложенным командам.
Gulp 4
Если у вас не работает Gulp, возможно вы обновили его с 3 версии до Gulp 4 . В связи с этим появились ошибки в gulpfile.js из-за изменений в синтаксисе выполнения задач gulp.
Простейший способ реанимировать ваш Gulp проект, это заменить все конструкции с квадратными скобками "[" "]" на gulp.parallel() .
Нужно заменить для Gulp 4.
Статьи про Gulp
- Введение в Gulp (1 часть - текущая).
- Использование SASS в Gulp (2 часть).
- Автоматическое обновление страницы с помощью browser-sync для Gulp (3 часть).
- Использование Babel в Gulp (4 часть).
- Моментальная загрузка сайта на хостинг и синхронизация файлов - gulp-rsync (5 часть).
English Russian Gulp Глоток Dependencies Зависимости Task Задача Variable Переменная Watch Наблюдать Destination Пункт назначения Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Читайте также:
- assets/
- app/