Недавно выпущенный Foundation 6 предоставляет вам множество способов и инструментов для его использования. Вы можете загрузить статические файлы или использовать специальное настольное приложение для Mac для Yeti Launch (скоро будет версия для Windows).
Менее известной функцией является набор инструментов командной строки, доступных в Foundation 6, и об этом я расскажу в этой статье. Foundation 6 является действительно гибкой интерфейсной средой, которая, помимо многих очевидных функций CSS и плагинов JavaScript, также имеет отличные инструменты для разработчиков.
Когда я могу использовать инструменты CLI Foundation?
Вы, вероятно, спрашиваете, почему вы должны беспокоиться об инструментах CLI, когда у вас есть доступ к статическим файлам JavaScript и CSS, что прекрасно работает. Вам, вероятно, нужны стандартные структуры и простой в использовании рабочий процесс, и это нормально.
Я уверен, что вы можете достичь своих целей таким образом, но я знаю, что есть много разработчиков, которые хотят получить больший контроль над процессом сборки. Это будет включать компиляцию SCSS, конкатенацию, минимизацию, оптимизацию изображений и шаблоны. Я предпочитаю иметь доступ к этим дополнительным инструментам. И поэтому есть случаи, когда инструменты CLI могут быть лучшим вариантом.
Если вы регулярно работаете с командной строкой, но точно не знаете, что Foundation 6 может предложить в этой области, или вы не работаете с командной строкой и, возможно, хотите узнать что-то новое, то эта статья для вас.
Вверх и работает
Для начала есть некоторые предпосылки. Вам необходимо установить NodeJS, а также инструмент npm, который должен быть установлен вместе с NodeJS. Вам также нужны Git , Gulp и Bower , все, что будет использовать наш foundation-cli . Вы можете установить их, выполнив следующую команду:
$ npm install --global gulp bower
В некоторых системах вам понадобится доступ суперпользователя, особенно при глобальной установке npm, поэтому вам может потребоваться использовать sudo перед командами, описанными в этом посте.
Установка foundation-cli
Если у вас уже есть CLI Foundation 5 на вашем компьютере, вы сможете получить доступ только к одной из команд, в зависимости от конфигурации среды командной строки. Поэтому лучше сначала удалить старые инструменты. Вы можете сделать это с помощью следующих команд:
$ gem uninstall foundation $ npm uninstall --global foundation-cli
Затем установите новые инструменты CLI:
$ npm install --global foundation-cli
Вы можете прочитать больше об установке в документации Фонда .
Если вы не хотите устанавливать foundation-cli в своей системе и ранее устанавливали Gulp и Bower, вы можете просто клонировать репозиторий с шаблоном Foundation, а затем вместо использования команды foundation вы можете использовать gulp и команды npm . Все должно работать так же, как и при использовании foundation-cli .
Что дает мне Фонд CLI?
Как уже упоминалось, Foundation CLI использует Gulp и Bower под капотом. Что такое Гулп и Бауэр? Gulp — это инструментарий, который поможет вам автоматизировать болезненные или трудоемкие задачи в процессе разработки. Здесь мы можем подумать о компиляции, минимизации, конкатенации SCSS, а также о сжатии изображений или других полезных задачах. Bower — это менеджер пакетов для Интернета, который позволяет загружать и устанавливать интерфейсные библиотеки через командную строку. Например, установка jQuery выполняется одной строкой: bower install jquery .
Foundation CLI загружает и устанавливает пустые шаблоны для любой из трех платформ Foundation: сайтов, приложений и электронной почты. Все эти шаблоны готовы к работе с Gulp и Bower, с предварительно сконфигурированными задачами Gulp и источниками установки Bower. Это похоже на такой инструмент, как Yeoman .
Использование Foundation CLI
Когда вы установили foundation-cli , вы можете начать использовать его, выполнив:
$ foundation new --framework sites --template zurb
Как видите, в качестве названия мы используем foundation а не foundation-cli . Кроме того, мы только взглянем на расширенный шаблон Foundation for Sites zurb . Нам нужно использовать флаг --framework чтобы выбрать подходящую структуру, а также флаг --template чтобы выбрать подходящий шаблон. Вы также можете выбрать basic шаблон, но я думаю, что расширенный гораздо лучше, если вы хотите присмотреться.
После установки у вас должна быть папка проекта с именем, которое вы указали во время установки. Кроме того, все зависимости должны быть установлены там. Все, что вам нужно сделать сейчас, это cd в недавно созданный проект и внутри папки, которую вы можете запустить:
$ foundation watch
Здесь приходит волшебство! Это запускает задачи сборки и сервера Gulp, а также команду watch . Это означает, что он запускает все настроенные задачи Gulp, которые вы сможете увидеть в коде. Поэтому, когда вы запустите эту команду, вы должны увидеть некоторую информацию в консоли. Наиболее важными на данный момент являются:
------------------------------------ Local: http://localhost:8000 External: [... your external IP here ...] ----------------------------------------------- UI: http://localhost:3001 UI External: [... your external IP here ...] ----------------------------------------------- [BS] Serving files from: dist
Здесь у вас есть информация о ваших работающих серверах. Первое — это ваше собственное приложение, и у вас также есть сервер пользовательского интерфейса для тестирования BrowserSync (мы скоро поговорим об этом). Вы можете видеть, что файлы вашего приложения обслуживаются из каталога dist и вы можете зайти на http://localhost:8000 в вашем браузере и увидеть стандартный начальный шаблон Foundation 6.
Взгляд на то, что внутри
Я думаю, что это самая захватывающая часть, но мы должны были пройти весь процесс установки, прежде чем перейти к этой точке.
Структура папок, Gulpfile.js, JavaScript / CSS активы
Давайте посмотрим на структуру папок вновь созданного проекта. Самые важные папки — это src и dist . Ваша работа по разработке будет проводиться в основном в папке src а все ваши рабочие файлы будут подготовлены в папке dist . Запускаемый вами сервер также обслуживает файлы из этой папки. Это означает, что вы можете подготовить свое рабочее пространство так, как вам хочется, но в итоге готовые к работе файлы окажутся в папке dist и это то, что вы хотите использовать в качестве готового продукта.
Итак, как это возможно? Давайте посмотрим на наш самый важный файл здесь — gulpfile.js . Если вы не знакомы с Gulp, вы можете проверить это вводное руководство . Gulp не так страшен, как кажется в начале, но это важно, потому что это место, где происходит вся магия.
Gulp основан на многих плагинах Gulp, которые добавляют дополнительную функциональность через простые пакеты npm. В этом новом проекте Foundation они определены в package.json . Они также загружаются и устанавливаются автоматически при запуске foundation new (как указано выше), поэтому вам не нужно об этом беспокоиться.
Открыв файл Gulp, вы увидите, что каждая задача, такая как очистка, копирование, sass и JavaScript, определяется аналогичным образом с помощью специального плагина Gulp, который отвечает за эту конкретную часть задания. Кроме того, как вы можете видеть в нижней части файла, есть основные задачи, такие как «сборка» или «по умолчанию», которые объединяют другие. Фундамент фундамента настроен, поэтому вам в принципе ничего не нужно делать. Конечно, вы можете настроить его так, как вам хочется.
С этим типом конфигурации вы можете записать свой scss в папку src/assets/scss , и вы можете записать свои файлы JavaScript в папку src/assets/js . Вы также можете поместить свои изображения в папку src/assets/img . Когда вы запустите foundation watch или foundation build , все эти файлы будут скопированы в папку dist . В зависимости от параметров они могут быть сжаты или изображения могут быть оптимизированы. Это все настроено в gulpfile.js .
Конфигурация Gulp и ее плагины — тема для другой статьи. Давайте теперь посмотрим на файлы .html и создадим расширенные макеты и связи с Panini.
Панини и шаблоны руля
Panini — удивительный и простой инструмент, созданный командой Фонда. С помощью Panini вы можете создавать страницы с согласованными макетами и частями повторного использования.
В папке dist вас есть готовые статические файлы HTML. Конечно, если у вас есть только один файл, все действительно просто. Проблемы могут возникнуть, если вы хотите создать много файлов HTML, которые имеют несколько идентичных частей. Это может быть нижний колонтитул, боковая панель, заголовок или многие другие элементы, которые называются частичными .
Без Panini вам нужно будет скопировать весь этот повторяющийся код в каждый файл HTML, и, если необходимо внести изменения, вам придется либо сделать это вручную в каждом файле, либо выполнить поиск и замену в текстовом редакторе. С Panini вы можете делать все это в одном месте во время редактирования, и все файлы будут отредактированы и скопированы в папку dist .
Также важно то, что Panini — это библиотека шаблонов Handlebars . Он также может компилировать Markdown в ваши HTML-файлы. Более подробную информацию о Панини можно найти в документах Фонда .
Давайте посмотрим на структуру папок шаблонов Panini в проекте. Нам нужно открыть папку src . Здесь у нас есть data , layouts , pages и partials . Как вы можете ожидать, в папке layouts мы можем написать наши основные компоновщики. Здесь мы можем определить верхний и нижний колонтитулы, которые будут повторяться на всех страницах.
Если вы хотите использовать только один макет, вы можете просто назвать файл default.html . Подобный демонстрационный файл вы найдете в нашем проекте. Если вы хотите использовать более одного макета, вы можете создать больше файлов со специальными тегами body {{> body}} (см. Пример default.html), и вам потребуется использовать специальные маркеры на своих страницах, чтобы сообщить компилятору, какой макет страница должна использовать. Он называется Front Matter и выглядит так:
--- layout: my-custom-layout ---
Эти маркеры должны быть размещены в верхней части содержимого файла подкачки. Это только для страниц, которые будут использовать этот макет, все остальные будут использовать по умолчанию.
Давайте посмотрим на папку pages . В этой папке вы найдете файл index.html , который является демонстрационной страницей контента. Как видите, у него нет тегов html или body . Это потому, что это просто содержимое, которое будет вставлено в ранее обсужденный макет default.html .
Конечно, вы можете добавить похожие страницы, но некоторые могут использовать разные макеты.
Если вам нужны небольшие, многократно используемые элементы HTML, вы можете создать их в папке partials . В демонстрационном проекте, который мы создали, нет файлов, но это действительно просто. Просто создайте файл с фрагментом HTML и назовите этот файл как хотите. Затем в файлах макета или файлах страниц вы можете импортировать этот фрагмент, включив его с помощью чего-то вроде: {{> my-partial-file}} (обратите внимание, что расширение файла отсутствует) Вот и все. Все будет подключено, скомпилировано и скопировано в папку dist .
Также есть папка с именем data . Здесь вы можете предоставить некоторые данные в формате файлов .json или .yml . Например, предположим, у меня есть файл myList.json в папке data со следующим содержимым:
{ items: ["item 1", "item 2", "item 3"] }
На странице макета или частичных HTML-файлах я могу использовать что-то вроде:
<ul> {{#each myList.items}} <li class="item-name">{{this}}</li> {{/each}} </ul>
Это позволяет перебирать данные JSON и генерировать HTML. То, что мы должны получить, это список элементов с именами из массива.
Как видите, Panini — действительно полезный инструмент, когда вы хотите создавать сложные HTML-структуры и не хотите повторяться.
BrowserSync: синхронизированное тестирование браузера и прямая перезагрузка
Последняя предварительно настроенная функция инструмента CLI Foundation, которую я обсуждаю, — BrowserSync . Как вы, вероятно, знаете, работа с интерфейсом трудна, потому что вам нужно протестировать свой веб-сайт на многих устройствах и во многих разрешениях. Теперь представьте, что у вас есть большой стол с множеством разных устройств, подключенных к вашему сайту. Когда вы нажимаете что-то или прокручиваете страницу, все устройства будут делать то же самое. Это замечательно, потому что вы видите в реальном времени, что следует исправить, а что нет.
Наш созданный проект автоматически предоставляет ваш внешний IP-адрес (см. Выше). Вы можете взять его и вставить в разные браузеры устройств, чтобы подключиться к одному и тому же движку BrowserSync и начать тестирование.
BrowserSync также предоставляет живые изменения, поэтому, если вы сохраните что-то, оно появится в окне браузера без обновления страницы вручную. Он также появится на всех подключенных устройствах, и вы получите все это бесплатно с zurb шаблонов foundation-cli zurb и zurb без дополнительной работы. Насколько это круто?
Заключительные слова
Я лично считаю, что команда Zurb Foundation проделала отличную работу, предоставив отличные инструменты и инструменты для разработчиков. Это тоже важно. Не только некоторые готовые к использованию плагины и стили CSS. Работа с Foundation for Sites 6 — это отличный опыт. Только представьте, сколько работы вы можете выполнить с помощью инструментов CLI Foundation без программирования бэкэнда. Вы можете создавать статические сайты и блоги, и они тоже могут быть достаточно продвинутыми. Не говоря уже о том, что во многих случаях статичные блоги и сайты работают даже быстрее и лучше.
Я действительно призываю вас лучше взглянуть на Панини. Вы также можете найти некоторую документацию в readme пакета npm . Он может делать много удивительных вещей, которые я здесь не описал, таких как компиляция Markdown или пользовательские помощники. Вы можете прочитать о Gulp и познакомиться со всеми задачами Gulp, используемыми в шаблоне / проекте zurb сгенерированном инструментом foundation-cli .
Еще одна вещь — я не упомянул сжатые файлы CSS и JavaScript. Если вы используете команду foundation watch , у вас будут файлы CSS и JavaScript в папке dist, но они будут распакованы. Если вы хотите, чтобы в этой папке были готовые к работе файлы, просто запустите foundation build . Если вы хотите узнать больше о команде foundation , просто запустите команду foundation help . Когда придет время и вам нужно обновить ваши зависимости в проекте, вы можете запустить foundation update .
В общем, я надеюсь, что вы кое-что узнали здесь. Если у вас есть вопросы, дайте мне знать в комментариях или проверьте мой профиль для различных способов связаться со мной.