Share
Hittills har du lärt dig hur du gör saker som att kompilera kod, autoprefixing, rengöring, komprimering och minimering av allt bara genom att skriva några ord. Det här är bra, men om du har ett projekt som skulle behöva att du kör flera av dessa kommandon, en efter en, om och om igen tills du slutför ditt arbete? Till exempel:
Även med några få ord per kommando skulle det snabbt bli tröttsamt under en typisk webbplatsskapande process.
Här är "Task Runners" in för att spara dagen. Med uppgiftslöpare kan du konfigurera en enda fil i ditt projekt som definierar alla uppgifter du behöver köra på ditt projekt och den ordning de behöver köra in. I den här filen kan du definiera anpassade kommandon som du kan använda för att utföra alla dessa uppgifter en gång.
Du kommer att lära dig hur du installerar uppgiftslöpare på detta sätt genom denna handledning, och i processen ses också ett exempel på att föra in skript från Bower-paket för effektiv implementering i dina projekt.
Notera: Denna handledning förutsätter att du har slutfört alla tidigare handledning i denna serie. Om du inte har gjort det så hittar du det bra att gå igenom dem innan du börjar här.
Det finns faktiskt flera uppgiftslöpare som är tillgängliga just nu, men för syftet med denna handledning kommer vi att fokusera på de två som för närvarande är mest populära: Grunt and Gulp.
Det finns flera tekniska skillnader mellan de två projekten, som jag inte kommer att gå in på nu. Jag kommer inte heller att berätta vilken av de två du borde använda. I stället rekommenderar jag att du följer stegen för att använda båda nedan och bestämma själv vilken du föredrar.
Vi ska skapa ett projekt som kollar och kompilerar automatiskt Stylus och Jade, och optimerar CSS och JavaScript. Vi kommer att uppnå detta först med Grunt, och sedan (i nästa handledning) med hjälp av Gulp.
Till att börja med måste vi installera ett exempelprojekt med några filer inuti det som vår arbetslöpare kan driva på. Skapa en mapp med namnet "Grunt Project", lägg till en undermapp med namnet "build" och en undermapp med namnet "source".
I mappen "Källa" lägg till två nya undermappar med namnet "stylus", "jade". Lägg till några exempelfiler av lämplig typ till varje mapp.
Filerna kan innehålla vilken kod du vill, bara så att du har något du kan se kompileringsprocessen på.
Tips: Om du inte är säker på vilken kod som ska läggas till, försök ta tag i någon provkod från Codepen: pennor taggade pennor, pennor märkta jade.
Till exempel:
Vi kommer då också att dra nytta av det vi lärde oss om Bower i en tidigare lektion och ta tag i nedladdningar av jQuery och Modernizr, som vi kommer att kombinera och beräkna senare.
Kör kommandona:
bower install jquery - save
bower install modernizr - save
Gör nu en kopia av hela projektmappen och byt namn på den "Gulp Project".
På så sätt kan du följa stegen om att använda Grunt i mappen "Grunt Project" och stegen för att använda Gulp i mappen "Gulp Project".
För att Grunt-kommandon ska fungera måste du installera CLI (kommandoradsgränssnitt). Installera det globalt med:
[sudo] npm installera -g grunt-cli
Varje projekt som använder Grunt behöver en "package.json" -fil i rotmappen.
Vi täckte att skapa en "package.json" -fil genom att använda kommandot npm init i den tidigare Taming 3: e paketet handledning. Om du inte har slutfört det här avsnittet, vänligen gå tillbaka och följ det nu.
Installera Grunt i ditt projekt och spara det som ett utvecklingsberoende med:
npm installera grunt - save-dev
Varje Grunt-projekt behöver också ha det som kallas a Gruntfile i rotmappen.
En Gruntfile är en fil med namnet "Gruntfile.js", eller "Gruntfile.coffee" om du föredrar att skriva i CoffeeScript. I vårt fall arbetar vi med JavaScript, så lägg till en fil med namnet "Gruntfile.js" i din rotmapp.
Om du fyller i din Gruntfile kan du bestämma vilka kommandon som ska utlösa vilka uppgifter som ska köras. Du kan börja med att bara lägga till ett grundläggande skal i din Gruntfile. Vi ställer in din aktuella konfigurationskod senare.
Lägg till följande kod till din Gruntfile.js:
module.exports = funktion (grunt) ;
Du kommer ihåg att när du ville använda paket med npm eller Bower, var du tvungen att söka på rätt ställe för att få versionerna utformade för att fungera med varje system.
Samma sak gäller när du använder paket med Grunt. Genom Grunt kan du komma åt ett ekosystem med plugins, som i huvudsak är wrappers runt vanilje npm-paket. Dessa plugins levereras fortfarande via npm, men de är speciellt utrustade för att arbeta med Grunt
Till exempel, istället för paketet npm UglifyJS, med Grunt kan du använda plugin "grunt-contrib-uglify".
Du kan söka efter Grunt-plugins på http://gruntjs.com/plugins
För vårt projekt installerar vi dessa sex Grunt-plugins:
Var och en kommer att installeras i din projektmapps "node_modules" undermapp och sparas som ett utvecklingsberoende.
Kör varje av dessa kommandon, en i taget, med din terminal pekad på din "Grunt Project" -mapp:
npm installera grunt-contrib-stylus - save-dev
npm installera grunt-autoprefixer --save-dev
npm installera grunt-contrib-cssmin - save-dev
npm installera grunt-contrib-jade -save-dev
npm installera grunt-contrib-uglify -save-dev
npm installera grunt-contrib-watch - save-dev
När du är klar bör du se dessa mappar i ditt projekts "node_modules" -mapp:
Nu ska vi använda grunt.loadNpmTasks metod för att aktivera våra plugins.
Inuti de fina parenteserna i din befintliga Gruntfile lägger vi till sex rader, en för att aktivera varje grunt-plugin, så här:
module.exports = funktion (grunt) // Ladda grunt plugins. grunt.loadNpmTasks ( 'grunt-contrib-pennan'); grunt.loadNpmTasks ( 'grunt-autoprefixer'); grunt.loadNpmTasks ( 'grunt-contrib-cssmin'); grunt.loadNpmTasks ( 'grunt-contrib-jade'); grunt.loadNpmTasks ( 'grunt-contrib-uglify'); grunt.loadNpmTasks ( 'grunt-contrib-watch'); ;
Denna kod registrerar namnet på varje plugin som ett grunt-kommando, så att vi kan använda det här kommandot för att få plugin att köra en uppgift. Till exempel skulle vi använda kommandot grunt stylus att köra en stylusuppgift,grunt autoprefixer att köra en autoprefixer uppgift och så vidare.
Våra grunt plugins installeras och kommandona som används är operativa, men om du använde dem just nu så skulle du inte se någonting hända. Anledningen är att vi måste konfigurera en viss konfiguration för att bestämma vad varje uppgift egentligen ska göra.
Detta görs genom att lägga till grunt.initConfig metod till din Gruntfile, och sedan överföra information genom det som dikterar hur du vill att varje uppgift ska köras.
Först lägger vi till grunt.initConfig metod ovanför de linjer du just lagt till för att ladda grunt plugins:
grunt.initConfig ();
Nu ger vi oss utrymme för att skicka vår konfigurationsinformation genom. Lägg till öppnings- och stängningsfäste innanför de vanliga fästena, lägg sedan till en tom linje mellan dem:
grunt.initConfig ();
Nu kan vi fortsätta och lägga till konfigurationen för alla plugins som vi installerade.
Varje plugin har sitt eget utbud av inställningar som du kan använda, och dessa alternativ är detaljerade på sidorna som är kopplade till i avsnittet "Install Grunt Plugins" ovan.
Du kan också läsa fullständig information om konfigurering av Grunt-uppgifter här: http://gruntjs.com/configuring-tasks
Vi ska börja med att lägga till konfiguration för vår nål uppgift.
Mellan de krökta hakarna som du just lagt till, lägg till följande kod på den tomma raden:
stylus: kompilera: alternativ: komprimera: felaktiga sökvägar: ['source / stylus'], filer: 'build / style.css': 'source / stylus / main.styl',
Din Gruntfile borde nu se ut så här:
modul port: style = css: 'build / style.css': ' källa / stylus / main.styl ',); // Ladda grunt plugins. grunt.loadNpmTasks ( 'grunt-contrib-pennan'); grunt.loadNpmTasks ( 'grunt-autoprefixer'); grunt.loadNpmTasks ( 'grunt-contrib-cssmin'); grunt.loadNpmTasks ( 'grunt-contrib-jade'); grunt.loadNpmTasks ( 'grunt-contrib-uglify'); grunt.loadNpmTasks ( 'grunt-contrib-watch'); ;
Låt oss gå igenom en uppdelning av koden som vi lagt till här. Vi kommer inte att bryta ner varje uppgift, men titta på den här ska ge dig en uppfattning om vilken typ av syntax som används när du sätter ihop Grunt-uppgiftskonfigurationen.
Som nämnts ovan har varje plugin olika konfigurationsalternativ, så när du använder en ny plugin, ta en bra titt på användningsinstruktionerna som erbjuds.
Det första vi har gjort är att lägga till en post i vår config för vår nål uppgift med koden:
stylus: ,
Inuti har vi lagt till en sammanställa Inträde för att kontrollera vad som händer under sammanställningen:
stylus: kompilera: ,
Inuti sammanställa uppgift vi har skapat en alternativ område.
Vi har använt det här området för att ställa in komprimera alternativ till falsk, för att vi ska göra vår kodoptimering senare.
Vi har också ställt in banor alternativ till [ 'Källa / stylus'] så om Stylus ser @importera direktivet samtidigt som det sammanställs kommer det att leta efter filer som ska importeras i projektets "source / stylus" -mapp:
stylus: compile: options: compress: false, paths: ['source / stylus'],
Sedan efter alternativ område vi har lagt till en filer område för att styra utdatakatalog och filnamn, samt ingångskatalog och filnamn.
Vi har satt utgångspunkten för vår sammanställda CSS-fil för att vara 'Build / style.css', medan Stylus-filen som ska bearbetas är 'Källa / penna / main.styl'.
stylus: kompilera: alternativ: komprimera: felaktiga sökvägar: ['source / stylus'], filer: 'build / style.css': 'source / stylus / main.styl',
Nu, med din terminal pekad på din huvud rotmapp kör kommandot:
grunt stylus
Titta inuti din "build" -mapp och du bör se en nybildad "style.css" -fil.
Vi flyttar nu ganska snabbt genom konfigurationen av varje återstående uppgift. Sätt in varje block av config-kod direkt efter det du tidigare lagt till.
Lägg till den här koden:
autoprefixer: compile: files: 'build / style.css': 'build / style.css',,,
Kör autoprefixer-uppgiften med:
grunt autoprefixer
Om du inspekterar din "build / style.css" -fil bör du nu se prefix som läggs till vid behov.
Lägg till den här koden:
cssmin: ren: files: 'build / style.css': 'build / style.css',
Kör cssmin-uppgiften med:
grunt cssmin
Om du tittar på din "build / style.css" igen nu ser du att den har snyggt rengjorts och komprimerats för dig.
Lägg till den här koden:
jade: kompilera: filer: [expand: true, cwd: "source / jade", src: "* .jade", dest: "build", ext: ".html"],
Kör jadeuppgiften med:
grunt jade
Om du tittar inuti din "bygg" -mapp, borde du nu se en HTML-fil som motsvarar varje Jade-fil du hade i mappen "source / jade".
Lägg till den här koden:
uglify: bower_js_files: files: 'build / output.min.js': ['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js'],
I det här exemplet ser vi att vi refererar till de platser i Bower-komponenterna som vi installerat tidigare.
Vi tar tag i de fullständiga utvidgade versionerna av både jQuery och Modernizr från vår "bower_components" -mapp, och sammanfogar dem och minifrerar dem till en ny fil med namnet "output.min.js". Det här är ett bra sätt att distribuera skript du hanterar med Bower.
Kör uglify-uppgiften med:
grunt uglify
Du borde nu se en ny "output.min.js" -fil i din "build" -mapp.
Hittills kan det verka som om vi bara bytt ut ett kommando för att göra en viss uppgift med ett annat kommando, men vad vi faktiskt har gjort ligger på grunden för var Grunt verkligen börjar skina.
Nyckeln är Grunts förmåga att få en uppgift att driva en annan uppgift. Så nu ska vi installera en Kolla på uppgift som kommer att övervaka vissa filer för ändringar, kör sedan vår nål och jade uppgifter automatiskt för oss.
Lägg till den här koden:
titta på: stylus: files: ['source / stylus / *. styl'], uppgifter: ['stylus', 'autoprefixer', 'cssmin'], jade: filer: ['source / jade / *. jade '], uppgifter: [' jade '],
Vi har först lagt till vår Kolla på uppgift, och sedan inuti det har vi ett område för nål och för jade.
De filer alternativ i varje uppsättning vilka filer som ska ses för ändringar. De uppgifter alternativ uppsättningar vilka uppgifter ska då utföras när förändringar händer och i vilken ordning.
För nål, vi har ställt upp klockan uppgiften att övervaka alla ". stil" -filer i mappen "Källa / pennan", och när den ser förändringar kommer den att köra nål, autoprefixer och cssmin uppgifter i den ordningen.
Så nu när klockuppgiften är igång är allt du behöver göra att spara någon av dina Stylus-filer och du får automatiskt en kompilerad, autofixad och optimerad CSS-fil som skrivs in i "build" -mappen för dig.
På samma sätt för jade, Vi har satt alla ".jade" -filer i mappen "source / jade" som ska övervakas, och när en sparas jade uppgiften kommer automatiskt att köras och kompilera motsvarande HTML-fil i "build" .
Kör klockuppgiften med:
grunt klocka
Stoppa det igen med antingen:
Vid denna tidpunkt kanske du undrar, vad sägs om JavaScript-uglify-uppgiften?
Anledningen till att vi inte inkluderade den med Kolla på uppgiften är att du inte kommer att göra ändringar i jQuery och Modernizr-filer som uglify-uppgiften behandlas. Så för att Kolla på Uppgiften svarar bara på ändringar som aldrig skulle utlösas för att bearbeta din JavaScript.
Istället kommer vi att utnyttja standard Uppgift som kan ställas in i din Gruntfile. Det här är den uppgift som kommer att köras om du använder kommandot grymta i sig själv med inget bifogat.
Efter din sista grunt.loadNpmTasks linje, men före stängningen ; av filen, lägg till den här raden:
Accentsconagua
grunt.registerTask ('default', ['stylus', 'autoprefixer', 'cssmin', 'jade', 'uglify']); Detta ställer in standard uppgift att köra nål, autoprefixer, cssmin, jade och då uglify.
Så nu om du kör kommandot grymta utan något efter det kommer det att bygga hela ditt projekt, inklusive din JavaScript.
När vi kommer fram kommer vi att upprepa processen vi just har lärt oss, men genom att använda Gulp för att hantera vår uppgift i stället för Grunt.
