A Grunt használata a munkafolyamat automatizálásához [Tutorials]

Én vagyok hatalmas támogatója az automatizálásnak mert sokkal egyszerűbbé teszi az életet. Miért töltsön időt az életszerű, monoton feladatokra, amelyek az életerőt szívják, amikor számítógéped van, hogy dolgokat csináljon az Ön számára? Ez különösen igaz a webes fejlesztésekre.

Számos fejlesztési feladat lehet házimunkák. A fejlesztés során összeállíthat kódot, ha egy fejlesztői verziót megnyomva összefűzheti és kicsinyítheti a fájlokat, eltávolíthatja a fejlesztés csak a forrásokat, és így tovább. Még viszonylag egyszerűk is, mint például egy csomó fájl törlése vagy mappák átnevezése egy nagy darabot vehet igénybe.

Ebben a cikkben megmutatom, hogy könnyebbé teheti az életét a Grunt, a Javascript feladat runner által kínált kiváló funkcionalitás kihasználásával. Az egész folyamatot végigvezetem, hogy ne aggódj még akkor is, ha nem vagy a Javascript varázsló!

További információ a Hongkiat.com oldalon:

• A CSSMatic egyszerűvé teszi a CSS-t a webes tervezők számára
• Feladatok automatizálása Mac-ben a Mappa műveletekkel
• Automatizálja Dropbox fájljait műveletekkel
• 10 alkalmazás, amelyek segítenek automatizálni a feladatokat az Android készülékén
• Hogyan (automatikusan) mentheti webhelyét a Dropboxba

A Grunt telepítése

A Grunt telepítése nagyon egyszerű, mert a csomópont-csomagkezelőt használja. Ez azt jelenti, hogy maga is telepítheti a Node-ot. Nyisson meg egy terminált vagy egy parancssorot (mostantól hívja ezt a terminált) és adja meg nmp -v.

Ha lát egy verziószámot NPM telepítve van, ha egy "parancs nem található" hibát észlel, telepítenie kell a csomópont letöltési oldalára és a szükséges verzió kiválasztására..

Miután telepítették a csomópontot, a Grunt beszerzése egy, a terminálon kiadott parancs egyik kérdése:

npm install -g grunt-cli

Alaphasználat

A Grunt-t projekt-projekt alapján fogják használni, mivel minden projektnek eltérő követelményei lesznek. Most indítsunk el egy projektet egy mappa létrehozásával és navigáljunk a terminálunkon keresztül is.

Két fájl alkotja Grunt szívét: package.json és Gruntfile.js. A csomagfájl meghatározza a harmadik féltől függő függőségeket, amelyeket az automatizálás fog használni, a Gruntfile lehetővé teszi a vezérlést hogyan pontosan ezeket használják. Hozzunk létre egy csupasz csontcsomagfájlt a következő tartalommal:

"név": "tesztprojekt", "verzió": "1.0", "devDependencies": "grunt": "~ 0.4.5",

A neve és verziója rajtad múlik, a függőségeknek tartalmazniuk kell az összes használt csomagot. Jelenleg nem csinálunk semmit, így csak meggyőződünk róla, hogy Grunt önmagában is függővé teszi.

Lehet, hogy megkérdezi magától, hogy mit csinál ott a tilde nevű gúnyos vonal (~).

A szemantikus verziótól a npm-hez tartozó szabályok felhasználásával változatokra lehet szükség. Dióhéjban:

• Megadhat egy pontos verziót, mint például 4.5.2
• Használhatja nagyobb, mint / kevesebbet, mint a minimális vagy maximális verziót, pl > 4.0.3
• A tilde használata egy verzióblokkot határoz meg. használata ~ 1.2 tekinthető 1.2.x, bármely 1.2.0-nál magasabb verzió, de 1.3

A verziók megadásának számos további módja áll rendelkezésre, de ez elég a legtöbb igényhez. A következő lépés egy olyan Gruntfile létrehozása, amely automatizálását végzi.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('alapértelmezett', []); ; 

Ez alapvetően a Gruntfile csontváza; két érdekes hely van. Az egyik hely az initConfig () funkció. Ez az, ahol az összes projekt konfiguráció megy. Ilyen például a LESS / SASS összeállítása, a parancsfájlok tömörítése stb.

A második hely a függvény alatt van, ahol megadja a feladatokat. Láthat egy nevezett feladatot “alapértelmezett”. Jelenleg üres, így nem tesz semmit, de később bővülünk. A feladatok lényegében a bitek és a darabok sorrendjét állítják be a projekt konfigurációjából és végrehajtják.

Például egy nevezett feladat “szkriptek” összevonhatja az összes parancsfájlunkat, majd kicsinyíti a kapott fájlt, majd áthelyezi azt a végső helyre. Ez a három művelet mind a projektkonfigurációban van definiálva, mind pedig “húzta össze” a feladat alapján. Ha ez még nem világos, mégsem aggódj, megmutatom neked, hogy ez hogyan történik.

Első feladatunk

Hozzunk létre egy olyan feladatot, amely egyetlen javascript fájlt hozzon létre számunkra.

Négy dolog, amire szükségünk van, ha új feladatot akarunk hozzáadni:

• Ha szükséges, telepítsen egy plugint
• Szükség van rá a Gruntfile-ben
• Írj egy feladatot
• Adja hozzá egy feladatcsoporthoz, ha szükséges

(1) Plugin keresése és telepítése

A legegyszerűbb módja annak, hogy megtaláljuk a szükséges bővítményt, hogy írj valamit ehhez a Google-hoz: “javasolja a javascript grunt plugin módosítását”. Az első eredmény az, hogy eljusson a grunt-hozzájárulás-uglify pluginhez, ami éppen amire szükségünk van.

A Github oldal mindent megtud, amit tudni kell. A telepítés egyetlen sor a terminálon, amire szüksége van:

 npm telepítse a grunt-hozzájárulás-uglify --save-dev parancsot 

Előfordulhat, hogy ezt az adminisztrátori jogosultságokkal kell futtatnia. Ha valami ilyesmit kap npm ERR! Kérjük, próbálja újra futtatni ezt a parancsot root / adminisztrátorként. az út mentén csak írja be a sudo-t a parancs előtt, és adja meg a jelszót, ha kéri:

 sudo npm telepítse a grunt-hozzájárulás-uglify --save-dev-et 

Ez a parancs valójában elemzi a package.json fájlként, és hozzáteszi, hogy ez egy függőség, akkor ezt nem kell kézzel elvégeznie.

(2) Szükség van a Gruntfile-ben

A következő lépés az, hogy a Gruntfile-hez hozzáadjuk a követelményt. Szeretném hozzáadni a pluginokat a fájl tetején, itt van a teljes Gruntfile hozzáadása a hozzáadás után grunt.loadNpmTasks ( 'röfögés-contrib-elcsúfít');.

 module.exports = funkció (grunt) grunt.loadNpmTasks ('grunt-hozzájárulás-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('alapértelmezett', []); ; 

(3) Hozzon létre egy feladatot a parancsfájlok tömörítéséhez

Amint megvitattuk, ezt az EU-n belül kell elvégezni initConfig () funkció. A bővítmény (és a legtöbb más bővítmény) Github oldalán sok információ és példa található. Íme, amit tesztprojektemben használtam.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js' 

Ez elég egyszerű, meghatároztam a scripts.js fájl a projekt js könyvtárában és a minigált fájl célhelye. A forrásfájlok megadásának számos módja van, ezt később megnézzük.

Most nézzük meg a teljes Gruntfile-t, miután hozzáadtuk, hogy megbizonyosodjon róla, hogy tudja, hogyan illeszkednek egymáshoz.

 module.exports = funkció (grunt) grunt.loadNpmTasks ('grunt-hozzájárulás-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('alapértelmezett', []); ; 

(4) Adja hozzá ezt a konfigurációt egy feladatcsoporthoz

Most már eljuthat a termináljába és típusára bosszantó de több feladatra lesz szükségünk több feladat végrehajtására később. Az alapértelmezett feladat üres, csak arra várunk, hogy hozzáadjon valamit, így változtassuk meg a következőt:

 grunt.registerTask ('alapértelmezett', ['uglify']); 

Ebben a szakaszban képesnek kell lennie a terminálra, típusra menni röfög és lássátok a bányászatot. Ne felejtse el létrehozni a scripts.js természetesen!

Ez nem sok időt vett igénybe, hogy megkezdhesse? Még akkor is, ha mindezek újdonságok, és időbe telik a lépések végrehajtása, a megtakarított idő meghaladja a rá fordított időt néhány felhasználási időn belül.

Fájlok összehangolása

Nézzük meg a fájlokat és megtudhatja, hogyan adhat meg több fájlt célként az út mentén.

A tömörítés az a folyamat, amikor több fájl tartalmát egyetlen fájlba egyesítik. Szükségünk lesz a grunt-hozzájárulás-concat bővítményre. Végezze el a lépéseket:

A plugin használatának telepítése npm telepítse a grunt-hozzájárulás-concat --save-dev parancsot a terminálon. Ha elkészült, győződjön meg róla, hogy hozzáadja a Gruntfile-hez, mint a használat előtt grunt.loadNpmTasks ( 'röfögés-contrib-concat');.

Következő lépés a konfiguráció. Kombináljunk három konkrét fájlt, a szintaxis ismerős lesz.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,, 

A fenti kód a forrásként megadott három fájlt veszi figyelembe, és azokat a rendeltetési helyként megadott fájlba egyesíti.

Ez már elég erős, de mi van, ha új fájlt adunk hozzá? Rendszeresen vissza kell jönnünk ide? Természetesen nem, meg tudjuk adni egy teljes mappát a fájloknak, hogy összekapcsolódjanak.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,, 

Most a dev / js mappában található javascript-fájlok egy nagy fájlba kerülnek: js / scripts.js, sokkal jobb!

Most itt az ideje, hogy hozzon létre egy feladatot, így valójában egyes fájlokat összekapcsolhatunk.

 grunt.registerTask ('mergejs', ['concat']); 

Ez már nem az alapértelmezett feladat, ezért be kell írnunk a nevét a terminálba, amikor kiadjuk röfög parancs.

 grunt mergejs 

Automatizálás automatizálása

Már sok haladást értünk el, de még több! Most, amikor összecsapni vagy kicsinyíteni akarsz, el kell menned a terminálra, és írnod ​​be a megfelelő parancsot. Itt az ideje, hogy megnézzük a néz parancsot, amely ezt megteszi nekünk. Azt is megtanuljuk, hogyan lehet egyszerre végrehajtani a mulitple feladatokat.

Ahhoz, hogy megyünk, meg kell ragadnunk a grunt-watch-watchet. Biztos vagyok benne, hogy telepítheted és hozzáadhatod a Gruntfile-hoz a saját tulajdonában, így elkezdem megmutatni, hogy mit használok a tesztprojektemben.

 watch: scripts: files: ['dev / js / *. js'], feladatok: ['concat', 'uglify'],, 

Megnéztem egy fájlkészletet “szkriptek”, csak így tudom, mit csinál. Ezen objektumon belül meghatároztam a nézni kívánt fájlokat és a feladatokat. Az előző összefűzési példában az összes fájlt a dev / js könyvtárban húztuk össze.

A kicsinyítési példában ezt a fájlt tömörítettük. Jó értelme, hogy nézze meg a dev / js mappát a változásokhoz, és futtassa ezeket a feladatokat, ha vannak ilyenek.

Mint látható, több feladat is egyszerűen hívható, vesszővel elválasztva. Ezeket sorrendben hajtják végre, először a konkatenációt, majd ebben az esetben a tömörítést. Ez a feladatcsoportokkal is elvégezhető, ami az, hogy miért léteznek.

Most módosíthatjuk az alapértelmezett feladatot:

 grunt.registerTask ('alapértelmezett', ['concat', 'uglify')); 

Most két lehetőségünk van. Ha csak szeretné összekapcsolni és kicsinyíteni a parancsfájlokat, átkapcsolhat a terminálra és a típusra röfög. Használhatja az órás parancsot a fájlok megtekintésének kezdeményezésére is: vigyázz.

Ott ül, és várja, hogy módosítsa ezeket a fájlokat. Amint ezt megteszi, elvégzi a hozzá rendelt összes feladatot, menjen előre, próbálja meg.

Ez sokkal jobb, nincs szükség bennünk. Most már dolgozhat a fájljaival, és mindent szépen meg fog tenni az Ön számára.

Áttekintés

Ezzel a kezdeti ismeretekkel a pluginok telepítésének és használatának módjáról, valamint arról, hogy hogyan működik az óra parancs, mindannyian önmagát automatizálási függővé válik. Sokkal több a Grunt-hoz, mint amit megvitattunk, de semmit sem tudtok kezelni.

A SASS összeállításához, a képek optimalizálásához, az automatikus javításhoz és a további parancsokhoz csak a megbeszélt lépések követése és a szintaxis olvasása szükséges..

Ha tudod, hogy a Grunt különlegesen nagyszerű felhasználási lehetőségei vannak, kérjük, ossza meg velünk a megjegyzéseket, mindig szívesen halljuk, hogyan használja a Grunt eszközöket!