18: Инструмент сборки - Grunt svgstore - CSS-хитрости

Мы определенно можем стать немного более ботанистыми с нашими инструментами сборки. На момент публикации этого постера дочерним элементом инструментов сборки был Grunt. Есть конкуренты, но Grunt долгое время был самым популярным. Если вы новичок в Grunt, у меня есть множество вещей, которые я написал и снял по этому поводу:

Grunt для людей, которые думают, что такие вещи, как Grunt, странные и трудные
# 130: Первые моменты с Grunt
# 134: Знакомство с незавершенным сайтом, созданным с помощью Jekyll, Grunt, Sass, системы SVG и многого другого

Даже если вы никогда не использовали Grunt, в этом скринкасте мы в значительной степени начнем с нуля и все начнем. Идея заключается в том, что мы работаем с типичной «папкой, полной SVG». Каждый файл file.svg представляет собой графику, которую мы хотим использовать на сайте. Мы хотим сжать все это в готовом к использованию блоке SVG defs. Созданы символы, добавлена информация о доступности в меру наших автоматизированных возможностей и т. Д.

Как только мы запустим Grunt и установим инструмент сборки, на котором мы сосредоточены здесь, grunt-svgstore, все готово.

В нашей небольшой демонстрации мы настроили Grunt, чтобы через Gruntfile.js просматривать нашу папку, полную SVG, и создавать файл defs.svg, который мы помещаем в папку include.

module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );

Повышение уровня отсюда будет включать использование плагина «слежения» для просмотра этой папки SVG и автоматического запуска этой задачи при изменении (или добавлении или удалении) любого из файлов. Если вы используете конструктор сайтов, такой как Jekyll, вы можете даже запустить его jekyll buildпозже, чтобы убедиться, что новый файл доступен на созданном сайте.