Gruntin käyttö työnkulun automatisoimiseksi [Oppaat]

Olen a valtava automaation tukija koska se tekee elämästä paljon helpompaa. Miksi viettää aikaa arkaluonteisilla, yksitoikkoisilla tehtävillä, jotka imevät elämänvoimaasi heti, kun sinulla on tietokone, joka tekee asioita sinulle? Tämä koskee erityisesti web-kehitystä.

Monet kehitystehtävät voivat olla urakka. Kehitettäessä saatat haluta koota koodin, kun kehitettävää versiota painettaessa saatat yhdistää ja pienentää tiedostoja, poistaa vain kehitystyön resursseja ja niin edelleen. Jopa suhteellisen mutkattomia, kuten tiedostojen niputtaminen tai kansioiden nimeäminen uudelleen voi kestää suuren osan aikamme.

Tässä artikkelissa näytän sinulle, miten voit helpottaa elämääsi hyödyntämällä Gruntin, Javascript-tehtävän juoksijan tarjoamia erinomaisia toimintoja. Ohjaan sinut läpi koko prosessin, joten ei hätää, vaikka et ole Javascript-ohjattu!

Lisää sivustosta Hongkiat.com:

CSSMatic tekee CSS: n helpoksi Web-suunnittelijoille
Tehtävien automatisointi Macissa ja kansiotoiminnoilla
Automatisoi Dropbox-tiedostot toiminnoilla
10 sovellusta, jotka auttavat automatisoimaan Tehtävät Android-laitteessasi
Miten (automaattisesti) varmuuskopioit sivustosi Dropboxiin

Gruntin asentaminen

Gruntin asentaminen on melko helppoa, koska se käyttää solmupakettien hallintaa. Tämä tarkoittaa, että sinun on ehkä myös asennettava Node itse. Avaa terminaali tai komentokehote (soitan tästä päätelaitteesta nyt) ja kirjoita nmp -v.

Jos näet versionumeron NPM asennettu, jos näet "komento ei löytynyt" -virheen, sinun on asennettava se siirtymällä solmujen lataussivulle ja valitsemalla tarvittava versio.

Kun solmu on asennettu, Gruntin hankkiminen on päätelaitteessa annetun yhden komennon asia:

npm asenna -g grunt-cli

Peruskäyttö

Käytät Gruntia projektikohtaisesti, koska jokaisella projektilla on erilaiset vaatimukset. Aloitetaan nyt projekti luomalla kansio ja navigoimalla siihen myös terminaalimme kautta.

Kaksi tiedostoa muodostavat Gruntin sydämen: package.json ja Gruntfile.js. Pakkaustiedosto määrittelee kaikki kolmannen osapuolen riippuvuudet, joita automaatio käyttää, Gruntfile-sovelluksen avulla voit hallita millä tavalla juuri niitä käytetään. Luo nyt paljain luut pakettitiedosto, jonka sisältö on seuraava:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Nimi ja versio on sinun tehtäväsi, riippuvuuksien on sisällettävä kaikki käyttämäsi paketit. Emme tee tällä hetkellä mitään, joten varmistamme, että Grunt lisätään itsenäisesti.

Saatat kysyä itseltäsi, mitä tigliä kutsuva tyköinen linja (~) tekee siellä.

Versioita voidaan vaatia käyttämällä semanttisen version sääntöjä npm: lle. Pähkinänkuoressa:

Määrität tarkan version kuten 4.5.2
Voit käyttää pienempää tai pienempää versiota kuin pienin tai suurin versio, kuten > 4.0.3
Tilden käyttö määrittää versiolohkon. käyttämällä ~ 1.2 katsotaan olevan 1.2.x, mikä tahansa versio edellä 1.2.0, mutta alle 1.3

Paljon enemmän tapoja määritellä versioita on saatavilla, mutta tämä riittää useimpiin tarpeisiin. Seuraava askel on luoda Gruntfile, joka suorittaa automaatiomme.

 module.exports = toiminto (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('oletus', []); ;

Tämä on pohjimmiltaan Gruntfileen luuranko; on kaksi kiinnostavaa paikkaa. Yksi paikka on initConfig () toimia. Tässä kaikki projektin kokoonpano menee. Tähän sisältyy asioita, kuten LESS / SASS-kääntämisen käsittely, komentosarjojen minimointi ja niin edelleen.

Toinen paikka on sen toiminnon alapuolella, jossa määrität tehtävät. Näet yhden nimetyistä tehtävistä “oletusarvo”. Se on tällä hetkellä tyhjä, joten se ei tee mitään, mutta laajennamme sitä myöhemmin. Tehtävät jonottavat olennaisesti bittejä ja kappaleita projektin kokoonpanosta ja suorittavat ne.

Esimerkiksi nimetty tehtävä “skriptejä” voi yhdistää kaikki skriptit, sitten minimoida tuloksena olevan tiedoston ja siirtää sen lopulliseen sijaintiin. Nämä kolme toimintoa on määritelty projektin kokoonpanossa, mutta ne ovat “vetää yhteen” tehtävä. Jos tämä ei ole selvää, mutta älä huoli, näytän sinulle, miten tämä tehdään.

Ensimmäinen tehtävä

Luomme tehtävän, joka minimoi yhden javascript-tiedoston meille.

Meidän on tehtävä neljä asiaa, kun haluamme lisätä uuden tehtävän:

Asenna plugin tarvittaessa
Vaadi sitä Gruntfile-tiedostossa
Kirjoita tehtävä
Lisää se tarvittaessa työryhmään

(1) Etsi ja asenna laajennus

Helpoin tapa löytää tarvittava laajennus on kirjoittaa jotain tähän Googleen: “minimoi javascript grunt plugin”. Ensimmäisen tuloksen pitäisi johtaa sinut grunt-osallistumiseen, joka on juuri sitä, mitä tarvitsemme.

Github-sivu kertoo sinulle kaikki mitä sinun tarvitsee tietää. Asennus on yhden rivin päätelaitteessa, tässä on käytettävä:

 npm asenna grunt-osallistumiskorvaus - save-dev

Saatat joutua suorittamaan tämän järjestelmänvalvojan kanssa. Jos saat jotain npm ERR! Yritä käynnistää komento uudelleen root / Administrator. kirjoita sudo ennen komentoa ja anna salasana, kun sinua pyydetään:

 sudo npm asenna grunt-osallistumiskerroin --save-dev

Tämä komento käsittelee itse package.json tiedosto ja lisää se riippuvuutena siellä, sinun ei tarvitse tehdä sitä manuaalisesti.

(2) Vaadi Gruntfile

Seuraava askel on lisätä Gruntfileen vaatimus. Haluan lisätä pluginit tiedoston yläreunaan, täällä on täydellinen Gruntfile lisättyään grunt.loadNpmTasks (ähkyä-contrib-uglify ');.

 module.exports = toiminto (grunt) grunt.loadNpmTasks ('grunt-input-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('oletus', []); ;

(3) Luo tehtävä skriptien minimoimiseksi

Kuten keskustelimme, tämä olisi tehtävä EU: n sisällä initConfig () toimia. Pluginin (ja useimpien muiden laajennusten) Github-sivu tarjoaa runsaasti tietoa ja esimerkkejä. Tässä on mitä käytin testiprojektissani.

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

Tämä on melko yksinkertaista, määrin scripts.js tiedosto projektin js-hakemistossa ja minimoidun tiedoston kohde. Lähdetiedostojen määrittämiseen on monia tapoja, tutustumme siihen myöhemmin.

Tarkastellaan nyt koko Gruntfileä sen jälkeen, kun se on lisätty, jotta voit varmistaa, että tiedät, miten asiat sopivat yhteen.

 module.exports = toiminto (grunt) grunt.loadNpmTasks ('grunt-input-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('oletus', []); ;

(4) Lisää tämä kokoonpano tehtäväryhmään

Juuri nyt voit mennä terminaaliin ja tyyppiin röyhkeä mutta tarvitsemme tehtäväryhmiä suorittamaan useita tehtäviä myöhemmin. Meillä on oletusasetus tyhjä, odottamalla, että jotain lisätään, joten muutetaan se seuraavaan:

 grunt.registerTask ('oletus', ['uglify']);

Tässä vaiheessa sinun pitäisi pystyä menemään terminaaliin murahdus ja katso minimointi tapahtuu. Älä unohda luoda a scripts.js tiedosto tietenkin!

Se ei kestänyt paljon aikaa, kun se tehtiin? Vaikka olisit uusi kaikki tähän ja se vie jonkin aikaa töihin läpi, se säästää aikaa ylittää sen käyttämän ajan muutamassa käyttötarkoituksessa.

Tiedostojen yhdistäminen

Tarkastellaan tiedostojen ja oppia määrittämään useita tiedostoja kohteeksi matkan varrella.

Yhdistäminen on prosessi, jossa useiden tiedostojen sisältö yhdistetään yhdeksi tiedostoksi. Tarvitsemme grunt-osake-concat-laajennuksen. Työskentelemme läpi vaiheet:

Asenna laajennuksen käyttö npm asenna grunt-cont-concat --save-dev päätelaitteessa. Kun olet valmis, lisää se Gruntfile-tiedostoosi aivan kuten ennen käyttöä grunt.loadNpmTasks (ähkyä-contrib-concat ');.

Seuraavaksi on kokoonpano. Yhdistetään kolme erityistä tiedostoa, syntaksi on tuttu.

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

Yllä oleva koodi vie lähteeksi annetut kolme tiedostoa ja yhdistää ne kohteena olevaan tiedostoon.

Tämä on jo melko voimakas, mutta mitä jos uusi tiedosto lisätään? Meidän on palattava täällä koko ajan? Emme tietenkään voi määritellä koko kansiota tiedostoista, jotka on tarkoitus yhdistää.

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

Nyt dev / js-kansiossa oleva javascript-tiedosto yhdistetään yhdeksi suureksi tiedostoksi: js / scripts.js, paljon parempi!

Nyt on aika luoda tehtävä, jotta voimme todella yhdistää joitakin tiedostoja.

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

Tämä ei ole enää oletusarvo, joten meidän tulee kirjoittaa sen nimi terminaaliin, kun annamme murahdus komento.

 grunt mergejs

Automaation automatisointi

Olemme jo edistyneet paljon, mutta enemmän! Nyt kun haluat yhdistää tai pienentää, sinun täytyy mennä päätelaitteeseen ja kirjoittaa oikea komento. On korkea aika katsoa katsella komento, joka tekee tämän meille. Opimme myös, miten monitoimitehtävät suoritetaan heti.

Jotta voimme mennä, meidän täytyy tarttua katsomaan. Olen varma, että voit asentaa sen ja lisätä sen Gruntfileen omalla tavallaan nyt, joten aloitan näyttämällä sinulle, mitä käytän testiprojektissani.

 watch: scripts: files: ['dev / js / *. js'], tehtävät: ['concat', 'uglify'],,

Nimettiin joukko tiedostoja katsomaan “skriptejä”, vain niin tiedän, mitä se tekee. Tämän objektin sisällä olen määritellyt tiedostot, jotka katsovat ja tehtävät suoritettaviksi. Edellisessä yhdistelyesimerkissä vedimme yhteen kaikki dev / js-hakemiston tiedostot.

Minifiointiesimerkissä minifioitiin tämä tiedosto. On järkevää katsoa dev / js-kansiota muutoksiin ja suorittaa nämä tehtävät milloin tahansa.

Kuten näette, useita tehtäviä voidaan kutsua helposti erottamalla ne pilkuilla. Ne suoritetaan peräkkäin, ensin yhdistyksen, sitten tässä tapauksessa minimoinnin. Tämä voidaan tehdä myös työryhmien kanssa, mikä on sellainen, miksi ne ovat olemassa.

Nyt voimme muokata oletustehtävää:

 grunt.registerTask ('oletus', ['concat', 'uglify'));

Nyt meillä on kaksi vaihtoehtoa. Aina kun haluat liittää ja minimoida komentosarjojasi, voit siirtyä päätelaitteeseen ja tyyppiin murahdus. Voit myös katsella tiedostojasi katsomalla komennolla: katsella.

Se istuu siellä odottamassa sinua muuttamaan näitä tiedostoja. Kun teet sen, se suorittaa kaikki sille osoitetut tehtävät, mennä eteenpäin, kokeile.

Se on paljon parempi, meiltä ei tarvita tuloja. Nyt voit työskennellä tiedostojen kanssa, ja kaikki on hienosti tehty sinulle.

Yleiskatsaus

Tällä alkeellisella tietämyksellä siitä, miten laajennuksia voidaan asentaa ja käyttää ja miten kellokomento toimii, sinusta tulee kaikki itsestään automaatio-addikti. Gruntille on paljon enemmän kuin mitä keskustelimme, mutta mitään ei voitu käsitellä yksin.

SASS-komennon komentojen käyttäminen, kuvien optimointi, automaattinen korjaus ja muut on vain kysymys siitä, mitä vaiheita olemme keskustelleet ja lukeneet syntaksi, jota plugin tarvitsee.

Jos tiedät, että Gruntin käyttö on erityisen hyvä, kerro meille kommenteistamme, olemme aina kiinnostuneita kuulemaan, miten käytät Grunt-työkaluja!