18: Build Tool - Grunt svgstore - Trik CSS

Kita pasti dapat sedikit nerdier dengan alat binaan kita. Pada masa memposting ini, anak poster alat binaan adalah Grunt. Terdapat pesaing, tetapi Grunt telah menjadi yang paling popular sejak sekian lama. Sekiranya anda baru mengenali Grunt, saya mempunyai pelbagai perkara yang telah saya tulis dan baca tentangnya:

Menggerutu bagi Orang Yang Berfikir Perkara Seperti Mengerut adalah Pelik dan Sukar
# 130: Detik Pertama dengan Rungutan
# 134: Lawatan ke Laman yang Sedang Dibangunkan dengan Jekyll, Grunt, Sass, Sistem SVG, dan Banyak Lagi

Walaupun anda tidak pernah menggunakan Grunt, dalam screencast ini kita bermula dari awal dan membuat semuanya berjalan lancar. Ideanya ialah kita bekerja dari "folder penuh penuh dengan SVG". Setiap file.svg mewakili beberapa grafik yang ingin kita gunakan di laman web ini. Kami mahu memasukkan semua itu ke blok defisit SVG yang sudah siap digunakan. Simbol dibuat, maklumat kebolehaksesan ditambahkan ke kemampuan automatik kami yang terbaik, dll.

Sebaik sahaja kita mendapatkan Grunt, dan memasang alat binaan yang kita fokuskan di sini, grunt-svgstore, kita sudah siap.

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

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

Menaikkan dari sini termasuk menggunakan plugin "menonton" untuk melihat folder SVG itu dan menjalankan tugas ini secara automatik apabila ada fail yang berubah (atau ditambahkan atau dihapus). Sekiranya anda menggunakan pembangun laman web seperti Jekyll, anda mungkin akan mencetuskannya jekyll buildselepas itu untuk memastikan fail baru tersedia di laman web yang dibina.