Kindlasti saame oma ehitustööriistadega veidi nohikamaks. Selle postitamise ajal on ehitustööriistade plakatilaps Grunt. Konkurente on, kuid Grunt on olnud juba mõnda aega kõige populaarsem. Kui olete Gruntis täiesti uus, on mul selle kohta kirjutatud ja ekraanile kantud mitmesuguseid asju:
- Grunt inimestele, kes arvavad, et sellised asjad nagu Grunt on imelikud ja rasked
- # 130: esimesed hetked koos Gruntiga
- # 134: Jekyll, Grunt, Sass, SVG-süsteemi ja palju muud ehitatud sait, mis on pooleli
Isegi kui te pole kunagi Grunti kasutanud, alustame selles ekraanilises plaanis üsna nullist ja saame selle kõik käima. Idee on selles, et me töötame põhilisest "kaustast, mis on täis SVG-sid". Iga file.svg tähistab mõnda graafikat, mida soovime saidil kasutada. Me tahame selle kõik jagada SVG defs-plokiks, mis on kasutamiseks valmis. Loodud sümbolid, juurdepääsetavusteave on lisatud meie parimatele võimalustele jne.
Kui oleme Grunti käima saanud ja installime siin ehitustööriista, millele keskendume, grunt-svgstore, meil on hea minna.
Meie väikeses demos oleme Grunt konfigureerinud Gruntfile.js kaudu vaatama meie SVG-sid täis kausta ja looma faili defs.svg, mille panime kausta kausta.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Siit kõrgemale tasemele kaasataks SVG-de kausta vaatamiseks pistikprogrammi "vaatamine" kasutamine ja selle toimingu käivitamine automaatselt, kui mõni fail muutub (või lisatakse või kustutatakse). Kui kasutate sellist saidi koostajat nagu Jekyll, võite jekyll buildpärast seda isegi käivitada, et veenduda, kas uus fail on ehitatud saidil saadaval.
Toimikud
- 18-project-example.zip