Share
Så langt har du lært hvordan du gjør ting som å kompilere kode, autoprefixing, rengjøring, komprimering og reduksjon av alt bare ved å skrive noen ord. Dette er flott, men hva om du har et prosjekt som vil kreve at du kjører flere av disse kommandoene, den ene etter den andre, igjen og igjen til du fullfører arbeidet ditt? For eksempel:
Selv med bare noen få ord per kommando vil det raskt bli kjedelig i løpet av en typisk sideopprettingsprosess.
Dette er hvor "Oppgaveløpere" kommer inn for å lagre dagen. Med oppgaveløpere kan du sette opp en enkelt fil i prosjektet ditt som definerer alle oppgavene du trenger for å kjøre på prosjektet, og rekkefølgen de trenger for å kjøre inn. I denne filen kan du deretter definere egendefinerte kommandoer du kan bruke til å utføre alle de oppgaver en gang.
Du lærer hvordan du konfigurerer løpere på denne måten gjennom denne opplæringen, og i prosessen ser du også et eksempel på å få inn skript fra Bower-pakker for effektiv distribusjon i prosjektene dine..
Merk: Denne opplæringen forutsetter at du har fullført alle tidligere opplæringsprogrammer i denne serien. Hvis du ikke har gjort det, vil du finne det nyttig å gå gjennom dem før du starter her.
Det er faktisk flere oppdragsløpere som er tilgjengelige akkurat nå, men i denne veiledningen vil vi fokusere på de to som for tiden er mest populære: Grunt and Gulp.
Det er flere tekniske forskjeller mellom de to prosjektene, som jeg ikke vil gå inn i nå. Jeg vil heller ikke fortelle deg hvilken av de to du burde bruke. I stedet anbefaler jeg å følge trinnene for å bruke begge under, og deretter bestemme selv hvilken du foretrekker.
Vi skal skape et prosjekt som ser på og automatisk samler Stylus og Jade, og optimaliserer CSS og JavaScript. Vi oppnår dette først ved å bruke Grunt, og deretter (i neste opplæring) ved hjelp av Gulp.
Til å begynne med må vi sette opp et eksempelprosjekt med noen filer inni det som vår oppgaveløper kan operere på. Opprett en mappe med navnet "Grunt Project", legg deretter til en undermappe med navnet "build" og en undermappe kalt "kilde".
I «kilde» -mappen legger du til to nye undermapper med navnet "stylus", "jade". Legg til noen eksempelfiler av den aktuelle typen til hver mappe.
Filene kan inneholde hvilken som helst kode du vil ha, bare slik at du har noe du kan se kompileringsprosessen jobber med.
Tips: Hvis du ikke er sikker på hvilken kode du vil legge til, kan du prøve å ta noen prøvekode fra Codepen: pennene merket penn, pennor merket jade.
For eksempel:
Vi skal da også dra nytte av det vi lærte om Bower i en tidligere leksjon, og ta tak i nedlastinger av jQuery og Modernizr, som vi vil kombinere og redusere senere.
Kjør kommandoene:
bower install jquery - save
bower install modernizr - save
Gjør nå en duplikat av hele prosjektmappen din og gi den navnet "Gulp Project".
På denne måten kan du følge trinnene med å bruke Grunt i mappen "Grunt Project", og trinnene for bruk av Gulp i mappen "Gulp Project".
For at Grunt-kommandoer skal virke, må du installere CLI (kommandolinjegrensesnitt). Installer den globalt med:
[sudo] npm installere -g grunt-cli
Hvert prosjekt som bruker Grunt, trenger en "package.json" -fil i rotmappen.
Vi dekket å sette opp en "package.json" -fil ved å bruke kommandoen npm init i den forrige Taming 3parts pakken opplæringen. Hvis du ikke har fullført den delen, vennligst gå tilbake og følg den nå.
Installer Grunt inn i prosjektet ditt og lagre det som en utviklingsavhengighet med:
npm installere grunt - save-dev
Hvert Grunt-prosjekt må også ha det som kalles a Gruntfile i rotmappen.
En Gruntfile er en fil med navnet "Gruntfile.js", eller "Gruntfile.coffee" hvis du foretrekker å skrive i CoffeeScript. I vårt tilfelle jobber vi med JavaScript, så legg til en fil med navnet "Gruntfile.js" til rotmappen din.
Når du fyller inn Gruntfile, kan du bestemme hvilke kommandoer som vil utløse hvilke oppgaver som skal kjøres. Du kan starte med å bare legge til et grunnleggende skall i Gruntfile. Vi konfigurerer den faktiske konfigurasjonskoden din senere.
Legg til følgende kode i Gruntfile.js:
module.exports = funksjon (grunt) ;
Du vil huske at når du ønsket å bruke pakker med npm eller Bower, måtte du søke på riktig sted for å få versjoner designet for å fungere med hvert system.
Det samme gjelder når du bruker pakker med Grunt. Gjennom Grunt kan du få tilgang til et økosystem med plugins, som egentlig er wrappers rundt vanilje npm-pakker. Disse pluginene leveres fortsatt via npm, men de er spesielt rustet til å jobbe med Grunt
For eksempel, i stedet for npm-pakken UglifyJS, med Grunt kan du bruke plugin "grunt-contrib-uglify".
Du kan søke etter Grunt-plugins på http://gruntjs.com/plugins
For vårt prosjekt vil vi installere disse seks Grunt-pluginene:
Hver enkelt vil bli installert i prosjektmappens "node_modules" undermappe, og lagret som en utviklingsavhengighet.
Kjør hver av disse kommandoene, en om gangen, med din terminal peket på mappen "Grunt Project":
npm installere grunt-contrib-stylus - save-dev
npm installere grunt-autoprefixer - save-dev
npm installere grunt-contrib-cssmin - save-dev
npm installere grunt-contrib-jade - save-dev
npm installere grunt-contrib-uglify - save-dev
npm installere grunt-contrib-watch - save-dev
Når du er ferdig, bør du se disse mappene i prosjektets "node_modules" -mappe:
Nå skal vi bruke grunt.loadNpmTasks metode for å aktivere våre plugins.
I de krøllete parentesene på din eksisterende Gruntfile legger vi til seks linjer, en for å aktivere hvert grunt-plugin, slik som:
module.exports = funksjon (grunt) // Last grunt plugins. grunt.loadNpmTasks ( 'grov-contrib-stylus'); grunt.loadNpmTasks ( 'grov-autoprefixer'); grunt.loadNpmTasks ( 'grov-contrib-cssmin'); grunt.loadNpmTasks ( 'grov-contrib-jade'); grunt.loadNpmTasks ( 'grov-contrib-uglify'); grunt.loadNpmTasks ( 'grynt-contrib-watch'); ;
Denne koden registrerer navnet på hvert plugin som en grunt-kommando, slik at vi kan bruke den kommandoen for å få pluginet til å løse en oppgave. For eksempel vil vi bruke kommandoen grunt stylus å kjøre en stylus oppgave,grunt autoprefixer å kjøre en autoprefixer oppgave og så videre.
Våre grunt plugins er installert og kommandoene som skal brukes er operative, men hvis du brukte dem akkurat nå, ville du ikke se noe skje. Årsaken er at vi må sette opp en konfigurasjon for å avgjøre hva hver oppgave egentlig skal gjøre.
Dette gjøres ved å legge til grunt.initConfig metode til Gruntfile, og deretter overføre informasjon gjennom det som dikterer hvordan du vil at hver oppgave skal kjøres.
Først legger vi til grunt.initConfig metode over linjene du nettopp lagt til for å laste grunt plugins:
grunt.initConfig ();
Nå skal vi gi oss plass til å sende vår konfigurasjonsinformasjon gjennom. Legg til åpning og lukking i hakkene innenfor de vanlige parentesene, og legg deretter til en tom linje mellom dem:
grunt.initConfig ();
Nå kan vi gå videre og legge til konfigurasjonen for hvert av programtilleggene vi installerte.
Hver plugin har sitt eget utvalg av innstillinger du kan bruke, og disse alternativene er detaljert på sidene som er koblet til i "Install Grunt Plugins" -delen ovenfor.
Du kan også lese full detaljer om konfigurering av Grunt-oppgaver her: http://gruntjs.com/configuring-tasks
Vi skal begynne med å legge til konfigurasjon for vår pekepenn oppgave.
I mellom de krøllete parentesene du nettopp har lagt til, legger du til følgende kode på den tomme linjen:
stylus: compile: options: komprim: false, paths: ['kilde / stylus'], filer: 'build / style.css': 'source / stylus / main.styl',
Din Gruntfile skal nå se slik ut:
Moduler: compunt: false, paths: ['source / stylus'], filer: 'build / style.css': ' kilde / stylus / main.styl ',); // Last grunt plugins. grunt.loadNpmTasks ( 'grov-contrib-stylus'); grunt.loadNpmTasks ( 'grov-autoprefixer'); grunt.loadNpmTasks ( 'grov-contrib-cssmin'); grunt.loadNpmTasks ( 'grov-contrib-jade'); grunt.loadNpmTasks ( 'grov-contrib-uglify'); grunt.loadNpmTasks ( 'grynt-contrib-watch'); ;
La oss gå gjennom en sammenbrudd av koden vi har lagt til her. Vi vil ikke bryte ned hver eneste oppgave, men å se på denne skal gi deg en ide om hvilken type syntaks som brukes når du setter sammen Grunt-oppgavekonfigurasjonen.
Som nevnt ovenfor har hver plugin forskjellige konfigurasjonsalternativer, så når du bruker en ny plugin, ta en god titt på bruksinstruksjonene den tilbyr.
Det første vi har gjort er å legge til en oppføring i vår config for vår pekepenn Oppgave med koden:
stylus: ,
Innsiden som vi har lagt til en kompilere oppføring for å kontrollere hva som skjer under kompilering:
stylus: compile: ,
Inne i kompilere Oppgave vi har opprettet en opsjoner område.
Vi har brukt det området til å angi komprimere alternativ til falsk, fordi vi skal gjøre vår kodeoptimalisering senere.
Vi har også satt baner alternativ til [ 'Kilde / stylus'] så hvis Stylus ser @importere Direktivet under samlingen vil se etter filer som skal importeres i prosjektets kilde / stylus-mappe:
stylus: compile: options: compress: false, paths: ['kilde / stylus'],
Så etter opsjoner område vi har lagt til en filer område for å kontrollere utdatakatalog og filnavn, samt inngangskatalog og filnavn.
Vi har satt utgangsstedet til vår kompilerte CSS-fil for å være 'Build / style.css', mens Stylus-filen som skal behandles, er 'Kilde / pekepenn / main.styl'.
stylus: compile: options: komprim: false, paths: ['kilde / stylus'], filer: 'build / style.css': 'source / stylus / main.styl',
Nå, med din terminal peket på hovedrotmappen din, kjør kommandoen:
grunt stylus
Se i "bygg" -mappen din, og du bør se en nyopprettet "style.css" -fil.
Vi beveger oss nå ganske raskt gjennom konfigurasjonen av hver gjenværende oppgave. Sett inn hver blokk av config-kode umiddelbart etter den du tidligere har lagt til.
Legg til denne koden:
autoprefixer: compile: files: 'build / style.css': 'build / style.css',,,
Kjør autoprefixer oppgaven med:
grunt autoprefixer
Hvis du inspiserer filen "build / style.css", bør du nå se prefikser lagt til når det er nødvendig.
Legg til denne koden:
cssmin: ren: files: 'build / style.css': 'build / style.css',
Kjør oppgaven med cssmin med:
grunt cssmin
Hvis du ser på "build / style.css" igjen nå, vil du se at det har blitt pent rengjort og komprimert for deg.
Legg til denne koden:
jade: compile: files: [expand: true, cwd: "kilde / jade", src: "* .jade", dest: "build", ext: ".html"],
Kjør jadeoppgaven med:
grunt jade
Hvis du ser inn i mappen "build", bør du nå se en HTML-fil som samsvarer med hver Jade-fil du hadde i mappen "source / jade".
Legg til denne koden:
uglify: bower_js_files: files: 'build / output.min.js': ['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js'],
I dette eksemplet ser vi at vi refererer til plasseringene til Bower-komponentene vi installerte tidligere.
Vi tar de fulle utvidede versjonene av både jQuery og Modernizr ut av vår "bower_components" -mappe, og sammenkompilerer dem og minifiserer dem til en ny fil med navnet "output.min.js". Dette er en fin måte å distribuere skript du administrerer med Bower.
Kjør uglify oppgaven med:
grunt uglify
Du bør nå se en ny "output.min.js" -fil i mappen "build".
Så langt kan det virke som om vi bare har erstattet en kommando for å gjøre en bestemt oppgave med en annen kommando, men det vi faktisk har gjort ligger i grunnlaget for hvor Grunt virkelig begynner å skinne.
Nøkkelen er Grunts evne til å ha en oppgave å kjøre en annen oppgave. Så nå skal vi sette opp en se oppgave som vil overvåke visse filer for endringer, så kjør vår pekepenn og jade oppgaver automatisk for oss.
Legg til denne koden:
se: stylus: files: ['source / stylus / *. styl'], oppgaver: ['stylus', 'autoprefixer', 'cssmin'], jade: files: ['source / jade / *. jade '], oppgaver: [' jade '],
Vi har først lagt til vår se oppgave, og så inne at vi har oppsett et område for pekepenn og for jade.
De filer alternativ i hvert sett hvilke filer som skal overvåkes for endringer. De oppgaver alternativsett hvilke oppgaver skal da utføres når endringer skjer, og i hvilken rekkefølge.
Til pekepenn, Vi har satt klokkeoppgaven til å overvåke alle ". stil" -filer i mappen "kilde / stylus", og når den ser endringer, vil den kjøre pekepenn, autoprefixer og cssmin oppgaver i den rekkefølge.
Så nå når klokkeoppgaven kjører, er alt du trenger å gjøre, lagre noen av dine Stylus-filer, og du får automatisk en kompilert, autoprefixed og optimalisert CSS-fil skrevet inn i "build" -mappen for deg.
Likeledes for jade, Vi har satt alle ". jade" -filer i "kilde / jade" -mappen som skal overvåkes, og når en er lagret jade oppgaven vil automatisk kjøre og kompilere den tilsvarende HTML-filen i "build" .
Kjør klokkeoppgaven med:
grunt ur
Stopp det igjen med enten:
På dette punktet lurer du kanskje på hva med JavaScript-ugliseringsoppgaven?
Grunnen til at vi ikke inkluderte den med se oppgaven er at du ikke skal gjøre endringer i jQuery- og Modernizr-filene som uglify-oppgaven behandler. Så fordi se oppgaven reagerer bare på endringer som det aldri ville bli utløst for å behandle JavaScript.
I stedet skal vi gjøre bruk av misligholde Oppgave som kan settes inn i Gruntfile. Dette er oppgaven som vil bli kjørt hvis du bruker kommandoen grynte av seg selv med ingenting vedlagt.
Etter det siste grunt.loadNpmTasks linje, men før avslutningen ; av filen, legg til denne linjen:
Accentsconagua
grunt.registerTask ('standard', ['stylus', 'autoprefixer', 'cssmin', 'jade', 'uglify']); Dette setter misligholde Oppgave å løpe pekepenn, autoprefixer, cssmin, jade og så uglify.
Så nå hvis du kjører kommandoen grynte uten noe etter det, vil det bygge hele prosjektet ditt, inkludert JavaScript.
Når vi kommer opp neste, gjentar vi prosessen vi nettopp har lært, men ved å bruke Gulp til å håndtere vår oppgave i stedet for Grunt.
