Создадим простую форму, добавим плагин часов и маску телефона, затем воспользуемся командой 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<section id="formz"> <div class="container"> <div class="row"> <div class="col-md-6"> <h2>Акция на покупку видеокарты</h2> <p>Купи видеокарту в течении 12 часов и получи игру подарок</p> </div> <div class="col-md-6"> <div class="your-clock"></div> <div class="message"></div> </div> </div> <div class="row"> <div class="col-md-4"> <form action="#"> <input id="name" name="name" type="text" required="required" placeholder="Ваше имя *" class="form-control form-npt"> </div> <div class="col-md-4"> <input id="phone" name="phone" type="text" required="required" placeholder="Ваш телефон *" class="form-control form-npt"> </div> <div class="col-md-4"> <button id="butn" type="submit">Купить видеокарту</button> </form> </div> </div> </div> </div> </section> |
Подключаем маску телефона и таймер.
- Маску телефона подключаем плагином masked input, подробно тут.
- Используем таймер FlipClock, потому что удобно стилизовать.
Код для активации работы плагинов в common.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function() { var clock = $('.your-clock').FlipClock({ autoStart : false, language:'ru-ru', callbacks :{ stop : function() { $(".message").html("время истекло"); } } }); clock.setTime(3611); //Устанавливаем нужное время в секундах clock.setCountdown(true); //Устанавливаем отсчет назад clock.start(); //Запускаем отсчет $("#phone").mask("(999) 999-9999"); }); |
Стили формы лендинг пейдж.
Стилизуем input имя и телефон по идентификатору #name.
Часы FlipClock, стилизуем с инспектором в браузере. Копируем все классы, которые хотим поменять в main.sass.
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
#formz margin-top: 30px #name input[name="name"] background-image: url("../img/name.png") background-repeat: no-repeat background-position-y: 10px background-position-x: 10px font-size: 1.4em padding: 20px 30px border: 3px solid #b641b0 opacity: .8 &:hover &:focus opacity: 1 #phone input[name="phone"] background-image: url("../img/phone.png") background-repeat: no-repeat background-position-y: 10px background-position-x: 10px font-size: 1.4em padding: 20px 30px border: 3px solid #b641b0 opacity: .8 &:hover &:focus opacity: 1 #butn border: 3px solid #b641b0 background-color: blue color: #b641b0 font-weight: bold width: 100% padding: 5px 20px text-transform: uppercase .flip-clock-divider .flip-clock-label position: absolute top: -1.5em right: -86px color: blue font-weight: bold text-shadow: none .flip-clock-dot top: 50px width: 15px height: 15px background-color: blue left: 2px .flip-clock-wrapper .flip box-shadow: 0px 0px 20px rgba(240, 142, 229, 0.96) -webkit-box-shadow: 0px 0px 20px rgba(240, 142, 229, 0.96) .flip-clock-wrapper ul width: 50px height: 70px .flip-clock-wrapper ul li line-height: 70px |
Собираем проект gulp build
Соберем проект в новые сжатые скрипты и стили.
Выгрузим результат в папку dist.
Функция build в файле gulpfile.js собирает сайт, очищает от лишнего и оставляет только нужное.
Выполним команду gulp build в командной строке.
После этой команды в корне проекта появится папка dist.
- В ней лежит index.html, файл сайта landing.
- Один файл скрипта scripts.min.js, который в себя включается все плагины.
- Файл стилей main.min.css. Включает стили проекта и стили плагинов.
- Папка с картинками img. Все изображения оптимизируются таском gulp.task (imagemin) в gulpfile.js, читаем подробно о тасках.
- Все шрифты проекта в папке fonts.
- Файл .htaccess для правильной оптимизации сайта, который лежит в корне сайта, перед сборкой его нужно переименовать и поставить точку вначале.
Проверим в браузере собранный проект.
Скрипт gulp build.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
gulp.task('build', ['removedist', 'imagemin', 'sass', 'js'], function() { var buildFiles = gulp.src([ 'app/*.html', 'app/.htaccess', ]).pipe(gulp.dest('dist')); var buildCss = gulp.src([ 'app/css/main.min.css', ]).pipe(gulp.dest('dist/css')); var buildJs = gulp.src([ 'app/js/scripts.min.js', ]).pipe(gulp.dest('dist/js')); var buildFonts = gulp.src([ 'app/fonts/**/*', ]).pipe(gulp.dest('dist/fonts')); }); |
Выгружаем оптимизированный проект на хостинг deploy.
- В поле host пишем имя домена.
- Указываем пароль и логин.
Выгружается все содержимое папки dist на хостинг по пути к рабочей папке pipe (conn.dest (/path/to/folder/on/server)).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
gulp.task('deploy', function() { var conn = ftp.create({ host: 'hostname.com', user: 'username', password: 'userpassword', parallel: 10, log: gutil.log }); var globs = [ 'dist/**', 'dist/.htaccess', ]; return gulp.src(globs, {buffer: false}) .pipe(conn.dest('/path/to/folder/on/server')); }); |