18: Narzędzie do budowania - Grunt svgstore - CSS-Tricks

Z pewnością możemy stać się trochę bardziej nerdowsi dzięki naszym narzędziom do kompilacji. W momencie publikowania tego plakatu podrzędnym narzędziem do budowania jest Grunt. Są konkurenci, ale Grunt od dłuższego czasu jest najpopularniejszy. Jeśli jesteś nowicjuszem w Grunt, mam wiele rzeczy, które napisałem i opublikowałem na ten temat:

Grunt dla ludzi, którzy myślą, że rzeczy takie jak Grunt są dziwne i trudne
# 130: Pierwsze chwile z Gruntem
# 134: Wycieczka po witrynie w toku zbudowanej przy użyciu Jekyll, Grunt, Sass, systemu SVG i nie tylko

Nawet jeśli nigdy nie używałeś Grunt, w tym screencastie zaczynamy od zera i wszystko idziemy. Chodzi o to, że pracujemy z kwintesencją „folderu pełnego SVG”. Każdy plik.svg przedstawia jakąś grafikę, której chcemy użyć na stronie. Chcemy zgnieść to wszystko do bloku SVG Defs, który jest gotowy do użycia. Stworzone symbole, dodane informacje o dostępności w najlepszy możliwy sposób, itp.

Kiedy już uruchomimy Grunt i zainstalujemy narzędzie do budowania, na którym się tutaj skupiamy, grunt-svgstore, możemy zaczynać.

W naszym małym demo skonfigurowaliśmy Grunta tak, aby za pośrednictwem Gruntfile.js przeglądał nasz folder pełen SVG i tworzył plik defs.svg, który umieściliśmy w folderze include.

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

Awansowanie od tego miejsca obejmowałoby użycie wtyczki „obserwuj” do oglądania tego folderu plików SVG i automatycznego uruchamiania tego zadania, gdy którykolwiek z plików ulegnie zmianie (lub zostanie dodany lub usunięty). Jeśli używasz narzędzia do tworzenia witryn, takiego jak Jekyll, możesz nawet uruchomić jekyll buildpóźniej, aby upewnić się, że nowy plik jest dostępny w zbudowanej witrynie.