протестировано в 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