18: Инструмент за изграждане - Grunt svgstore - CSS-трикове

Определено можем да се поизнервим с нашите инструменти за изграждане. По време на публикуването на това, постерът на инструментите за изграждане е 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 файл, който поставяме в папка включва.

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след това, за да сте сигурни, че новият файл е достъпен в изградения сайт.