8 módszer a Grunt beállításának javítására

Talaj - amely elnyerte az év nyílt forráskódú projektjét a májusi nettó Awards 2014-en - iparágunkban hamar elengedhetetlen konfiguráció-alapú parancssori eszközzé vált olyan feladatok futtatásához, amelyek mindenféle követelményt képesek kezelni. A BBC News fejlesztőcsapata napi rendszerességgel használja a Grunt-ot annak biztosítására bbc.co.uk/news A kódbázist tesztelik, szögelik, formalizálják, optimalizálják és automatizálják.

Itt a BBC Mark McDonnell és Tom Maslen, a BBC News nyolcféle módja beszél arról, hogy miként segíthet a Grunt felállításának gyors, karbantartható és skálázható megtartásában.

hogyan lehet aranylevelet alkalmazni a papírra

01. Tartsa karbantartható a Gruntfile-t

A Grunt-nel dolgozó fejlesztők számára az egyik legnagyobb gond, hogy ez a csodálatosan erős konfigurációs fájl nehézkes szörnyeteggé fejlődhet. A legtöbb összetett eszközhöz hasonlóan a karbantarthatósági problémák is rövid idő alatt gyorsan felhalmozódhatnak; a felhasználókat elárasztva azzal, hogy miként lehet a legjobban megoldani a mostani összetettséget.



A probléma megoldásának legjobb módja a lehető legtöbb egyszerűsítés. Ha kivennénk egy lapot az objektum-orientált tervezési kézikönyvből, tudnánk, hogy a konfigurációs fájlunk túl sokat tesz, és hogy alkatrészekre kell bontanunk, hogy megkönnyítsük a Gruntfile követelményeink kibővítését és kezelését ( amikor további feladatokat és konfigurációs beállításokat kell hozzáadnunk).

Amit tennünk kell, egyszerűsítenünk kell a Gruntfile felépítését. Ennek néhány módja van, de az Ön által olvasott megoldások többsége ennek az általános témának a különböző megvalósításaiból áll. Az a példa, amelyet bemutatni fogok, a lehető legjobb módszer a Gruntfile méretének és összetettségének csökkentésére.

A gyökérkönyvtárban (ahol van a Gruntfile) létrehoz egy „grunt” mappát. A mappában különálló JavaScript fájlok lesznek; mindegyik más-más feladatot tartalmaz, amelyet felvett volna a fő Gruntfile-ba.

A könyvtárszerkezete a következőképpen nézhet ki ...

|— Gruntfile |— package.json |— grunt | – contrib-requirejs.js

A Gruntfile most már egyszerű lehet:

module.exports = function(grunt) { grunt.loadTasks('grunt'); };

Hát nem jobb? Érdemes megjegyezni, hogy a loadTasks metódusnak átadott „grunt” karakterláncnak semmi köze a tényleges Grunt objektumhoz; a létrehozott mappa nevére utal.

A mappát bárminek nevezhette: például az „omg-so-sexy” kifejezés a fenti kódban az lenne grunt.loadTasks ('omg-so-sexy') . Minden egyes feladattal a saját fájljában kissé eltérően kell meghatároznunk a feladatot, mint ahogy azt általában hozzáadnánk a Gruntfile-hoz; A contrib-reikalaujajs.js-t így kell felépíteni:

module.exports = function(grunt) { grunt.config('requirejs', { compile: { options: { baseUrl: './app', name: 'main', out: './app/release/main.js' } } }); grunt.loadNpmTasks('grunt-contrib-requirejs'); };

02. Tartsa ezt a konfigurációt a konfiguráción kívül!

Egy másik fontos technika, amelyet felhasználhatunk, az az, hogy bizonyos típusú konfigurációkat a Gruntfile-n kívülre helyezünk. Az egyik nyilvánvaló hely, ahol látjuk, hogy ez sokszor megtörténik, a JSHint plug-in , amely elég nagy lehet, és így sok helyet foglalhat el a teljes Gruntfile-on belül.

Szerencsére a JSHint beépített megoldással rendelkezik erre a problémára. Vessünk egy pillantást arra, hogyan használhatjuk fel a JSHint feladat tisztítására.

Az első lépés, amelyet meg kell tennünk, egy új fájl létrehozása .jshintrc , és azon belül tegye a JSON konfigurációt:

{ 'curly': true, ... } // This is an example, you should define more than one option!

Ezután a JSHint feladatból (amelyről azt feltételezzük, hogy most már biztonságosan kilépett a Gruntfile-ból és a saját külön feladatfájljában) megadhatja a konfigurációs fájl helyét:

jshint: { files: ['./app/**/*.js'], options: { jshintrc: './grunt/.jshintrc' } }

Ugyanez a megközelítés alkalmazható bármely konfigurációs adatra. Előfordulhat, hogy a JSHint feladat előre elkészült ezzel a funkcióval, ezért más előre elkészített feladatoknál előfordulhat, hogy a konfigurációs fájlt magának kell dinamikusan betöltenie a Grunt API .

03. Csak akkor futtassa a feladatokat, ha változás történt

Ha még nem hallottál a morgás-közreműködés-figyelés feladatról, akkor ez az első dolog, amit megnézel, mert ez életmentő annak biztosítására, hogy csak akkor futtass egy feladatot, ha a feladathoz tartozó társított fájlok valóban megváltoztak.

Képzelje el, hogy rendelkezik JavaScript tesztcsomaggal. Nem akarja, hogy a fájl minden mentése után manuálisan futtassa a feladatot (különösen, ha TDD - tesztvezérelt fejlesztést végez), mert ez lassú munkafolyamat. Jobb lenne, ha egyszerűen elmentené a JavaScript fájlját ... és a BOOM-tal a vonatkozó tesztek ki vannak kapcsolva és futnak! Ez a feladat.

Az alábbiakban talál egy egyszerű példát, amely bemutatja, hogyan hozhat létre egy szkript részfeladatot a fő nézési feladattól, amely az összes JavaScript fájlt figyeli - és ha bármelyik megváltozott, akkor futtatja a jshint feladatot, amely külön felállítva:

watch: { scripts: { files: ['app/**/*.js'], tasks: ['jshint'], options: { spawn: false, }, }, }

04. Csak a ténylegesen megváltozott fájlok ellen futtasson feladatokat

Az egyetlen dolog, ami gyorsabb, mint a grunt-contrib-watch használata a feladatok futtatásához, amikor egy fájl megváltozik, az, hogy csak azokat a fájlokat futtatja, amelyek a feladat legutóbbi futtatása óta valóban megváltoztak. Itt van a morgás-újabb feladat jól jön. A feladatokat normálnak definiálja, és csak annyit kell tennie, hogy előtagolja a futtatni kívánt feladat nevét újabb: .

Például:

grunt.initConfig({ jshint: { all: {src: 'src/**/*.js'} } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-newer'); grunt.registerTask('lint', ['newer:jshint:all']);

Most, amikor futsz morgás szösz csak azokkal a fájlokkal futtatja a jshint feladatot, amelyek a jshint feladat lefutott.

Tehát, ha futtatja a feladatot, majd egyetlen JavaScript-fájlt szerkeszt, akkor a fájl mentésekor az egyetlen fájl csak szöszös lesz, mert morgás-újabb A task nem tud újabb fájlokat futtatni újra a JSHint ellen.

05. Hozzon létre egy alapértelmezett Grunt beállítási kiindulópontot az összes projekthez

A Grunt beépített funkcióval rendelkezik morgás-init . Segítségével meghatározhat egy sablon projektstruktúrát, amely dinamikusan konfigurálható értékeket kap, amikor új projektet indít.

Ez egy JSON fájl által konfigurált parancssori eszköz. Kérdéseket állít be a JSON fájlba, ezekre a parancssor válaszol, és az értékek átkerülnek a projekt sablonjába.

Képzelje el például, hogy nagyszámú Node.js modult fejleszt ki, amelyeket az NPM (Node Package Manager) számára tesz közzé. Ahelyett, hogy ugyanazt a mappastruktúrát és a README fájlokat kellene újra és újra létrehoznia (de csak kisebb részleteket, például a könyvtár nevét kell megváltoztatnia), létrehozhat egy sablont, amely morgás-init felhasználhatja, hogy mindent automatikusan beállítson az Ön számára.

06. Értse meg, hogy az egyes feladatok mit csinálnak

A legnagyobb kritika Grunt ellen az, hogy lassú. Míg a Grunt valóban tartalmaz néhány, az optimálisnál alacsonyabb tervezési döntést (bár olyanokat, amelyekkel a következő Grunt v1.0 kiadás aktívan foglalkozik), a feladatokkal túlterhelt Grunt-beállítás nyilvánvalóan lassan fog futni.

Példaként: nemrég dolgoztunk egy olyan projekten, amelyhez hozzáadtunk egy 90 KB-os adatfájlt D3.js (népszerű adatmegjelenítő eszköz) interaktív térképbe történő összeállításhoz. Ez az adatfájl miatt a Grunt felépítésünk két percet vett igénybe egy összefűzött JS fájl ( morgás-hozzájárulás-követelmények ). Nem nagy élmény, ha a mentések között ilyen sokáig kell várni.

Az összeállítás olyan hosszú ideig tartott, mert a grunt-contrib-NõtJejs létrehozta a Java-forrástérképet az összefűzött fájlhoz, eredménytelen feladatot egy több ezer pontot tartalmazó adatfájlhoz. Az adatfájl feketelistájára néhány másodpercre visszatért az összeállítás.

Futtassa a Tasks párhuzamosan

A Grunt futási idejének felgyorsításának nagyszerű módja a feladatok párhuzamos futtatása. Két nagyon népszerű feladat segíthet ebben?

  • morgás-párhuzamos
  • morgás-egyidejű

Hogy őszinte legyek, nincs sok választási lehetőség köztük - kissé hajlongunk a morgás-egyidejűség felé, mert:

  • Az API valamivel egyszerűbb
  • A GitHubon folyó projektcsevegés újabb (a halott projektekre támaszkodni nem szórakoztató)
  • Sindre Sorhus készítette !!!

Függetlenül attól, hogy melyiket választja (válassza a grunt-párhuzamosat, ha egyéni - nem Grunt - feladatokat is szeretne futtatni), az egyik dolog, amit meg kell tennie, hogy használja a idő-morgás plug-in, amely egy fantasztikus eszköz, amely megmondja, hogy az egyes feladatok mennyi idő alatt futnak.

Valószínűleg hallotta már ezt az idézetet, de ez igaz. Mielőtt elkezdené a Gruntfile minden részének mikro-optimalizálását, először meg kell mérnie, hogy mennyi idő alatt fut az építkezés a jelenlegi formájában. Ezután minden újrafeldolgozás után elemezze a build teljesítményét, hogy megbizonyosodjon arról, hogy nem vezetett be regressziót.

Például nemrégiben hozzáadtuk a grunt-párhuzamos beépülő modult a Grunt-beállításokhoz; felgyorsította két részfeladat feldolgozását a RequireJS-szel, de valójában megnövelte a Sass-feladataink elkészítési idejét. Ennek oka, hogy a Sass két alfeladata 0,8 és 0,2 másodperc alatt futott.

Futtatva őket egymás mellett 0,5 másodperces büntetéssel, ami a Grunt második példányának felpörgetése, 1,3 másodpercre nőtt az idő! Ennek oka, hogy két feladat párhuzamos futtatása költséggel jár: általában kb. 0,5 másodperc, az az idő, amely egy másik Grunt-példány felpörgetéséhez szükséges.

08. Feltételesen terhelhető feladatok

A Grunt a memóriába tölti az összes feladatot, amelyet hozzáad a Gruntfile-hez, függetlenül attól, hogy használni fogják-e őket. A kis Grunt-beállításoknál ez nem kérdés, de mivel további feladatokat ad hozzá a beállításokhoz, hosszabb ideig tart, amíg a Grunt mindent felpörget, mielőtt futtatná a kért feladatot. Ez különösen fájdalmas lehet, ha van olyan feladata, amely valami különösen nehéz feladattól függ, például a GraphicMagick, amelynek öt másodpercbe telhet a memóriába történő betöltése.

Legyünk hát kissé trükkök, és állítsuk be a Grunt konfigurációt egy nagyon specifikus módon a probléma kiküszöbölése érdekében. Megadhatunk olyan feladatokat a konfigurációban, amelyek egyetlen feladata más feladatok meghatározása és futtatása, például:

module.exports = function (grunt) { grunt.registerTask('images', [], function () { grunt.config('responsive_images', { main: { ... } }); grunt.loadNpmTasks('grunt-responsive-images'); grunt.task.run('responsive_images'); }); };

A feladat képek minden alkalommal, amikor a Grunt fut, a memóriába kerül, de a benne lévő részfeladatok nem. Ezeket csak akkor futtatja és futtatja, ha fut morgós képek . Ez jelentősen csökkenti a Grunt által igényelt spin-up időt, mielőtt készen állna egy feladat futtatására. Az egyetlen hátrány, hogy mostantól a feladatok alrétegeivel rendelkezik, ezért meg kell adnia a feladatok nevét, amelyek leírhatják vagy összetéveszthetik a bennük futó feladatokat.

Következtetés

Reméljük, hogy hasznosnak találta ezt a cikket. Végül azonban a Grunt-beállítás karbantartható, gyors és méretezhetőségének megőrzésének legjobb módja az, ha megérti, mit csinál.

hogyan készítsünk textúrákat játékokhoz

Olvass tovább Gruntról; kövesse a gondolatvezéreket, mint pl Altman vagyok - a Grunt megalkotója, Sindre Sorhus - Node.js szupersztár, és Addy Osmani - munkafolyamat-rajongó, valamint @gruntjs a projekt legfrissebb híreiről. A legjobb kézműves emberek szakértővé válnak eszközeik használatában.

Szavak: Mark McDonnell és Tom Maslen

Mark McDonnell wannabe programozási poliglot és Tom Maslen a JavaScript, a HTML és a CSS szakértője. Ez a cikk eredetileg itt jelent meg net magazin 256. szám