imitronov

imitronov

Кто я?

Веб разработчик. Работаю с WordPress, 1C-Bitrix, modX, OctoberCMS. Делаю обзоры онлайн сервисов и малоизвестных CMS.


О чем я пишу


Свежие записи

Rocket HTML

Готовый набор тасков для Gulp, предназначенный для быстрого создания оптимизированных HTML5 шаблонов

RocketHTML - это готовый набор тасков для Gulp, предназначенный для быстрого создания оптимизированных HTML5 шаблонов, направленных на получение максимальной оценки в Google PageSpeed Insights. Поддерживается Bower, SASS, сборка JS, минимизация JS, CSS и HTML.

Открыть на GitHub

Требования

В системе должны быть установлены:

  • Node.JS
  • Git
  • Gulp
  • Bower

Установка

  1. Скачайте файлы rocket-html в нужную папку:

    git clone https://github.com/imitronov/rocket-html.git
  2. Установите компоненты:

    npm i
  3. Запустите Gulp:

    gulp

Структура приложения

index.js - список скриптов, которые будут собираться в один JS файл
project_src/ - папка с исходными файлами проекта
project_src/assets/ - дополнительные файлы шаблона
project_src/assets/css/ - готовые файлы стилей
project_src/assets/js/ - готовые JavaScript файлы
project_src/assets/fonts/ - папка с файлами шрифтов (woff, woff2)
project_src/assets/img/ - папка с файлами изображений
project_src/assets/svg/ - папка с файлами svg иконок для иконочного шрифта
project_src/parts/templates/ - шаблонные части для сборки HTML страниц
project_src/parts/html/ - страницы HTML
project_src/parts/js/ - пользовательский JavaScript до сборки в готовый скрипт
project_src/parts/libs/ - библиотеки загруженные через Bower
production/ - папка с готовыми файлами шаблона

Набор task`ов в RocketHTML

  • gulp sass - сборка файлов стилей
  • gulp js - сборка JavaScript файла
  • gulp html - сборка файлов страницы
  • gulp fonts - генерация файла стилей с инлайновым подключением шрифтов, закодированных в base64
  • gulp default - запуск виртуального сервера с онлайн обновлением страниц в браузере, при изменении исходных файлов (т.н. LiveReload)
  • gulp build - полная сборка проекта в папку production/

Подключение библиотек

  • js скрипты подключаются в корневом файле index.js следующей строкой:
    @import "project_src/parts/libs/подключаемая библиотека/скрипт.js";
  • css файлы подключаются в файле project_src/parts/sass/_libs.sass следующей строкой:
    @import "project_src/parts/libs/подключаемая библиотека/имя файла без расширения css";