Kā izmantot Grunt, lai automatizētu savu darbplūsmu [Tutorials]

Es esmu milzīgs automatizācijas aizstāvis jo tas padara dzīvi daudz vienkāršāku. Kāpēc pavadīt laiku, lai veiktu dzīvus, monotoniskus uzdevumus, kas sūc jūsu dzīvības spēku tieši tad, kad jums ir dators, kas jums dara lietas? Tas jo īpaši attiecas uz tīmekļa attīstību.

Daudzi attīstības uzdevumi var būt sīki mājas darbi. Izstrādājot, jūs, iespējams, vēlēsieties apkopot kodu, kad, nospiežot izstrādes versiju, jūs varat sasaistīt un rediģēt failus, noņemt tikai attīstības resursus un tā tālāk. Pat salīdzinoši sarežģītas ir tādas, kā failu svītrošana vai mapju pārdēvēšana var aizņemt lielu daļu no mūsu laika.

Šajā rakstā es jums parādīšu, kā jūs varat padarīt savu dzīvi vieglāku, piesaistot lielisko funkcionalitāti, ko piedāvā Grunt, Javascript uzdevumu skrējējs. Es jums vadīšu visu procesu, tāpēc neuztraucieties, pat ja neesat Javascript vednis!

Vairāk par Hongkiat.com:

• CSSMatic padara CSS vienkāršu Web dizaineriem
• Automatizējiet uzdevumus Mac datorā ar mapju darbībām
• Automatizējiet Dropbox failus ar darbībām
• 10 lietotnes, kas palīdz automatizēt uzdevumus Android ierīcē
• Kā (automātiski) dublēt vietni Dropbox

Grunt instalēšana

Grunt instalēšana ir diezgan vienkārša, jo tā izmanto mezglu pakotņu pārvaldnieku. Tas nozīmē, ka jums, iespējams, būs jāinstalē pats mezgls. Atveriet termināli vai komandu uzvedni (no šī brīža zvanīšu šim terminālim) un ievadiet nmp -v.

Ja redzat versijas numuru, kas jums ir npm instalēta, ja redzat kļūdu "komanda nav atrasta", jums tā jāinstalē, dodoties uz mezglu lejupielādes lapu un izvēloties vajadzīgo versiju.

Kad mezgls ir instalēts, Grunt iegūšana ir viena komandas jautājums, kas tiek izsniegts terminālā:

npm instalēt -g grunt-cli

Pamata lietošana

Jūs izmantosiet Grunt uz projekta pamata, jo katram projektam būs atšķirīgas prasības. Sāksim projektu tagad, izveidojot mapi un navigējot uz to caur mūsu terminālu.

Divi faili veido Grunt sirdi: package.json un Gruntfile.js. Iepakojuma fails definē visas trešās puses atkarības, ko jūsu automatizācija izmantos, Gruntfile ļauj jums kontrolēt kā tieši tie tiek izmantoti. Izveidosim tukšo kaulu pakotnes failu tagad ar šādu saturu:

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

Nosaukums un versija ir atkarīgs no jums, atkarībām jāietver visas izmantotās paketes. Šobrīd mēs nedarām neko, tāpēc mēs tikai nodrošināsim, ka Grunt tiek pievienota kā atkarība.

Iespējams, jūs jautājat sev, ko tur dara tilde.

Var būt nepieciešamas versijas, izmantojot semantiskās versijas noteikumus, lai iegūtu npm. Īsumā:

• Jūs norādāt precīzu versiju, piemēram 4.5.2
• Jūs varat izmantot lielāku par / mazāk nekā norādīt minimālo vai maksimālo versiju, piemēram, > 4.0.3
• Tildes izmantošana nosaka versijas bloku. Lietošana ~ 1.2 tiek uzskatīts par 1.2.x, jebkura versija, kas pārsniedz 1.2.0, bet zemāka par 1.3

Ir daudz vairāk veidu, kā norādīt versijas, bet tas ir pietiekams vairumam vajadzību. Nākamais solis ir izveidot Gruntfile, kas veiks mūsu automatizācijas.

 module.exports = funkcija (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('noklusējuma', []); ; 

Būtībā tas ir Gruntfile skelets; ir divas interesantas vietas. Viena vieta ir iekšpusē initConfig () funkciju. Tajā ir visas jūsu projekta konfigurācijas. Tas ietvers tādas lietas kā LESS / SASS apkopošana, skriptu rediģēšana utt.

Otrā atrašanās vieta ir zem šīs funkcijas, kurā norādāt uzdevumus. Jūs varat redzēt vienu norādīto uzdevumu “noklusējuma”. Šobrīd tas ir tukšs, tāpēc tas neko nedara, bet mēs to paplašināsim vēlāk. Uzdevumi pārsvarā rindā veido bitus un gabalus no mūsu projekta konfigurācijas un izpilda tos.

Piemēram, nosaukts uzdevums “skriptus” var sasaistīt visus mūsu skriptus, pēc tam saīsināt iegūto failu un pēc tam pārvietot to uz galīgo atrašanās vietu. Šīs trīs darbības ir definētas projekta konfigurācijā, bet ir “velk kopā” uzdevums. Ja tas nav skaidrs, tikai neuztraucieties, es jums parādīšu, kā tas tiek darīts.

Mūsu pirmais uzdevums

Izveidosim uzdevumu, kas samazina vienu javascript failu.

Mums ir četras lietas, kas mums jādara jebkurā laikā, kad vēlamies pievienot jaunu uzdevumu:

• Ja nepieciešams, instalējiet spraudni
• Pieprasiet to Gruntfailā
• Rakstiet uzdevumu
• Ja nepieciešams, pievienojiet to uzdevumu grupai

(1) Atrast un instalēt spraudni

Vienkāršākais veids, kā atrast spraudni, jums ir jāievada kaut kas līdzīgs Google lapai: “rediģēt javascript grunt spraudni”. Pirmajam rezultātam vajadzētu novest pie spraigās spraudņa spraudņa, kas ir tieši tas, kas mums nepieciešams.

Github lapa stāsta jums visu, kas jums jāzina. Instalēšana ir viena līnija terminālī, šeit ir tas, kas jums jāizmanto:

 npm instalējiet grunt-dev-uglify --save-dev 

Jums var būt nepieciešams to palaist, izmantojot administratora privilēģijas. Ja jums ir kaut kas līdzīgs npm ERR! Lūdzu, mēģiniet palaist šo komandu kā root / administrators. pirms komandas ierakstiet sudo un ievadiet savu paroli, kad tiek prasīts:

 sudo npm instalējiet grunt-dev-uglify --save-dev 

Šī komanda faktiski analizē jūsu package.json failu un pievieno to kā atkarību tur, jums tas nav jādara manuāli.

(2) Nepieciešama Gruntfile

Nākamais solis ir pievienot Gruntfile kā prasību. Man patīk pievienot plugins faila augšpusē, šeit ir mana pilnā Gruntfile pēc pievienošanas grunt.loadNpmTasks ('grunt-hozzájár-uglify');.

 module.exports = funkcija (grunt) grunt.loadNpmTasks ('grunt-hozzájár-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'))); grunt.registerTask ('noklusējuma', []); ; 

(3) Izveidojiet uzdevumu skriptu rediģēšanai

Kā mēs runājām, tas būtu jādara initConfig () funkciju. Spraudņa Github lapa (un lielākā daļa citu spraudņu) sniedz jums daudz informācijas un piemērus. Lūk, ko es izmantoju izmēģinājuma projektā.

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

Tas ir diezgan vienkārši, es norādīju scripts.js fails mana projekta js direktorijā un minificētā faila galamērķis. Ir daudz veidu, kā norādīt avota failus, mēs to apskatīsim vēlāk.

Tagad pārbaudīsim visu Gruntfile pēc tam, kad tas ir pievienots, lai pārliecinātos, ka jūs zināt, kā lietas sader kopā.

 module.exports = funkcija (grunt) grunt.loadNpmTasks ('grunt-hozzájár-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('noklusējuma', []); ; 

(4) Pievienojiet šo konfigurāciju uzdevumu grupai

Tieši tagad jūs varat doties uz savu terminālu un veidu grunt uglify bet mums būs nepieciešamas uzdevumu grupas, lai vēlāk veiktu vairākus uzdevumus. Mums ir noklusējuma uzdevums tukšs, tikai gaida, lai tiktu pievienots kaut kas, lai to mainītu šādi:

 grunt.registerTask ('noklusējums', ['uglify']); 

Šajā posmā jums vajadzētu būt iespējai doties uz termināli grunt un redziet, kā notiek minēšana. Neaizmirstiet izveidot a scripts.js protams!

Tas neļāva daudz laika, lai to izveidotu? Pat ja tu esi jauns, lai tas viss notiktu, un tas aizņēma kādu laiku, lai strādātu ar soļiem, laiks, ko tas ietaupīs, pārsniegs laiku, kas tam veltīts dažu lietojumu laikā..

Failu saspiešana

Paskatīsimies uz failu un uzziniet, kā norādīt vairākus failus kā mērķi paceļam.

Saskaņošana ir process, kurā vairāku failu saturs tiek apvienots vienā failā. Mums būs nepieciešams plug-in-concat spraudnis. Strādāsim ar soļiem:

Lai instalētu spraudņa lietošanu npm instalējiet grunt-cont-concat --save-dev terminālī. Kad tas ir paveikts, pārliecinieties, ka tas ir pievienots jūsu Gruntfile tāpat kā pirms lietošanas grunt.loadNpmTasks ('grunt-hozzájár-concat');.

Tālāk ir konfigurācija. Apkoposim trīs konkrētus failus, sintakse būs pazīstama.

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

Iepriekš minētais kods aizņem trīs failus, kas norādīti kā avots, un apvieno tos failā, kas norādīts kā galamērķis.

Tas jau ir diezgan spēcīgs, bet kā tad, ja tiek pievienots jauns fails? Vai mums visu laiku ir jāatgriežas šeit? Protams, ne, mēs varam norādīt visu failu mapi, lai piesaistītu.

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

Tagad jebkurš javascript fails dev / js mapē tiks apvienots vienā lielā failā: js / scripts.js, daudz labāk!

Tagad ir pienācis laiks izveidot uzdevumu, lai mēs faktiski varētu sasaistīt dažus failus.

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

Tas vairs nav noklusējuma uzdevums, tāpēc, kad mēs izdosim grunt komandu.

 grunt mergejs 

Automatizācijas automatizācija

Mēs jau esam guvuši lielu progresu, bet ir vairāk! Tagad, kad vēlaties sasaistīt vai rediģēt, jums jādodas uz termināli un ievadiet atbilstošo komandu. Ir pienācis laiks aplūkot skatīties komandu, kas to darīs mums. Mēs arī uzzināsim, kā vienlaicīgi veikt daudzu uzdevumu izpildi.

Lai dotos uz priekšu, mums būs jāapkaro grunt-watch-watch. Esmu pārliecināts, ka jūs varat to instalēt un pievienot savam Gruntfile jau tagad, tāpēc es sākšu, rādot jums to, ko izmantoju testa projektā.

 skatīties: skripti: faili: ['dev / js / *. js'], uzdevumi: ['concat', 'uglify'],, 

Es nosaucu skatāmo failu kopu “skriptus”, tikai tāpēc es zinu, ko tas dara. Šajā objektā man ir norādīti faili, kas jāpārrauga, un uzdevumi, kas jāveic. Iepriekšējā sasaistes piemērā mēs apkopojām visus failus dev / js direktorijā.

Minifikācijas piemērā mēs šo failu rediģējām. Ir jēga skatīties dev / js mapi, lai veiktu izmaiņas, un palaist šos uzdevumus, ja tādi ir.

Kā redzat, vairākus uzdevumus var saukt viegli, atdalot tos ar komatiem. Tās tiks veiktas pēc kārtas, vispirms saplūstot, tad šajā gadījumā minēšana. To var izdarīt arī ar uzdevumu grupām, kas ir sava veida iemesls.

Tagad mēs varam mainīt noklusējuma uzdevumu:

 grunt.registerTask ('noklusējuma', ['concat', 'uglify')); 

Tagad mums ir divas izvēles. Ikreiz, kad vēlaties sasaistīt un rediģēt skriptus, varat pārslēgties uz terminālu un veidu grunt. Varat arī izmantot skatīšanās komandu, lai sāktu jūsu failu skatīšanu: skatīties.

Tā sēž tur, gaidot, lai jūs mainītu šos failus. Kad jūs to izdarīsiet, tas veiks visus tai uzticētos uzdevumus, iet uz priekšu, mēģiniet.

Tas ir daudz labāk, no mums nav vajadzīgs ieguldījums. Tagad jūs varat strādāt ar saviem failiem, un viss jums būs labi.

Pārskats

Ar šo rudimentāru informāciju par to, kā spraudņus var uzstādīt un lietot, un kā skatīties komandu darbina, jūs visi esat kļuvuši par automatizācijas atkarību. Gruntam ir daudz vairāk nekā tas, ko mēs apspriedām, bet nekas, ko nevarēja rīkoties pats.

Izmantojot komandas SASS apkopošanai, attēlu optimizēšanai, automātiskai korekcijai un citiem jautājumiem, ir tikai jāievēro sekojoši soļi, par kuriem mēs apspriedām un lasām sintaksi, kurai nepieciešams spraudnis.

Ja jūs zināt, ka Grunt ir īpaši noderīgi, lūdzu, informējiet mūs komentāros, mēs vienmēr esam ieinteresēti dzirdēt, kā izmantojat tādus rīkus kā Grunt!