Oluşturma araçlarımızla kesinlikle biraz daha sinirlenebiliriz. Bunu yayınladığında, yapı araçlarının poster çocuğu Grunt'tur. Rakipler var, ancak Grunt bir süredir en popüler olanıydı. Grunt'ta yeniyseniz, bunun hakkında yazdığım ve ekran video kaydım olan çeşitli şeyler var:
- Grunt gibi şeylerin tuhaf ve zor olduğunu düşünen insanlar için homurdanma
- # 130: Grunt ile İlk Anlar
- # 134: Jekyll, Grunt, Sass, SVG Sistemi ve Daha Fazlasıyla Oluşturulan Devam Eden Bir Site Turu
Grunt'ı hiç kullanmamış olsanız bile, bu ekran video kaydına hemen hemen sıfırdan başlıyoruz ve her şeyi devam ettiriyoruz. Buradaki fikir, özlü "SVG'lerle dolu klasörden" çalışmamızdır. Her file.svg, sitede kullanmak istediğimiz bazı grafikleri temsil eder. Tüm bunları kullanıma hazır bir SVG defs bloğuna sıkıştırmak istiyoruz. Oluşturulan semboller, otomatik yeteneğimizin en iyisine eklenen erişilebilirlik bilgileri vb.
Grunt'ı başlattıktan ve odaklandığımız inşa aracını yükledikten sonra, grunt-svgstore, gitmeye hazırız.
Küçük demomuzda Gruntfile.js aracılığıyla, SVG'lerle dolu klasörümüze bakmak ve bir include klasörüne koyduğumuz bir defs.svg dosyası oluşturmak için Grunt'ı yapılandırdık.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Buradan seviye atlamak, söz konusu SVG klasörünü izlemek için bir "izleme" eklentisi kullanmayı ve dosyalardan herhangi biri değiştiğinde (veya eklendiğinde veya silindiğinde) bu görevi otomatik olarak çalıştırmayı içerir. Jekyll gibi bir site oluşturucu kullanıyorsanız jekyll build, yeni dosyanın yerleşik sitede mevcut olduğundan emin olmak için sonradan bir tane bile tetikleyebilirsiniz .
Dosyalar
- 18- proje-example.zip