18: Alat Bangun - Grunt svgstore - Trik CSS

Kami pasti bisa menjadi sedikit lebih aneh dengan alat pembuatan kami. Pada saat posting ini, anak poster alat bangunan adalah Grunt. Ada pesaing, tetapi Grunt telah menjadi yang paling populer selama beberapa waktu. Jika Anda baru mengenal Grunt, saya memiliki berbagai hal yang telah saya tulis dan screencast tentangnya:

Grunt untuk Orang yang Berpikir Hal-Hal Seperti Grunt itu Aneh dan Keras
# 130: Momen Pertama dengan Grunt
# 134: Tur Situs yang Sedang Berlangsung, Dibangun dengan Jekyll, Grunt, Sass, Sistem SVG, dan Lainnya

Bahkan jika Anda belum pernah menggunakan Grunt, dalam screencast ini kami memulai dari awal dan menjalankan semuanya. Idenya adalah kita bekerja dari "folder yang penuh dengan SVG" yang klasik. Setiap file.svg mewakili beberapa grafik yang ingin kami gunakan di situs. Kami ingin memadatkan semua itu menjadi blok defs SVG yang siap digunakan. Simbol dibuat, informasi aksesibilitas ditambahkan ke kemampuan otomatis terbaik kami, dll.

Setelah kami menjalankan Grunt, dan menginstal alat build yang kami fokuskan di sini, grunt-svgstore, kami siap melakukannya.

Dalam demo kecil kami, kami telah mengonfigurasi Grunt ke, melalui Gruntfile.js, untuk melihat folder kami yang penuh dengan SVG dan membuat file defs.svg yang kami masukkan ke dalam folder termasuk.

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

Naik level dari sini akan mencakup penggunaan plugin "tonton" untuk mengawasi folder SVG itu dan secara otomatis menjalankan tugas ini ketika ada file yang berubah (atau ditambahkan atau dihapus). Jika Anda menggunakan pembuat situs seperti Jekyll, Anda bahkan dapat memicu jekyll buildsetelahnya untuk memastikan file baru tersedia di situs yang dibangun.