dexmor

Пример верстки на флексах с использованием gulp и less.⁠⁠

Разработку любого сайта следует начинать с настройки инструментов.

Рассмотрим инструменты и подготовим их к работе.

Все материалы я буду добавлять сюда: https://github.com/pikaweb

Для работы с репозиториями нам пригодится GitBash. Скачать его можно отсюда:

https://git-for-windows.github.io/

В качестве локального сервера я использую OpenServer:

http://open-server.ru/

Кроме того понадобится установить node.js

https://nodejs.org/en/

Перейдем к подготовке. Создаем каталог в \Ваш путь\OpenServer\domains\

Запускаем OpenServer. Входим в его настройки, вкладка «Домены» и добавляем домен для созданной ранее папке. Запускаем сервер.

Теперь сайт будет доступен при вводе в браузере http://domain-name/

Настраиваем git (если еще не настроен). Я предпочитаю bitbucket т.к. он предоставляет бесплатные приватные репозитории. Ниже ссылки на github и bitbucked и на материал по настройке подключения сразу к обоим:

github.com

bitbucket.org

https://gist.github.com/rosswd/e1afd2b0b0d515517eac

Переходим к созданию git репозитория.

https://help.github.com/articles/creating-a-new-repository/

Добавление проекта в репозиторий:

https://help.github.com/articles/adding-an-existing-project-...

Подробный tutorial по bitbucket:

https://www.atlassian.com/git/tutorials/learn-git-with-bitbu...

Настроив репозитории, перейдем к настройке gulp для проекта. Для начала его нужно установить (необходим установленный node.js). Перейдя в терминале (можно и gibush, можно любой удобный для вас) в каталог с сайтом, выполняем следующую команду:

npm init

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

npm install gulp --save-dev

--save-dev обозначает, что мы сохраним информацию об установке пакета в package.json. Это нужно, чтобы не хранить в репозитории подгружаемые npm файлы для установленных модулей. Все они содержатся в node_modules. Чтобы node_modules не отправлялись на git, создадим файл .gitignore со следующим содержимым:

.gitignore

node_modules

А теперь продолжим устанавливать модули для gulp:

Модуль gulp-concat для конкатенации файлов:

npm install gulp-concat --save-dev

Модуль gulp-less для построения css файлов на основе less. Про это чуть подробней при верстке проекта.

npm install gulp-less --save-dev

Для less еще пригодятся less-plugin-clean-css (пост обработка и сжатие less файла) и less-plugin-autoprefix (автоматическое добавление вендорных префиксов, согласно базе данных caniuse.com)

npm install less-plugin-clean-css --save-dev

npm install less-plugin-autoprefix --save-dev

Для сжатия css файлов добавим gulp-minify-css

npm install gulp-minify-css --save-dev

Часть css я встраиваю в html, поэтому добавим gulp-inline-source

npm install gulp-inline-source --save-dev

Для удаления комментариев из html файла понадобится.

npm install --save-dev gulp-remove-html-comments

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

npm install gulp-htmlclean --save-dev

Для слайдера я воспользуюсь http://kenwheeler.github.io/slick/

Для него требуется jquery

npm install slick-carousel –save-dev

npm install jquery --save-dev

Для верстки еще полезно подключить normalize.css или reset.css. Я обычно использую normalize.

npm install normalize.css --save-dev

Почитать про него можно тут:

https://htmlacademy.ru/blog/64-about-normalize-css

Продумаем общую структуру проекта

index.html

assets/

--less/

--fonts/

--img/

--js/

public/

--index.html

--css/

----build.css

--fonts/

--js/

----build.js

--img/

Где в public будет собираться проект.

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

var gulp = require('gulp')

//load plugins

var less = require('gulp-less');

var minifyCSS = require('gulp-minify-css');

var inlinesource = require('gulp-inline-source');

var LessPluginCleanCSS = require('less-plugin-clean-css'),

LessPluginAutoPrefix = require('less-plugin-autoprefix'),

cleancss = new LessPluginCleanCSS({ advanced: true }),

autoprefix= new LessPluginAutoPrefix({ browsers: ["last 2 versions"] });

var htmlclean = require('gulp-htmlclean');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

//generate css from less ( + slick less files + slick files).

gulp.task('less-to-css', function() {

gulp.src(['node_modules/slick-carousel/slick/ajax-loader.gif'])

.pipe(gulp.dest('./public/css/'));

gulp.src(['node_modules/slick-carousel/slick/fonts/*'])

.pipe(gulp.dest('./public/css/fonts/'));

return gulp.src(['./assets/less/*.less', 'node_modules/slick-carousel/slick/slick.less', 'node_modules/slick-carousel/slick/slick-theme.less'])

.pipe(less({

plugins: [autoprefix, cleancss]

}))

.pipe(concat('build.css'))

.pipe(minifyCSS())

.pipe(gulp.dest('./public/css'));

});

//minify fonts

gulp.src('./assets/fonts/*.css')

.pipe(minifyCSS())

.pipe(gulp.dest('./public/fonts/'));

//move images to public

gulp.src(['./assets/img/*']).pipe(gulp.dest('./public/img/'));

gulp.src(['./assets/img/**/*']).pipe(gulp.dest('./public/img/'));

//inline link, script and img in index.html . Clean html.

gulp.task('index', function () {

var options = {

compress: true

};

return gulp.src('./index.html')

.pipe(htmlclean())

.pipe(inlinesource(options))

.pipe(gulp.dest('./public/'));

});

/* making build.js */

gulp.task('slickJs', function(){

return gulp.src(['node_modules/jquery/dist/jquery.min.js','node_modules/slick-carousel/slick/slick.min.js', 'assets/js/*.js'])

.pipe(concat('build.js'))

.pipe(uglify())

.pipe(gulp.dest('./public/js/'));

});

gulp.watch('./assets/less/*.less', ['less-to-css']);

gulp.watch('./index.html', ['index']);

gulp.task('default', ['less-to-css','index', 'slickJs']);

Запуск gulp осуществляется из консоли. Открыв консоль в каталоге с проектом и введя gulp, мы запустим выполнения задачи default, которая в свою очередь выполнит задачи 'less-to-css','index', 'slickJs'. За счет gulp.watch, после любого изменения less файлов или index.html файла будет выполняться соответствующая задача.

Верстка

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

Ссылка на макет:

http://www.bestpsdfreebies.com/freebie/fudi-landing-page-psd...

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

Обычно первым делом я формирую общую схему разметки. Получается нечто подобное:

В дальнейшем в разметке я буду придерживаться BEM методологии. Почитать про неё можно здесь:

https://ru.bem.info/methodology/key-concepts/

Далее согласно этой методологии размечаю всю страницу.

Оптимизация загрузки шрифтов.

К данному макету шрифты шли в каталоге /fonts.

Для оптимизации работы со шрифтами воспользуемся fontsquirrel и возможностью хранить до 5мб места в localstorage. Подробней можно прочитать в переводах статей Adam Beres-Deak:

http://css-live.ru/articles-css/bystraya-zagruzka-veb-shrift...

https://htmlacademy.ru/blog/61-better-webfont-loading-with-l...

Верстал преимущественно флексами, про них можно почитать по ссылкам:

http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstv...

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://www.w3.org/TR/css-flexbox-1/

Ссылка на кросс-браузерный вариант реализации filter.

http://codepen.io/AmeliaBR/pen/xGuBr

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

https://github.com/pikaweb/pikaweb-first-demo

Посмотреть на результат в git pages:

https://pikaweb.github.io/pikaweb-first-demo/