Ми напевно можемо трохи заплутатися за допомогою наших інструментів побудови. На момент розміщення цього повідомлення дочірньою організацією інструментів побудови є Grunt. Є конкуренти, але Grunt є найпопулярнішим вже давно. Якщо ви абсолютно нові для Grunt, у мене є багато речей, про які я писав і писав сценарії про це:
- Grunt для людей, які думають, що речі, як Grunt, дивні і важкі
- # 130: Перші моменти з бурчанням
- # 134: Екскурсія по незавершеному майданчику, побудованому з Jekyll, Grunt, Sass, системою SVG та ін.
Навіть якщо ви ніколи не користувались Grunt, у цій трансляції ми майже починаємо все з нуля і все це починаємо. Ідея полягає в тому, що ми працюємо з найвищою “папкою, повною SVG”. Кожен файл.svg представляє графіку, яку ми хочемо використовувати на сайті. Ми хочемо перекласти все це в блок SVG defs, готовий до використання. Створені символи, інформація про доступність додана до найкращих наших автоматизованих можливостей тощо.
Як тільки ми запустимо Grunt і встановимо тут інструмент побудови, на якому ми зосереджені, grunt-svgstore, ми готові піти.
У нашій маленькій демонстраційній програмі Grunt налаштовано на те, щоб через Gruntfile.js переглядати нашу папку, повну SVG-файлів, і створити файл defs.svg, який ми помістили в папку Includes.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Підняття з цього місця включатиме використання плагіна “watch” для перегляду цієї папки SVG та автоматичного запуску цього завдання, коли будь-який із файлів змінюється (або додається або видаляється). Якщо ви використовуєте конструктор веб-сайтів, такий як Jekyll, ви можете навіть ініціювати jekyll buildпісля цього, щоб переконатися, що новий файл доступний на побудованому сайті.
Файли
- 18-project-example.zip