Share
Până acum ați învățat cum să faceți lucruri cum ar fi compilarea de coduri, autoprefixarea, curățarea, comprimarea și minificarea tuturor doar prin tastarea câtorva cuvinte. Acest lucru este minunat, dar dacă aveți un proiect care ar avea nevoie să executați mai multe dintre aceste comenzi, una după cealaltă, de mai multe ori până când veți termina lucrarea dvs.? De exemplu:
Chiar și cu câteva cuvinte pe comandă, ar deveni rapid obositoare pe tot parcursul unui proces tipic de creare a site-ului.
Aici intră "Task Runners" pentru a salva ziua. Cu alergătorii de sarcini puteți seta un singur fișier în interiorul proiectului, care definește toate sarcinile de care aveți nevoie pentru a rula pe proiectul dvs. și ordinea în care trebuie să se execute. În acest fișier puteți defini comenzi personalizate pe care le puteți utiliza pentru a executa toate aceste o dată.
Veți învăța cum să configurați alergătorii de sarcini în acest mod prin acest tutorial și în acest proces veți vedea și un exemplu de a aduce script-uri din pachetele Bower pentru o implementare eficientă în proiectele dvs..
Notă: Acest tutorial presupune că ați terminat toate tutorialele anterioare din această serie. Dacă nu ați făcut încă acest lucru, veți găsi că este util să treceți prin ele înainte de a începe aici.
Există, de fapt, mai mulți alergători de sarcini disponibili chiar acum, însă în scopul acestui tutorial ne vom concentra pe cele două care sunt în prezent cele mai populare: Grunt și Gulp.
Există mai multe diferențe tehnice între cele două proiecte, la care nu voi intra acum. De asemenea, nu vă voi spune care dintre cele două trebuie să le utilizați. În schimb, vă recomandăm să urmați pașii pentru folosirea celor de mai jos, apoi să decideți pe cineva pe care îl preferați.
Vom crea un proiect care urmărește și compilează automat Stylus și Jade și optimizează CSS și JavaScript. Vom realiza acest lucru folosind Grunt și apoi (în următorul tutorial) folosind Gulp.
În primul rând, va trebui să configurați un exemplu de proiect cu unele fișiere din interiorul acestuia, pe care poate funcționa alergătorul nostru de activități. Creați un folder numit "Grunt Project", apoi adăugați un subfolder numit "build" și un subfolder numit "source".
În directorul "sursă" adăugați două subfoldere noi numite "stylus", "jade". Adăugați câteva exemple de fișiere de tipul corespunzător în fiecare folder.
Fișierele pot conține orice cod pe care îl doriți, doar pentru a avea ceva la care puteți vedea procesul de compilare.
Bacsis: dacă nu sunteți sigur ce cod să adăugați, încercați să apucați un exemplu de cod de la Codepen: pixuri etichetate stilou, stilouri etichetate jade.
De exemplu:
De asemenea, vom profita de ceea ce am învățat despre Bower într-o lecție anterioară și vom descărca jQuery și Modernizr, pe care le vom combina și vom micșora ulterior.
Rulați comenzile:
bower instalează jquery - salvează
bower install modernizr - salveaza
Acum, faceți un duplicat al dosarului întregului proiect și îl redenumiți "Proiectul Gulp".
În acest fel puteți urmări pașii de folosire a Grunt în dosarul "Grunt Project" și pașii pentru utilizarea Gulp în dosarul "Gulp Project".
Pentru ca comenzile Grunt să funcționeze, va trebui să instalați CLI (interfața liniei de comandă). Instalați-l la nivel global cu:
[sudo] npm instalați -g grunt-cli
Fiecare proiect care utilizează Grunt va avea nevoie de un fișier "package.json" în dosarul rădăcină.
Am acoperit configurarea unui fișier "package.json" utilizând comanda npm init în tutorialul precedent de Taming Third Party Packages. Dacă nu ați terminat secțiunea respectivă, vă rugăm să mergeți înapoi și să o urmați acum.
Instalați Grunt în proiectul dvs. și salvați-l ca dependență de dezvoltare cu:
npm instalează grunt --save-dev
Fiecare proiect Grunt trebuie să aibă și ceea ce se numește a Gruntfile în dosarul rădăcină.
Un Gruntfile este un fișier numit "Gruntfile.js", sau "Gruntfile.coffee" dacă preferați să scrieți în CoffeeScript. În cazul nostru, vom lucra cu JavaScript, deci adăugați un fișier numit "Gruntfile.js" în dosarul rădăcină.
Completarea Gruntfile vă va permite să determinați ce comenzi vor declanșa sarcinile care trebuie executate. Puteți începe prin a adăuga doar o coajă de bază în Gruntfile. Vom configura codul de configurare real mai târziu.
Adăugați următorul cod la Gruntfile.js:
modul.exports = funcție (grunt) ;
Veți aminti că atunci când doriți să utilizați pachete cu npm sau Bower, a trebuit să căutați în locul potrivit pentru a obține versiunile proiectate să funcționeze cu fiecare sistem.
Același lucru este valabil și atunci când folosiți pachetele cu Grunt. Prin intermediul Grunt puteți accesa un ecosistem de plugin-uri, care în esență se înfășoară în jurul pachetelor de vanilie npm. Aceste pluginuri sunt încă livrate prin intermediul npm, dar sunt special echipate pentru a lucra cu Grunt
De exemplu, în loc de pachetul npm UglifyJS, cu Grunt puteți folosi pluginul "grunt-contrib-uglify".
Puteți căuta pluginuri Grunt la adresa http://gruntjs.com/plugins
Pentru proiectul nostru vom instala aceste 6 pluginuri Grunt:
Fiecare dintre ele va fi instalată în subfolderul "node_modules" din folderul proiectului și va fi salvată ca dependență de dezvoltare.
Rulați fiecare dintre aceste comenzi, una câte una, cu terminalul indicat la dosarul "Grunt Project":
npm instalează grunt-contrib-stylus -save-dev
npm instalează grunt-autoprefixer -save-dev
npm instalează grunt-contrib-cssmin -save-dev
npm instalează grunt-contrib-jade -save-dev
npm instalează grunt-contrib-uglify - salvează-dev
npm instalează grunt-contrib-watch -save-dev
Când ați terminat, ar trebui să vedeți aceste dosare în dosarul "node_modules" al proiectului:
Acum o vom folosi grunt.loadNpmTasks metodă pentru a permite pluginurile noastre.
În interiorul parantezelor curbate ale Gruntfile existente, vom adăuga șase linii, una pentru a permite fiecărui plugin grunt, după cum urmează:
module.exports = funcția (grunt) // Încărcați plug-inuri. grunt.loadNpmTasks ( 'groh-contrib-stilou'); grunt.loadNpmTasks ( 'groh-autoprefixer'); grunt.loadNpmTasks ( 'groh-contrib-cssmin'); grunt.loadNpmTasks ( 'groh-contrib-jad'); grunt.loadNpmTasks ( 'groh-contrib-sluți'); grunt.loadNpmTasks ( 'groh-contrib-ceas'); ;
Acest cod înregistrează numele fiecărui plugin ca o comandă grunt, permițându-ne să folosim comanda respectivă pentru a face pluginul să execute o sarcină. De exemplu, am folosi comanda grunduit stylus pentru a executa o sarcină a stiloului,grunt autoprefixer pentru a rula o sarcină autoprefixer și așa mai departe.
Plugin-urile noastre de bază sunt instalate și comenzile pe care le folosiți sunt operaționale, totuși dacă le folosiți chiar acum, nu veți vedea nimic să se întâmple. Motivul este că trebuie să configuram o configurație pentru a determina ce ar trebui să facă fiecare activitate.
Acest lucru se face prin adăugarea grunt.initConfig metoda pentru Gruntfile dvs. și apoi transmiterea informațiilor prin aceasta care dictează modul în care doriți ca fiecare sarcină să fie rulată.
Mai întâi, vom adăuga grunt.initConfig deasupra liniilor pe care tocmai le-ați adăugat pentru a încărca pluginurile grunt:
grunt.initConfig ();
Acum vom face spațiu pentru ca noi să transmitem informațiile noastre de configurare. Adăugați deschiderea și închiderea parantezelor în interiorul parantezelor obișnuite, apoi adăugați o linie între ele:
grunt.initConfig ();
Acum putem continua și adăugăm configurația pentru fiecare dintre pluginurile pe care le-am instalat.
Fiecare plugin are propria gamă de setări pe care le puteți utiliza și aceste opțiuni sunt detaliate pe paginile la care se face referire în secțiunea "Install Grunt Plugins" de mai sus.
Puteți citi, de asemenea, detalii complete despre configurarea sarcinilor Grunt aici: http://gruntjs.com/configuring-tasks
Vom începe prin adăugarea de configurații pentru noi stylus sarcină.
Între parantezele curbate pe care tocmai le-ați adăugat, pe linia goală, adăugați următorul cod:
stylus: compilați: opțiuni: compress: false, paths: ['source / stylus'], fișiere: 'build / style.css': source / stylus / main.styl ',
Gruntfile dvs. ar trebui să arate astfel:
"build / style.css": "build / style.css": create / style.css ' sursă / stylus / main.styl ',); / / Încărcați plugin-uri. grunt.loadNpmTasks ( 'groh-contrib-stilou'); grunt.loadNpmTasks ( 'groh-autoprefixer'); grunt.loadNpmTasks ( 'groh-contrib-cssmin'); grunt.loadNpmTasks ( 'groh-contrib-jad'); grunt.loadNpmTasks ( 'groh-contrib-sluți'); grunt.loadNpmTasks ( 'groh-contrib-ceas'); ;
Să trecem printr-o defalcare a codului pe care l-am adăugat aici. Nu vom rupe toate sarcinile, dar privirea la aceasta ar trebui să vă dau o idee despre tipul de sintaxă folosit atunci când puneți împreună configurația sarcinii Grunt.
După cum sa menționat mai sus, fiecare plugin are opțiuni de configurare diferite, astfel încât atunci când folosiți un nou plugin, aruncați o privire la instrucțiunile de utilizare pe care le oferă.
Primul lucru pe care l-am făcut este să adăugăm o intrare în config-ul nostru pentru noi stylus sarcina cu codul:
stylus: ,
Înăuntru, am adăugat o compila intrare pentru a controla ceea ce se întâmplă în timpul compilării:
stylus: compile: ,
În interiorul compila sarcină pe care am creat-o Opțiuni zonă.
Am folosit zona pentru a seta comprima opțiunea pentru fals, pentru că vom face optimizarea codului mai târziu.
De asemenea, am setat căi opțiunea pentru [ 'Sursa / stylus'] așa că dacă Stylus vede @import directive în timp ce compilarea va căuta fișierele de import în folderul proiectului "source / stylus":
stylus: compilați: opțiuni: compress: false, căi: ['source / stylus'],
Apoi, după Opțiuni zona pe care am adăugat-o fișiere pentru a controla directorul de ieșire și numele fișierului, precum și directorul de intrare și numele fișierului.
Am setat locația de ieșire a fișierului nostru CSS compilat 'Build / style.css', în timp ce fișierul Stylus este procesat 'Sursă / stylus / main.styl'.
stylus: compilați: opțiuni: compress: false, paths: ['source / stylus'], fișiere: 'build / style.css': source / stylus / main.styl ',
Acum, cu terminalul indicat la directorul rădăcină principal rulați comanda:
grunduit stylus
Uită-te în interiorul dosarului "build" și ar trebui să vezi un fișier "style.css" nou compilat.
Vom trece acum destul de repede prin configurația fiecărei sarcini rămase. Introduceți fiecare bloc de cod de configurare imediat după cel pe care l-ați adăugat anterior.
Adăugați acest cod:
autoprefixer: compilați: fișiere: 'build / style.css': 'build / style.css',,,
Rulați sarcina autoprefixer cu:
grunt autoprefixer
Dacă inspectați fișierul "build / style.css", ar trebui să vedeți acum prefixele adăugate acolo unde este necesar.
Adăugați acest cod:
cssmin: clean: fișiere: 'build / style.css': 'build / style.css',
Rulați sarcina cssmin cu:
grunt cssmin
Dacă te uiți acum la "build / style.css", vei vedea că a fost curățată și comprimată frumos pentru tine.
Adăugați acest cod:
jad: compilați: fișiere: [extinde: true, cwd: "source / jade", src: "* .jade", dest: "build", ext: ".html"],
Rulați sarcina jad cu:
grâu jad
Dacă te uiți în interiorul folderului "build", ar trebui să vezi acum un fișier HTML care să corespundă fiecărui fișier Jade din folderul "source / jade".
Adăugați acest cod:
uglify: bower_js_files: fișiere: 'build / output.min.js': ['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js'],
În acest exemplu veți vedea că ne referim la locațiile componentelor Bower pe care le-am instalat mai devreme.
Suntem apucați de versiunea completă a jQuery și Modernizr din dosarul nostru "bower_components", apoi le concatenăm și le minificăm într-un nou fișier numit "output.min.js". Aceasta este o modalitate foarte bună de a implementa scripturile pe care le gestionați cu Bower.
Rulați sarcina uglify cu:
grunt uglify
Ar trebui să vedeți acum un nou fișier "output.min.js" în folderul "build".
Până acum s-ar părea că am înlocuit doar o comandă pentru a face o anumită sarcină cu o altă comandă, dar ceea ce am făcut de fapt este să punem bazele unde Grunt începe cu adevărat să strălucească.
Cheia este capacitatea lui Grunt de a avea o sarcină să execute o altă sarcină. Deci, acum o să stabilim a ceas sarcină care va monitoriza anumite fișiere pentru modificări, apoi rulați-ne stylus și jad sarcini în mod automat pentru noi.
Adăugați acest cod:
ceas: stylus: fișiere: ['source / stylus / *. style'], sarcini: ['stylus', 'autoprefixer', 'cssmin'], jade: files: ['source / jade / *. jade], sarcini: ['jade'],
Am mai adăugat prima noastră ceas și apoi în interiorul căruia am creat o zonă pentru stylus si pentru jad.
fișiere în fiecare set, care fișiere trebuie urmărite pentru modificări. sarcini opțiunea stabilește care sarcini ar trebui executate atunci când se produc schimbări și în ce ordine.
Pentru stylus, am setat sarcina de urmărire pentru a monitoriza toate fișierele ".styl" din directorul "sursă / stilou", iar atunci când vede modificările, va rula stylus, autoprefixer și cssmin în această ordine.
Deci, acum, când sarcina de ceas rulează, tot ce trebuie să faceți este să salvați oricare dintre fișierele Stylus și veți obține în mod automat un fișier CSS compilat, auto-corectat și optimizat scris în folderul "build" pentru dvs..
De asemenea, pentru jad, am setat toate fișierele ".jade" din directorul "sursă / jad" care urmează să fie monitorizate și de fiecare dată când este salvat jad sarcina va rula automat și va compila fișierul HTML corespunzător din "build" .
Rulați sarcina de urmărire cu:
Ceasul de grunt
Opriți-o din nou fie prin:
În acest moment s-ar putea să te întrebi, ce zici de sarcina JavaScript uglify?
Motivul pentru care nu l-am inclus în ceas sarcina este că nu veți mai face modificări în fișierele jQuery și Modernizr pe care le procesează sarcina uglifică. Deci, pentru că ceas sarcina reacționează numai la modificările pe care niciodată nu le-a declanșat pentru a procesa JavaScript.
În schimb, vom folosi Mod implicit sarcină care poate fi setată în Gruntfile. Aceasta este sarcina care va fi rulată dacă utilizați comanda mormăit de la sine, fără nimic atașat.
După ultimul tău grunt.loadNpmTasks line, dar înainte de închidere ; din fișier, adăugați această linie:
Accentsconagua
grunt.registerTask ("implicit", ["stylus", "autoprefixer", "cssmin", "jade", "uglify"]); Aceasta stabilește Mod implicit sarcina de a alerga stylus, autoprefixer, cssmin, jad și apoi urâţi.
Acum, dacă conduci comanda mormăit fără nimic după el, va construi întregul proiect, inclusiv JavaScript.
Vino în continuare, vom repeta procesul pe care tocmai l-am învățat, dar folosind Gulp pentru a ne ocupa de sarcina noastră în loc de Grunt.
