Разработку любого сайта следует начинать с настройки инструментов.
Рассмотрим инструменты и подготовим их к работе.
Все материалы я буду добавлять сюда: 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
Если у кого-нибудь будут проекты, которые вы хотите выложить в репозиторий сообщества – пишите. Создам репозиторий и поделюсь доступом.
