Декабрь 2017
Автор: Рубрика: Верстка Комментариев нет

Как собрать готовый проект gulp build


таймера используем плагин FlipClock

Создадим простую форму, добавим плагин часов и маску телефона, затем воспользуемся командой gulp build, чтобы сжать все файлы проекта и выгрузить в папку dist.

В итоге получим все файлы скриптов плагинов, jquery, bootstrap в одном минимизированном файле scripts.min.js, что удобно и выполняет требования google у сервиса page speed по скорости загрузки сайта на все сто процентов.

Сделаем форму в landing page

  • Делаем секцию с идентификатором formz.
  • Добавляем первую строку row с двумя колонками по col-md-6. В одной колонку заголовки, во второй будет таймер обратного отсчета для акции. У таймера будет класс your-clock для вывода изображения и второй див с классом message сообщение о том, что время истекло. Для подключения таймера используем плагин FlipClock.
  • Ниже добавим два поля ввода input и кнопку в три колонки col-md-4. У первого input будет имя и идентификатор name. Placeholder пишем видимую часть с указанием к действию. Свойство required не даст отправить форму, пока не задано поле имя. Bootstarp класс form-control делает поле по всю ширину колонки.
    Копируем поле имя и переименовываем в телефон phone. Добавим кнопку с type=submit.

Код html.

Подключаем маску телефона и таймер.

  1. Маску телефона подключаем плагином masked input, подробно тут.
  2. Используем таймер FlipClock, потому что удобно стилизовать.

Подключаем маску телефона и таймер

Код для активации работы плагинов в common.js.

Стили формы лендинг пейдж.

Стилизуем input имя и телефон по идентификатору #name.

Часы FlipClock, стилизуем с инспектором в браузере. Копируем все классы, которые хотим поменять в main.sass.

Часы FlipClock, стилизуем с инспектором в браузере

Код в main.sass.

Собираем проект gulp build

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

Выгрузим результат в папку dist.

Функция build в файле gulpfile.js собирает сайт, очищает от лишнего и оставляет только нужное.

Выполним команду gulp build в командной строке.

После этой команды в корне проекта появится папка dist.

Выполним команду gulp build в командной строке

  1. В ней лежит index.html, файл сайта landing.
  2. Один файл скрипта scripts.min.js, который в себя включается все плагины.
  3. Файл стилей main.min.css. Включает стили проекта и стили плагинов.
  4. Папка с картинками img. Все изображения оптимизируются таском gulp.task (imagemin) в gulpfile.js, читаем подробно о тасках.
  5. Все шрифты проекта в папке fonts.
  6. Файл .htaccess для правильной оптимизации сайта, который лежит в корне сайта, перед сборкой его нужно переименовать и поставить точку вначале.

Проверим в браузере собранный проект.

Собираем проект gulp build

Скрипт gulp build.

Выгружаем оптимизированный проект на хостинг deploy.

  • В поле host пишем имя домена.
  • Указываем пароль и логин.

Выгружается все содержимое папки dist на хостинг по пути к рабочей папке pipe (conn.dest (/path/to/folder/on/server)).

Комментариев нет