18: Εργαλείο κατασκευής - Grunt svgstore - CSS-Κόλπα

Σίγουρα μπορούμε να πάρουμε λίγο nerdier με τα εργαλεία κατασκευής μας. Τη στιγμή της δημοσίευσης αυτού, το παιδί αφισών των εργαλείων κατασκευής είναι Grunt. Υπάρχουν ανταγωνιστές, αλλά ο Grunt ήταν ο πιο δημοφιλής εδώ και αρκετό καιρό. Εάν είστε ολοκαίνουργιοι στο Grunt, έχω μια ποικιλία από πράγματα που έχω γράψει και διασκεδάσει:

Γκρινιάρισμα για ανθρώπους που πιστεύουν ότι πράγματα όπως το Grunt είναι περίεργα και σκληρά
# 130: Πρώτες στιγμές με γρύλισμα
# 134: Μια περιήγηση σε έναν ιστότοπο σε εξέλιξη που δημιουργήθηκε με Jekyll, Grunt, Sass, ένα σύστημα SVG και άλλα

Ακόμα κι αν δεν έχετε χρησιμοποιήσει ποτέ το Grunt, σε αυτό το σενάριο ξεκινάμε σχεδόν από το μηδέν και ξεκινάμε όλα αυτά. Η ιδέα είναι ότι εργαζόμαστε από τον βασικό φάκελο "γεμάτο SVGs". Κάθε αρχείο.svg αντιπροσωπεύει κάποιο γραφικό που θέλουμε να χρησιμοποιήσουμε στον ιστότοπο. Θέλουμε να τα συμπιέσουμε όλα σε ένα μπλοκ SVG defs που είναι έτοιμο για χρήση. Δημιουργήθηκαν σύμβολα, προστέθηκαν πληροφορίες προσβασιμότητας στις καλύτερες δυνατότητες της αυτοματοποιημένης μας δυνατότητας κ.λπ.

Μόλις ξεκινήσουμε το Grunt και εγκαταστήσουμε το εργαλείο κατασκευής στο οποίο εστιάζουμε εδώ, grunt-svgstore, είμαστε έτοιμοι.

Στο μικρό μας demo έχουμε ρυθμίσει το 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αργότερα για να βεβαιωθείτε ότι το νέο αρχείο είναι διαθέσιμο στον ενσωματωμένο ιστότοπο.