Share
Tot nu toe heb je geleerd hoe je dingen moet doen, zoals het compileren van code, automatisch ophogen, opschonen, comprimeren en verkleinen door een paar woorden te typen. Dit is geweldig, maar wat als je een project hebt dat je nodig heeft om verschillende van deze commando's één voor één uit te voeren, steeds opnieuw totdat je je werk hebt voltooid? Bijvoorbeeld:
Zelfs met slechts een paar woorden per commando zou het snel vermoeiend worden gedurende het verloop van een typisch proces van het maken van een site.
Dit is waar "Task Runners" binnenkomen om de dag te redden. Met taakuitlopers kunt u een enkel bestand in uw project instellen dat alle taken definieert die u op uw project moet uitvoeren, en de volgorde waarin ze moeten worden uitgevoerd. In dit bestand kunt u vervolgens aangepaste opdrachten definiëren die u kunt gebruiken om al die taken uit te voeren taken eenmaal.
Op deze manier leer je hoe je taakrunners op deze manier kunt instellen, en in het proces zie je ook een voorbeeld van het binnenhalen van scripts uit Bower-pakketten voor een efficiënte implementatie in je projecten.
Notitie: Deze tutorial gaat ervan uit dat je alle voorgaande tutorials in deze serie hebt voltooid. Als je dat nog niet hebt gedaan, vind je het handig om ze te doorlopen voordat je hier begint.
Er zijn momenteel verschillende taaklopers beschikbaar, maar voor deze tutorial zullen we ons concentreren op de twee die momenteel het populairst zijn: Grunt en Gulp.
Er zijn verschillende technische verschillen tussen de twee projecten, waar ik nu niet op inga. Noch zal ik je vertellen welke van de twee je zou moeten gebruiken. In plaats daarvan raad ik aan de volgende stappen te volgen om beide onderstaande te gebruiken en vervolgens zelf te bepalen welke je voorkeur heeft.
We gaan een project maken dat Stylus en Jade bekijkt en automatisch compileert, en optimaliseert CSS en JavaScript. We bereiken dit eerst met Grunt en vervolgens (in de volgende tutorial) met Gulp.
Om te beginnen moeten we een voorbeeldproject opzetten met enkele bestanden erin waar onze taak loper op kan werken. Maak een map met de naam "Grunt Project" en voeg vervolgens een submap toe met de naam "build" en een submap met de naam "source".
Voeg in de map "source" twee nieuwe submappen toe met de naam "stylus", "jade". Voeg een paar voorbeeldbestanden van het juiste type toe aan elke map.
De bestanden kunnen elke gewenste code bevatten, net zodat u iets ziet waarop het compilatieproces werkt.
Tip: als je niet zeker weet welke code je moet toevoegen, probeer dan eens een voorbeeldcode van Codepen te pakken: pennen met een tag met een stylus, met een pen getagde jade.
Bijvoorbeeld:
We gaan dan ook profiteren van wat we in een vorige les over Bower hebben geleerd en downloads van jQuery en Modernizr downloaden, die we later zullen combineren en verkleinen.
Voer de opdrachten uit:
prieel installeer jQuery - opslaan
prieel installeren modernizr - opslaan
Maak nu een duplicaat van uw hele projectmap en hernoem het "Gulp Project".
Op deze manier kun je de stappen volgen om Grunt te gebruiken in je map "Grunt Project" en de stappen voor het gebruik van Gulp in je map "Gulp Project".
Om Grunt-commando's te laten werken, moet je zijn CLI (command line interface) installeren. Installeer het wereldwijd met:
[sudo] npm install -g grunt-cli
Elk project dat Grunt gebruikt, heeft een "package.json" -bestand nodig in de hoofdmap.
We hebben het instellen van een "package.json" -bestand geregeld met behulp van de opdracht npm init in de vorige tutorial voor het beheren van 3rd Party-pakketten. Als je die sectie nog niet hebt voltooid, ga je terug en volg je deze nu.
Installeer Grunt in uw project en sla het op als een ontwikkelingsafhankelijkheid met:
npm install grunt --save-dev
Elk Grunt-project moet ook een zogenaamd a hebben Gruntfile in de hoofdmap.
Een Gruntfile is een bestand met de naam "Gruntfile.js", of "Gruntfile.coffee" als u liever schrijft in CoffeeScript. In ons geval werken we met JavaScript, dus voeg een bestand met de naam "Gruntfile.js" toe aan uw hoofdmap.
Als u uw Grunt-bestand invult, kunt u bepalen welke opdrachten welke taken moeten uitvoeren. U kunt beginnen door simpelweg een basishell toe te voegen aan uw Grunt-bestand. We zullen uw huidige configuratiecode later instellen.
Voeg de volgende code toe aan uw Gruntfile.js:
module.exports = functie (grunt) ;
U zult zich herinneren dat wanneer u pakketten met npm of Bower wilde gebruiken, u op de juiste plaats moest zoeken om de versies te krijgen die ontworpen waren om met elk systeem te werken.
Hetzelfde geldt voor het gebruik van pakketten met Grunt. Via Grunt heb je toegang tot een ecosysteem van plug-ins, die in wezen omslagen zijn van vanilla npm-pakketten. Deze plug-ins worden nog steeds via npm geleverd, maar ze zijn speciaal uitgerust om met Grunt te werken
Bijvoorbeeld, in plaats van het npm-pakket UglifyJS, zou je met Grunt de plug-in "grunt-contrib-uglify" kunnen gebruiken.
Je kunt naar Grunt-plug-ins zoeken op http://gruntjs.com/plugins
Voor ons project zullen we deze zes Grunt-plug-ins installeren:
Elk wordt geïnstalleerd in de submap "node_modules" van uw projectmap en opgeslagen als een ontwikkelingsafhankelijkheid.
Voer elk van deze opdrachten één voor één uit, waarbij uw terminal naar uw map "Grunt Project" wijst:
npm install grunt-contrib-stylus --save-dev
npm install grunt-autoprefixer --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-jade --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
Als u klaar bent, ziet u deze mappen in de map "node_modules" van uw project:
Nu gaan we de gebruiken grunt.loadNpmTasks methode om onze plug-ins in te schakelen.
Binnen de accolades van je bestaande Grunt-bestand voegen we zes regels toe, één om elke grunt-plug-in in te schakelen, zoals zo:
module.exports = function (grunt) // Load grunt-plug-ins. grunt.loadNpmTasks ( 'grunt-contrib-stift'); grunt.loadNpmTasks ( 'grunt-autoprefixer); grunt.loadNpmTasks ( 'grunt-contrib-cssmin); grunt.loadNpmTasks ( 'grunt-contrib-jade'); grunt.loadNpmTasks ( 'grunt-contrib-verlelijken); grunt.loadNpmTasks ( 'grunt-contrib-watch'); ;
Deze code registreert de naam van elke plug-in als een grunt-commando, waardoor we die opdracht kunnen gebruiken om de plug-in een taak te laten uitvoeren. We zouden bijvoorbeeld het commando gebruiken grommende naald om een stylustaak uit te voeren,grunt autoprefixer om een autoprefixer-taak uit te voeren enzovoort.
Onze grunt-plug-ins zijn geïnstalleerd en de commando's om ze te gebruiken zijn allemaal operationeel, maar als je ze nu zou gebruiken, zou je niets zien gebeuren. De reden is dat we een configuratie moeten instellen om te bepalen wat elke taak eigenlijk zou moeten doen.
Dit wordt gedaan door het toevoegen van de grunt.initConfig methode om uw Gruntfile aan te passen en vervolgens informatie door te geven die dicteert hoe u wilt dat elke taak wordt uitgevoerd.
Eerst voegen we de grunt.initConfig methode boven de regels die u zojuist hebt toegevoegd om gruntplug-ins te laden:
grunt.initConfig ();
Nu zullen we wat ruimte voor ons vrijmaken om onze configuratie-informatie door te geven. Voeg accolades openen en sluiten toe aan de accolades en voeg er vervolgens een lege regel tussen toe:
grunt.initConfig ();
Nu kunnen we doorgaan en de configuratie toevoegen voor elk van de plug-ins die we hebben geïnstalleerd.
Elke plug-in heeft zijn eigen reeks instellingen die u kunt gebruiken en deze opties worden gedetailleerd beschreven op de pagina's waarnaar wordt verwezen in het gedeelte 'Grunt-plug-ins installeren' hierboven.
U kunt hier ook alle details over het configureren van Grunt-taken lezen: http://gruntjs.com/configuring- takenks
We beginnen met het toevoegen van configuratie voor onze schrijfstift taak.
Tussen de accolades die u zojuist hebt toegevoegd, voegt u op de lege regel de volgende code toe:
stylus: compile: options: compress: false, paths: ['source / stylus'], bestanden: 'build / style.css': 'source / stylus / main.styl',
Je Grunt-bestand zou er nu als volgt uit moeten zien:
module.exports = functie (grunt) grunt.initConfig (stylus: compile: options: compress: false, paths: ['source / stylus'], bestanden: 'build / style.css': ' source / stylus / main.styl ',); // Load grunt-plug-ins. grunt.loadNpmTasks ( 'grunt-contrib-stift'); grunt.loadNpmTasks ( 'grunt-autoprefixer); grunt.loadNpmTasks ( 'grunt-contrib-cssmin); grunt.loadNpmTasks ( 'grunt-contrib-jade'); grunt.loadNpmTasks ( 'grunt-contrib-verlelijken); grunt.loadNpmTasks ( 'grunt-contrib-watch'); ;
Laten we een overzicht van de code bekijken die we hier hebben toegevoegd. We zullen niet elke taak afbreken, maar als je deze bekijkt, zou je een idee moeten krijgen van het type syntaxis dat wordt gebruikt bij het samenstellen van Grunt-taakconfiguratie.
Zoals hierboven vermeld, heeft elke plug-in andere configuratie-opties, dus als u een nieuwe plug-in gebruikt, bekijk dan de gebruiksinstructies die het biedt.
Het eerste dat we hebben gedaan is een vermelding toevoegen aan onze configuratie voor onze schrijfstift taak met de code:
stylus: ,
Binnenin hebben we een toegevoegd compileren invoer om te controleren wat er tijdens de compilatie gebeurt:
stylus: compile: ,
Binnen in de compileren taak die we hebben gemaakt opties Gebied.
We hebben dat gebied gebruikt om de samenpersen optie om vals, omdat we onze code-optimalisatie later zullen doen.
We hebben ook de paden optie om [ 'Source / pen'] dus als Stylus het ziet @importeren richtlijn tijdens het compileren zal zoeken naar bestanden om te importeren in de "source / stylus" map van het project:
stylus: compile: options: compress: false, paths: ['source / stylus'],
Dan na de opties gebied dat we hebben toegevoegd bestanden gebied om de uitvoermap en bestandsnaam te besturen, evenals de invoermap en de bestandsnaam.
We hebben de uitvoerlocatie van ons gecompileerde CSS-bestand ingesteld 'Build / style.css', terwijl het te verwerken Stylus-bestand is 'Bron / stylus / main.styl'.
stylus: compile: options: compress: false, paths: ['source / stylus'], bestanden: 'build / style.css': 'source / stylus / main.styl',
Nu, met uw terminal gericht op uw hoofddirectory, voert u de opdracht uit:
grommende naald
Kijk in je map "build" en je zou een nieuw gecompileerd "style.css" bestand moeten zien.
We gaan nu vrij snel door de configuratie van elke resterende taak. Voeg elk blok met configuratiecode toe onmiddellijk na het blok dat u eerder hebt toegevoegd.
Voeg deze code toe:
autoprefixer: compile: files: 'build / style.css': 'build / style.css',,,
Voer de autoprefixer-taak uit met:
grunt autoprefixer
Als u uw "build / style.css" -bestand inspecteert, ziet u nu waar nodig voorvoegsels toegevoegd.
Voeg deze code toe:
cssmin: clean: files: 'build / style.css': 'build / style.css',
Voer de cssmin-taak uit met:
grunt cssmin
Als je nu weer naar je "build / style.css" kijkt, zul je zien dat het netjes is opgeschoond en gecomprimeerd.
Voeg deze code toe:
jade: compile: files: [expand: true, cwd: "source / jade", src: "* .jade", dest: "build", ext: ".html"],
Voer de jade-taak uit met:
grom jade
Als u in de map "build" kijkt, ziet u nu een HTML-bestand dat overeenkomt met elk Jade-bestand dat u in uw "source / jade" -map had.
Voeg deze code toe:
uglify: bower_js_files: files: 'build / output.min.js': ['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js'],
In dit voorbeeld ziet u dat we verwijzen naar de locaties van de Bower-onderdelen die we eerder hebben geïnstalleerd.
We pakken de volledige uitgebreide versies van zowel jQuery als Modernizr uit onze map "bower_components", en vervolgens samenvoegen en verkleinen naar een nieuw bestand met de naam "output.min.js". Dit is een geweldige manier om scripts te implementeren die u beheert met Bower.
Voer de uglify-taak uit met:
grom uglify
U zou nu een nieuw "output.min.js" bestand in uw "build" map moeten zien.
Tot nu toe lijkt het misschien alsof we slechts één commando hebben vervangen om een bepaalde taak uit te voeren met een ander commando, maar wat we feitelijk hebben gedaan, is de basis leggen voor waar Grunt echt begint te schijnen.
De sleutel is Grunt's mogelijkheid om met één taak een andere taak uit te voeren. Dus nu gaan we een instellen kijk maar taak die bepaalde bestanden controleert op wijzigingen en vervolgens onze schrijfstift en jade taken automatisch voor ons.
Voeg deze code toe:
horloge: stylus: bestanden: ['source / stylus / *. styl'], taken: ['stylus', 'autoprefixer', 'cssmin'], jade: files: ['source / jade / *. jade '], taken: [' jade '],
We hebben onze eerste toegevoegd kijk maar taak en dan binnenin waar we een gebied voor hebben ingesteld schrijfstift en voor jade.
De bestanden optie in elke set naar welke bestanden moet worden gekeken voor wijzigingen. De taken optie stelt in welke taken moeten worden uitgevoerd wanneer wijzigingen plaatsvinden en in welke volgorde.
Voor schrijfstift, we hebben de watch-taak ingesteld om alle ".styl" -bestanden in de "source / stylus" -map te controleren, en wanneer het wijzigingen ziet, zal het de schrijfstift, autoprefixer en cssmin taken in die volgorde.
Dus wanneer de horloge-taak wordt uitgevoerd, hoeft u alleen maar een van uw Stylus-bestanden op te slaan en krijgt u automatisch een gecompileerd, automatisch gerectificeerd en geoptimaliseerd CSS-bestand dat is geschreven in de map "build" voor u.
Evenzo voor jade, we hebben alle ".jade" -bestanden in de map "source / jade" ingesteld om te worden gecontroleerd, en telkens wanneer een wordt opgeslagen, de jade taak wordt automatisch uitgevoerd en compileert het bijbehorende HTML-bestand in de "build" .
Voer de watch-taak uit met:
gegrom horloge
Stop het opnieuw met een van beide:
Op dit punt vraag je je misschien af, hoe zit het met de JavaScript uglify taak?
De reden dat we het niet hebben meegenomen bij de kijk maar taak is dat je geen wijzigingen gaat aanbrengen in de jQuery- en Modernizr-bestanden die de uglify-taak aan het verwerken is. Dus omdat het kijk maar taak reageert alleen op wijzigingen die nooit zijn geactiveerd om uw JavaScript te verwerken.
In plaats daarvan gaan we gebruik maken van de standaard taak die kan worden ingesteld in uw Grunt-bestand. Dit is de taak die wordt uitgevoerd als u de opdracht gebruikt knorren op zichzelf met niets bijgevoegd.
Na je laatste grunt.loadNpmTasks regel, maar vóór de sluiting ; van het bestand, voeg deze regel toe:
Accentsconagua
grunt.registerTask ('standaard', ['stylus', 'autoprefixer', 'cssmin', 'jade', 'uglify']); Hiermee stelt u de standaard taak uit te voeren schrijfstift, autoprefixer, cssmin, jade en dan verlelijken.
Dus nu als je het commando uitvoert knorren zonder iets hierna zal het je hele project bouwen, inclusief je JavaScript.
Als we daarna komen, herhalen we het proces dat we net hebben geleerd, maar door Gulp te gebruiken om onze taak af te handelen in plaats van Grunt.
