• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

vaban-ru/gulp-template: Шаблон для верстки. Использует ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

vaban-ru/gulp-template

开源软件地址(OpenSource Url):

https://github.com/vaban-ru/gulp-template

开源编程语言(OpenSource Language):

JavaScript 54.1%

开源软件介绍(OpenSource Introduction):

Сборка для верстки

alt text

Подготовка к работе

  1. git clone [email protected]:webzlodimir/gulp-template.git
  2. cd gulp-template
  3. yarn install
  4. 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 спрайта которые автоматически сгенерируется в папке img
    • js — директория для 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 Reloading
  • yarn build запускает сборку и на выходе получаем собранные, но не минифицированные файлы app.js и app.css для последующей передачи программистам

PostHTML

Для расстановки правильных переносов используется плагин 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 - текущий индекс элемента, начинается с 0
  • loop.remaining - количество оставшихся до конца итераций
  • loop.first - булевый указатель, что элемент первый
  • loop.last - булевый указатель, что элемент последний
  • loop.length - количество элементов



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap