Less

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...


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


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



<title>Fudi</title>



В дальнейшем в разметке я буду придерживаться 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/


Чтобы отправить каталог public В новую ветвь для git pages следует выполнить следующую команду:


git subtree push --prefix public origin gh-pages


Если у кого-нибудь будут проекты, которые вы хотите выложить в репозиторий сообщества – пишите. Создам репозиторий и поделюсь доступом.