git clone git@github.com:webzlodimir/gulp-template.git
cd gulp-template
yarn install
yarn start
gulp-template
├── src
│ ├── css
│ ├── fonts
│ ├── img
│ ├── svg
│ ├── js
│ ├── sass
│ ├── public
│ ├── templates
│ └── pages
├── package.json
├── README.md
├── gulpfile.js
├── .babelrc
├── .browserslistrc
├── .prettierrc
├── .prettierignore
└── .gitignore
-
Корень проекта:
.babelrc
— настройки Babel.prettierrc
— настройки Prettier.prettierignore
— запрет изменения файлов Prettier.gitignore
– запрет на отслеживание файлов Git'омpackage.json
— список зависимостейREADME.md
— описание проектаgulpfile.js
— файл конфигурации Gulp.browserslistrc
— файл конфигурации поддерживаемых версий браузеров
-
Папка
src
- используется во время разработки:css
— директория для файлов css библиотек, изначально тут лежит файл сброса стилейfonts
– директория для шрифтовimg
— директория для изображенийsvg
— папка для SVG файлов, для последующей генерации SVG спрайта которые автоматически сгенерируется в папке imgjs
— директория для js библиотек. Здесь лежит:app.js
для кастомного кода;ofi.min.js
- полифил для CSS-свойстваobject-fit
;lazysizes.min.js
- библиотека для lazy-load изображений;imask.min.js
- библиотека маски.
sass
— директория для sass файловpublic
— директория для пользовательских файлов, все файлы из неё будут скопированы в корень собранного проектаtemplates
— директория для html файлов которые добавляются в проектеpages
— директория для html страниц
Изначально есть пара полезных вещей:
- В сборке установлена автоматическая генерация SVG спрайта, для этого необходимо добавить файлы в папку src/svg, после чего в папке dist/img сгенерируется спрайт с именем sprite.svg. В нём каждый SVG файл будет иметь айдишник равный названию самого файла.
@include font-face("FuturaPT", "/fonts/FuturaPT-Book", 300);
- позволяет подключать шрифты в 1 строку.@include object-fit(cover)
- используется для полифила CSS-свойства object-fit- На тег
html
автоматически вешается классis-mac
илиis-ios
для определения устройства
Команды для сборки:
yarn start
запускает сборку и локальный сервер с Hot Reloadingyarn build
запускает сборку и на выходе получаем собранные, но не минифицированные файлы app.js и app.css для последующей передачи программистам
Для расстановки правильных переносов используется плагин PostHTML Richtypo. Для блока в котором вы хотите отформатировать текст необходимо указать атрибут data-typo
:
<p data-typo>Тут текст</p>
Для шаблонизации в проекте используется Gulp PostHTML с плагинами PostHTML Include и PostHTML Expressions
Что бы просто вставить один файл в другой используется конструкция <include>
, пример кода:
<include src="src/templates/header.html"></include>
Для того что бы извне передать в вставляемый файл какие либо данные необходимо использовать директиву locals
, и передать туда данные в виде JSON объекта, пример кода:
<include src="src/templates/head.html" locals='{"title": "Главная страница"}'></include>
Внутри любого файла можно использовать разные условия, пример кода:
<if condition="foo === 'bar'">
<p>Foo really is bar! Revolutionary!</p>
</if>
<elseif condition="foo === 'wow'">
<p>Foo is wow, oh man.</p>
</elseif>
<else>
<p>Foo is probably just foo in the end.</p>
</else>
Так же можно использовать конструкцию switch/case
, пример кода:
<switch expression="foo">
<case n="'bar'">
<p>Foo really is bar! Revolutionary!</p>
</case>
<case n="'wow'">
<p>Foo is wow, oh man.</p>
</case>
<default>
<p>Foo is probably just foo in the end.</p>
</default>
</switch>
В любом файле так же можно перебирать данные (массивы или объекты) с помощью цикла, пример кода:
<each loop="item, index in array">
<p>{{ index }}: {{ item }}</p>
</each>
<each loop="value, key in anObject">
<p>{{ key }}: {{ value }}</p>
</each>
Так же не обязательно передавать данные через переменную, их просто можно написать в цикл, пример кода:
<each loop="item in [1,2,3]">
<p>{{ item }}</p>
</each>
В цикле вы можете использовать уже готовые переменные для выборки определенных элементов:
loop.index
- текущий индекс элемента, начинается с 0loop.remaining
- количество оставшихся до конца итерацийloop.first
- булевый указатель, что элемент первыйloop.last
- булевый указатель, что элемент последнийloop.length
- количество элементов