sergeevizh / temp_gulp_html

шаблон для быстрого старта одностраничного сайта

Стартовый шаблон для верстки простых html сайтов

протестировано в Windows10

Добавлено:

• обновлены все gulp зависимости
• таск gulp prodaction для подготовки проекта на продакшн:
  • сжимает и конкатенирует css и js файлы;
  • сжимает фото;
  • автоматически встраивает стили из header.min.css в шапку файлов .html;

---

Шаблон использует препроцессор Stylus для стилей. Файлы .styl обрабатываются библиотекой "Nib", автоматически добавляя вендорные префиксы.

Шаблон строится на основе шаблона "html5boilerplate"

Собирается с использованием таск менеджера gulp четвертой версии

Вы можете писать на ES6, так как gulp обрабатывает js файлы библиотекой babel

---

• для работы у вас должен быть установлен node.js (скачайте и установите, если не установлен) и Git

• склонируйте репозиторий и перейдите в папку проекта. Вызовите в ней командную строку (на win: shift + пр. кнопка мыши - Открыть окно команд)

• работать будем с галпом 4, по этому если у вас установлен галп версии ниже 4, его нужно удалить

  $ npm uninstall -g gulp

• и установить gulp 4 глобально

  $ npm install -g git+https://[email protected]/gulpjs/gulp.git#4.0

• далее установим зависимости из package.json (тут же установится и сам галп 4 в проект). Для этого в коммандной строке запустить

  $ npm i

• теперь установим bower

  $ npm install -g bower

• далее установим bower библиотеки (Вы можете выбрать нужные вам библиотеки в файле bower.json, а остальные удалить)

  $ bower i

• ну и запустим gulp одноименной командой

  $ gulp

gulp запустит browser-sync, который будет перезагружать страницу при сохранении. В консоль вы получите ссылку, которую можно открыть на любом устройстве, подключенном к вашей сети wifi и тогда страница будет автоматически перезагружаться и на устройстве

---

Теперь структура проекта выглаядит так:

app - папка разработчкика. тут хранятся все файлы проекта

dist - папка с готовым проектом

node_modules - сюда устанавливаются все gulp плагины

.bowerrc - здесь указана директория, в которую bower будет устанавливать плагины

bower.json - все bower плагины, которые нужно установить. Подключать мы их будем в файле gulpfile.js, но если вам, какой то из плагинов не нужен, просто удалите его из списка

gulpfile.js - файл с инструкциями для gulp. Самые интересные моменты прокомментированы в самом файле. Но все же рассмотрим его:

• сначала подключаются все зависимости, которые мы установили в node_modules

• далее идут сами задачи для gulp

• styles - берет файлы main.styl, header.styl и fonts.styl обрабатывает библиотекой Nib (добавляет автопрефиксы и тд), cssnano сжимает эти файлы, rename добавляет к имени приставку .min, создается sourcemaps, а если при написании стилей вы делаете ошибку, plumber тут же просигнализирует об этом. Далее готовые файлы в формате css кладутся в папку dist/css

• assets - берет все файлы и папки из app/assets/ и копирует в папку dist. При чем gulp не будет каждый раз копировать все заново, а возьмет только те файлы, которые били изменены. И сложит их сюблюдая структуру вложенности (из какой папки взял, в такую и положил)

• js - обрабатывает файл common.js библиотекой babel (если вы пишете на ES6), сжимает и кладет в dist/js

• libs - сюда вы подключаете все пакеты, которые установили через bower. Далее они конкатенируются в файл libs.js, сжимаются, добавляется приставка .min и кладется в dist/js

• default - стартовая точка, отсюда происходит запуск gulp. Запускается build, он запускает styles, assets, js и libs. Далее запускается watch, который следит за файлами проекта и если вы что то редактируете, тут же запускает задачу, которая обработает эти изменения. И запускается browser-sync, который открывает сайт в браузере и при сохранении файлов, перезагружает страницу в браузере

package.json - список зависимостей, необходимых для работы gulp

---

Теперь рассмотрим отдельные файлы.

index.html - если вы не хотите использовать бутстрап сетку, то удалите <style> ...... </style> под комментарием

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

В header.styl вы пишете те стили, которые относятся к первому экрану, то есть той области, которую пользователь увидит зайдя на ваш сайт. Все остальные стили вы пишете в main.styl.

Когда проект готов на продакшн, вы просто останавливаете работу gulp (если она запущена в консоли), это делается сочетанием ctrl + C затем Y и enter. И запускаем команду:

$ gulp prodaction