Фонд - Стартовые проекты
Вы можете начать разработку проекта с нескольких доступных шаблонов, которые можно установить через Yeti Launch илиFoundation CLI. Вы можете начать с нового проекта, используя эти шаблоны, используя систему сборки Gulp для обработки Sass, JavaScript, копирования файлов и т. Д.
Базовый шаблон
Базовый шаблон - это что-то вроде шаблона SASS, который включает плоскую структуру каталогов и компилирует только файлы SASS, и хорошо иметь этот простой шаблон при использовании только SASS. Вы можете использовать базовый шаблон, используя Yeti Launch или Foundation CLI, используя следующую команду -
$ foundation new --framework sites --template basicЧтобы настроить это, сначала запустите npm install , bower install и используйте команду npm start для его запуска. Вы также можете скачать файлы шаблонов с Github .
ZURB шаблон
Это комбинация CSS / SCSS, JavaScript, шаблона Handlebars, структуры разметки, сжатия изображений и использования обработки SASS. Вы можете использовать шаблон ZURB с помощью Yeti Launch или с помощью Foundation CLI, используя следующую команду -
$ foundation new --framework sites --template zurbЧтобы запустить этот шаблон, выполните те же действия, что и в базовом шаблоне. Вы также можете скачать файлы шаблонов с Github .
Копирование активов
Вы можете скопировать содержимое в папку src / assets с помощью Gulp, в которой активы будут папкой вашего проекта. Здесь важно отметить, что файлы SASS, файлы JavaScript и изображения не подпадают под этот процесс копирования ресурсов, так как у них будет свой собственный процесс копирования содержимого.
Компиляция страницы
Вы можете создавать HTML-страницы в трех папках, а именно страницах , макетах и частичных файлах, которые находятся в каталоге src / . Вы можете использовать компилятор плоских файлов Panini, который создает макеты для страниц с использованием шаблонов, страниц, частей HTML. Этот процесс можно выполнить с помощью языка шаблонов Handlebars .
Компиляция SASS
Вы можете скомпилировать SASS в CSS с помощью Libsass, и основной файл SASS будет храниться в src / assets / scss / app.scss, а также вновь созданные части SASS будут храниться в самой этой папке. Вывод CSS будет похож на обычный CSS во вложенном стиле. Вы можете сжать CSS с помощью clean-css и удалить неиспользуемый CSS из таблицы стилей с помощью UnCSS .
Компиляция JavaScript
Файлы JavaScript будут храниться в папке src / assets / js вместе с Foundation, а все зависимости связаны вместе в файле app.js. Файлы будут связаны вместе, как указано в следующем порядке -
- Зависимости от основания.
- Файлы будут храниться в папке src / assets / js .
- Файлы сгруппированы в один файл с именем app.js .
Сжатие изображения
По умолчанию все изображения будут храниться в папке assets / img в папке dist . Вы можете сжимать изображения во время сборки для производства с помощью gulp-imagemin, который поддерживает файлы JPEG, PNG, SVG и GIF.
BrowserSync
Вы можете создать сервер BrowserSync, который будет синхронизировать тестирование браузера, доступный по адресуhttp://localhost:8000и может видеть скомпилированные шаблоны, используя этот URL. Пока ваш сервер работает, страница обновляется автоматически, когда вы сохраняете файл, и вы можете видеть изменения, внесенные на страницу, в режиме реального времени во время работы.