Share
Som webdesigner er det tre språk du er ganske garantert å jobbe med på en eller annen måte: CSS, HTML og JavaScript. I denne opplæringen skal du utnytte kommandolinjen for å gjøre utviklingen med disse tre språk mer kraftfull og mer effektiv.
Du lærer hvordan du bruker kommandolinjen til å:
Merk: denne opplæringen antar at du allerede har fullført de tidligere opplæringene i denne serien. Hvis du ikke har det, vil du finne det nyttig å gå tilbake og følge dem før du fortsetter.
Hvis du aldri har jobbet med CSS preprosessorer før, slipp alt umiddelbart og prøv en ut. Når du finner en preprosessor du liker som passer til kodestilen din, er det sannsynlig at du aldri vil kode inn rå CSS igjen.
De tre preprosessorer som generelt anses å være de som skal velge mellom, er Stylus, Sass / SCSS og LESS. Tuts + har et fantastisk utvalg av opplæringsprogrammer og kurs for å hjelpe deg å lære å skrive i syntaksen til alle tre preprosessorer.
I denne opplæringen skal vi dekke hvordan du kan bruke kommandolinjen til å kompilere kode for hver av de tre.
Hver preprosessor bruker har en favoritt, og min er Stylus. Den bruker en minimal syntaks som kan skrives veldig raskt, har svært kraftig funksjonalitet, og støttes av flotte tredjepartsbiblioteker som Jeet og Kouto-Swiss.
Du kan lese alt om Stylus på: http://stylus-lang.com/
Hvis du vil installere Stylus globalt, slik at du kan bruke den til å kompilere ".styl" -filer hvor som helst, kjør denne kommandoen:
[sudo] npm installere stylus -g
Den enkleste måten å kompilere med Stylus er å bruke denne ene linjekommandoen:
pekepenn < example.styl > example.css
Denne kommandoen samler "example.styl" til "example.css" i samme katalog.
Å ødelegge det vi har pekepenn for å starte kommandoen. Så bruker vi en < example.styl for å indikere Stylus-inputfilen, etterfulgt av > example.css å angi navnet på CSS-filen vi vil ha opprettet.
Du har også muligheten til å legge til flere flagg for denne kommandoen, for eksempel å bruke --komprimere flagg for å fjerne hvitt plass fra den resulterende CSS-filen:
stylus - komprimere < example.styl > example.css
Som et alternativ til å samle en fil om gangen, kan du kompilere alle Stylus-filene i en katalog i CSS-filer i en annen katalog. For å gjøre dette, etter pekepenn kommando, angi kildemappen, bruk deretter --ute flagg etterfulgt av målmappen.
For eksempel, for å kompilere alle Stylus-filene fra en mappe kalt "source_files" til "assets / css" bruk:
stylus source_files --out assets / css
Merk: mappen du samler inn må allerede eksistere før du kjører kommandoen, da den vil mislykkes hvis den ikke finner den angitte mappen for å utdata CSS-filer til.
Det finnes flere andre alternativer du kan utnytte når du bruker Stylus via kommandolinjen. For å lese alt om dem, besøk: http://stylus-lang.com/docs/executable.html
Sass er sannsynligvis den mest populære forprosessoren på dette tidspunktet. Det er utrolig kraftig i det du kan oppnå med det og har et veldig stort og aktivt samfunn. Den støttes av kjente tredjepartsbiblioteker som Compass, Bourbon og Susy.
Les mer om Sass på: http://sass-lang.com/
Du har to alternativer når det gjelder å samle Sass på maskinen din: Du kan enten bruke Ruby til å håndtere det, eller du kan bruke LibSass.
Sass ble først opprettet for å kjøre på Ruby, og som sådan hvis du leter etter 100% full funksjonen fullstendighet og støtte, er det alternativet du kanskje ønsker å velge. For eksempel, hvis du vil bruke Compass, er den enkleste måten å holde fast i Ruby-kompilering.
LibSass ble opprettet som et alternativ, og et av alternativene det gjør tilgjengelig er å kompilere sass via en npm-pakke i stedet. Denne tilnærmingen kompilerer sass mye raskere, og bringer en kompileringstid på rundt 5 sekunder gjennom Ruby til under et halvt sekund gjennom LibSass. Det kan imidlertid hende du finner visse funksjoner, og tredjepartskoden er ikke støttet.
Som du velger, er helt ned til personlig preferanse, men som en tommelfingerregel foreslår jeg å gå med LibSass for fart med mindre det er noe spesifikt (som Kompass) som du trenger Ruby-kompilering.
Uansett hvilket valg du dekker, bruker vi begge, slik at du er satt i begge hendelser.
For å kompilere Sass via Ruby må du først ha Ruby installert på maskinen din.
Hvis du er på Mac, har du lykke da Ruby allerede kommer forhåndsinstallert, slik at du ikke trenger å gjøre noe.
Hvis du er på Windows, gå til http://rubyinstaller.org/ og last ned og kjør installasjonsprogrammet du finner der. Deretter installerer du Sass ved å kjøre denne kommandoen:
[sudo] gem install sass
Sass skal automatisk lastes ned og installeres for deg. For å dobbeltsjekke installasjonen har vært vellykket, kjør kommandoen:
sass -v
Du bør se versjonen og navnet på Sass-installasjonen som vises i terminalen din:
For å kompilere en fil ved hjelp av Ruby sass bare skriv inn sass, etterfulgt av navnet på inngangsfilen, et mellomrom, deretter navnet du vil ha din kompilerte CSS-fil for å ha:
sass source_file.scss compiled_file.css
Ruby Sass har også en innebygget "watch" -funksjon (vi vil dekke mer om å se senere) som vil se filene dine for endringer og automatisk kompilere dem hver gang de er lagret.
For å bruke det, legg til --se flagg til kommandoen din, og skill deretter navnene på kilden og kompilert fil med et kolon i stedet for et mellomrom:
sass - watch source_file.scss: compiled_file.css
Du kan også spesifisere hele kataloger for å se og sende til, i stedet for enkeltfiler, slik som:
sass - watch kilde / sass: eiendeler / css
Når du ser på er initiert, bør du se noe slikt i terminalen din:
For å lese om alle tilgjengelige alternativer via kommandolinje med Ruby Sass kjøre:
sass --hjelp
En avlesning av kommandolinjens dokumenter vil bli vist i terminalen din:
Du kan bruke dette --hjelp flagg for å få mer informasjon om hvilken kommando du bruker. Skriv bare navnet på kommandoen etterfulgt av --hjelp og du vil få informasjon som ligner på det ovenfor i hvert tilfelle.
Hvis du går med LibSass, kan du komme i gang med samme metode du har brukt til å installere npm-pakker tidligere i denne opplæringsserien.
LibSass selv er skrevet i C / C ++, men det er ulike implementeringer av det, inkludert noen gjort for å jobbe med Node.js. I vårt tilfelle bruker vi pakke node-sass.
For å installere node-sass globalt, kjør denne kommandoen:
[sudo] npm installere node-sass -g
Å kompilere en filtype node-sass etterfulgt av navnet på inngangsfilen og navnet du vil at din kompilerte CSS-fil skal ha:
node-sass source_file.scss compiled_file.css
For å kontrollere katalogen din CSS-fil er kompilert til, legg til --produksjon flagg og målkatalog mellom navnene på inn- og utgangsfiler:
node-sass source_file.scss --output assets / css compiled_file.css
Som Ruby Sass bruker node-sass også --se flagg for å aktivere automatisk kompilering av filene dine ved endring:
node-sass - watch source_file.scss compiled_file.scss
Du kan også angi hele kataloger å se på, og å sende ut til, i stedet for enkeltfiler:
node-sass - watchkilde / sass / * --outputs / css
Når du bruker node-sass til å se en hel katalog, må du huske å inkludere / * på slutten for å angi at du vil ha alle filene innenfor.
Når du har en "watch" -prosess som kjører, kan du stoppe den med enten:
Den mindre forprosessoren er også veldig populær, og er trolig mest kjent for sin ansettelse i Twitter Bootstrap-rammeverket. MINDRE er en flott første preprosessor for å begynne å jobbe med som det ligner på å skrive i rett CSS.
Les mer om LESS på: http://lesscss.org/
Hvis du vil installere mindre globalt, slik at du kan bruke den til å kompilere ".frie" filer hvor som helst, kjør denne kommandoen:
[sudo] npm installerer mindre -g
Åpne en terminal i mappen, husk den MINDRE filen du vil kompilere, og bruk kommandoen lessc etterfulgt av navnet på filen, a > symbol, så navnet du vil at din kompilerte CSS-fil skal ha:
lessc source_file.less> compiled_file.css
Autoprefixer er en npm-pakke som sjekker med CanIUse.com for å få oppdatert informasjon om hvilke CSS-egenskaper som trenger leverandørprefikser, og hvilke som ikke gjør det. Den håndterer deretter automatisk å legge til nødvendige leverandørprefikser i koden din.
Dette kan være utrolig nyttig som, med mindre du overvåker nettleseroppdateringer hele tiden, kan du enkelt finne deg selv, inkludert nettleserprefikser du ikke trenger lenger. Det betyr også at du kan skrive hele CSS uten å tenke på prefikser, og la Autoprefixer ta vare på dem for deg.
For eksempel vil autoprefixer slå denne koden:
en display: flex;
... inn i dette:
en display: -webkit-boks; display: -webkit-flex; display: -ms-flexbox; display: flex;
Les mer om Autoprefixer på: https://www.npmjs.com/package/autoprefixer
Installer Autoprefixer globalt med:
[sudo] npm installere autoprefixer -g
For å autoprefix en CSS-fil, bruk følgende kommando:
autoprefixer style.css
I motsetning til å samle en preprosessorfil, vil dette ikke opprette en andre fil som standard. Filen du målretter vil bli oppdatert, med de korrekte prefikser lagt til direkte.
Hvis du gjøre Ønsker Autoprefixer å generere et sekund, separat fil legg til --produksjon flagg etterfulgt av et navn for din prefixed css-fil:
autoprefixer unprefixed.css --output prefixed.css
Du vil alltid ha CSS du distribuerer på nettstedene dine for å bli knust ned til den minste størrelsen som er mulig. For å oppnå dette kan du bruke optimaliseringsteknikker av:
Stylus, Ruby Sass og node-sass alle har muligheten til å komprimere CSS under kompilering.
I Stylus, inkludere --komprimere flagg:
stylus - komprimere < source_file.scss > compiled_file.css
I Ruby Sass inkluderer --stil flagg, etterfulgt av komprimert:
sass source_file.scss compiled_file.css - stil komprimert
I node-sass legg til --utgang-stil flagg etterfulgt av komprimert:
node-sass -output-stil komprimert source_file.scss compiled_file.css
Hvis du ikke bruker CSS-forprosessorer, eller du bare vil ha maksimal kodeoptimalisering, kan du bruke ren-css-pakken som vil sette CSS-filene dine gjennom dybere komprimeringsprosesser.
Vanlige komprimeringsprosesser fjerner vanligvis bare hvit plass og kommentarer fra CSS. Clean-css-pakken kan på den annen side også gjøre ting som:
Sammenføyning av dupliserte selektorer kan være nyttig, hvis du for eksempel vil ha alt oppsettet for en bestemt klasse først i en "layout.css" -fil, mens fargen for samme klasse først er i en "colors.css".
Avrunding av tall er flott for når du har brukt en preprosessor-funksjon for å konvertere en verdi til rem-enheter, og du ender med noe som 2.3649858573rem. Med clean-css vil tallet bli avrundet til to desimaler, og bringe det til en mye tidligere 2,36rem verdi.
Du kan lese mer om clean-css på: https://github.com/jakubpawlowicz/clean-css
Installer clean-css globalt med kommandoen:
[sudo] npm installerer clean-css -g
Slik rengjør du en CSS-filbruk:
cleancss style.css
Merk: Selv om pakkenavnet "clean-css" har en bindestrek i det, må du huske å bruke det cleancss uten en bindestrek for å starte kommandoene dine.
For å angi et nytt filnavn for clean-css for å generere bruk, bruk -o flagg etterfulgt av det nye filnavnet, før navnet på filen du målretter mot:
cleancss -o cleaned.css style.css
Det finnes flere andre kommandoalternativer for clean-css, som du kan lese alt om på: Hvordan bruke Clean CSS CLI.
Jade er et fantastisk språk som samler inn i HTML, og gjør det mulig for deg å både skrive koden din i stenografi, slik at utviklingen er mye raskere, og opprett dine egne templeringssystemer, slik at du kan redde deg på omskrivningskoden.
Les mer om Jade på: https://www.npmjs.com/package/jade
For å installere Jade kjøre globalt kommandoen:
[sudo] npm installere jade -g
Jade, laget av samme person som Stylus, bruker den samme grunnleggende kommandosyntaxen til < og > tegn for å kompilere en fil:
jade < index.jade > index.html
Denne kommandoen samler "index.jade" til "index.html" i samme katalog.
For å kompilere alle Jade-filene i en bestemt katalog, bruk:
jade dir_name
For å angi katalogen vil du at HTML-filene dine skal skrives for å plassere --ute flagg mellom navnet på inngangs- og utgangskatalogene:
jade src_dir --out html_dir
Å bruke Jade se funksjon for automatisk kompilering ved lagring, passere --se flagg rett etter jade-kommandoen.
For enkle filer:
jade - klokka < index.jade > index.html
Eller for fulle kataloger:
jade - watch dir_name
jade - watch dir_name - ut html_dir
Akkurat som vi vil ha CSS-filene vi distribuerer for å bli optimalisert, så vil vi også levere våre JavaScript-filer på den mest effektive måten.
Det er vanlig at vi har flere JS-filer som går inn i våre prosjekter, for eksempel å ha Modernizr, jQuery og vår egen tilpassede kode, for eksempel, men vi vil også minimere antall http-forespørsler våre nettsteder gjør. I tillegg vil vi sikre at lastetiden for JavaScript er super fort.
Den beste måten å håndtere begge problemene er å sammenkoble våre JavaScript-filer samtidig til en enkelt fil, noe som betyr at vi bare trenger en http-forespørsel for å laste den, og redusere den resulterende filen slik at den er så liten som mulig.
Vi bruker UglifyJS-pakken for å ta vare på denne prosessen.
For å installere uglify-js globalt kjøre:
[sudo] npm installerer uglify-js -g
Hvis du vil kombinere to JavaScript-filer, og deretter stripe mellomrom og kommentarer fra den resulterende filen, bruk uglifyjs kommando etterfulgt av navnene til hver av kildefilene dine med mellomrom i mellom. Etter det inkluderer --produksjon flagg og navnet du vil ha den nye kombinert og minifisert filen til å ha:
uglifyjs input1.js input2.js --output input.min.js
I tillegg til standard stripping av whitespace og kommentarer, kan du også legge til komprimering som faktisk vil endre koden for å redusere størrelsen. For å gjøre dette legger du til --komprimere flagg på slutten av kommandoen:
uglifyjs input1.js input2.js --output input.min.js --compress
Et annet optimaliseringsalternativ som er tilgjengelig, er å "mangle" koden, som vil gjøre ting som crunching variabel, funksjon og argument navn ned til enkelt tegn. For å bruke dette alternativet legg til --mangle flagg på slutten av kommandoen:
uglifyjs input1.js input2.js --output input.min.js --mangle
Du kan også bruke både komprimering og mangling ved å passere begge flaggene:
uglifyjs input1.js input2.js --output input.min.js --mangle --compress
Les mer om kommandoene du kan kjøre med UglifyJS på: https://www.npmjs.com/package/uglify-js
Hvis du kombinerer og / eller minifiserer tredjepartsskript som jQuery, Modernizr og så videre, må du kontrollere at du bruker de fullstendige utvidede versjonene av disse filene. Det er generelt en dårlig ide å omformulere filer som allerede er blitt minifisert, da du kan bryte funksjonaliteten.
Du kan identifisere filer som allerede er blitt minifisert, da de vanligvis vil følge navngivningskonvensjonen "name.min.js", mens den utvidede versjonen av filen vil bli "name.js".
Nå vet du hvordan du skal fylle ut noen utrolig nyttige oppgaver med ulike kommandoer, men hva om du kunne fullføre alle oppgavene ditt prosjektet trenger alt på samme tid med en enkelt kommando?
I den neste opplæringen lærer du hvordan du gjør akkurat det, ved å bruke oppgaveløpere til å konfigurere alle oppgavene prosjektet ditt trenger, slik at all kompilering, autoprefixing, kombinering og optimalisering kan gjøres samtidig og på bare noen sekunder.
Jeg ser deg i neste opplæring!
Accentsconagua