Share
Als webdesigner zijn er drie talen waarmee je vrijwel zeker op de een of andere manier kunt werken: CSS, HTML en JavaScript. In deze zelfstudie gaat u gebruik maken van de opdrachtregel om uw ontwikkeling met deze drie talen krachtiger en efficiënter te maken.
U leert hoe u de opdrachtregel gebruikt om:
Notitie: deze tutorial gaat ervan uit dat je de vorige tutorials in deze serie al hebt voltooid. Als u dat niet hebt gedaan, vindt u het handig om terug te gaan en deze te volgen voordat u doorgaat.
Als je nog nooit met CSS-preprocessors hebt gewerkt, moet je alles meteen laten vallen en een uitproberen. Zodra u een preprocessor heeft gevonden die u bevalt en die past in uw coderingsstijl, is het waarschijnlijk dat u nooit meer in onbewerkte CSS zult coderen.
De drie preprocessors die over het algemeen worden beschouwd als degenen om uit te kiezen, zijn Stylus, Sass / SCSS en LESS. Tuts + heeft een geweldig aanbod van zelfstudies en cursussen om u te helpen te leren schrijven in de syntaxis van alle drie preprocessors.
In deze zelfstudie gaan we in op hoe u de opdrachtregel kunt gebruiken om code te compileren voor elk van de drie.
Elke preprocessor-gebruiker heeft een favoriet en de mijne is Stylus. Het gebruikt een minimale syntaxis die zeer snel kan worden geschreven, zeer krachtige functionaliteit heeft en wordt ondersteund door grote bibliotheken van derde partijen zoals Jeet en Kouto-Swiss.
U kunt alles over Stylus lezen op: http://stylus-lang.com/
Als u Stylus wereldwijd wilt installeren, zodat u het overal kunt gebruiken om ".styl" -bestanden te compileren, voert u deze opdracht uit:
[sudo] npm stylus -g installeren
De eenvoudigste manier om te compileren met Stylus is om deze opdracht met één regel te gebruiken:
schrijfstift < example.styl > example.css
Deze opdracht compileert "example.styl" in "example.css" in dezelfde map.
Om het op te splitsen hebben we schrijfstift om het commando te starten. Dan gebruiken we een < example.styl om het stylusinvoerbestand aan te duiden, gevolgd door > example.css om de naam aan te geven van het CSS-bestand dat we willen maken.
U hebt ook de mogelijkheid om extra vlaggen toe te voegen aan deze opdracht, zoals het gebruik van de --samenpersen flag om witruimte uit het resulterende CSS-bestand te verwijderen:
stylus --comprimeren < example.styl > example.css
Als een alternatief voor het tegelijkertijd compileren van een bestand, kunt u alle Stylus-bestanden in een map samenvoegen in CSS-bestanden in een andere map. Om dit te doen, na de schrijfstift opdracht, geef de bronmap op en gebruik vervolgens de --uit vlag gevolgd door de doelmap.
Als u bijvoorbeeld alle Stylus-bestanden uit een map met de naam "source_files" wilt compileren in "assets / css", gebruikt u:
stylus source_files - out assets / css
Notitie: de map waarin u aan het compileren bent, moet al bestaan voordat u de opdracht uitvoert, omdat deze niet zal werken als deze de opgegeven map voor het uitvoeren van CSS-bestanden niet kan vinden.
Er zijn verschillende andere opties die u kunt gebruiken bij het gebruik van Stylus via de opdrachtregel. Om alles over hen te lezen, bezoek: http://stylus-lang.com/docs/executable.html
Sass is zeer waarschijnlijk de meest populaire preprocessor op dit moment. Het is ongelooflijk krachtig in wat je ermee kunt bereiken en heeft een zeer grote en actieve gemeenschap. Het wordt ondersteund door bekende externe bibliotheken zoals Compass, Bourbon en Susy.
Lees meer over Sass op: http://sass-lang.com/
U hebt twee opties als het gaat om het compileren van Sass op uw computer: u kunt Ruby gebruiken om het te verwerken, of u kunt LibSass gebruiken.
Sass is voor het eerst gemaakt om op Ruby te worden uitgevoerd. Als u op zoek bent naar 100% volledige volledigheid en ondersteuning, is dit de optie die u mogelijk wilt kiezen. Als u bijvoorbeeld Kompas wilt gebruiken, is de eenvoudigste manier om de Ruby-compilatie bij te houden.
LibSass is gemaakt als een alternatief en een van de opties die beschikbaar worden gesteld is het compileren van sass via een npm-pakket. Deze aanpak compileert veel sneller, waardoor het compileren van ongeveer 5 seconden via Ruby tot minder dan een halve seconde via LibSass verloopt. Het is echter mogelijk dat bepaalde functies en code van derden niet worden ondersteund.
Wat je kiest is volledig afhankelijk van persoonlijke voorkeur, maar als vuistregel zou ik voorstellen om met LibSass te gaan voor snelheid tenzij er iets specifieks (zoals Compass) is waarvoor je Ruby-compilatie nodig hebt.
Ongeacht je keuze, we behandelen beide, dus je bent er helemaal klaar voor.
Om Sass via Ruby te compileren, moet je Ruby eerst op je computer geïnstalleerd hebben.
Als je een Mac hebt, heb je geluk want Ruby is al voorgeïnstalleerd, dus je hoeft niets te doen.
Als u Windows gebruikt, ga dan naar http://rubyinstaller.org/ en download en voer het installatieprogramma uit dat u daar aantreft. Installeer vervolgens Sass door deze opdracht uit te voeren:
[sudo] gem installeer sass
Sass moet automatisch voor u worden gedownload en geïnstalleerd. Voer de volgende opdracht uit om te controleren of de installatie is gelukt:
sass -v
U zou het versienummer en de naam van uw Sass-installatie in uw terminal moeten zien:
Om een bestand te compileren met Ruby sass typ je gewoon sass, gevolgd door de naam van het invoerbestand, een spatie en vervolgens de naam die u wilt dat uw gecompileerde CSS-bestand heeft:
sass source_file.scss compiled_file.css
Ruby Sass heeft ook een ingebouwde "watch" -functie (we zullen later meer bekijken over het kijken) die je bestanden op wijzigingen controleert en deze automatisch opnieuw compileert elke keer dat ze worden opgeslagen.
Om het te gebruiken, voeg de --kijk maar markeer bij uw opdracht en scheid vervolgens de namen van uw bron en gecompileerd bestand met een dubbele punt in plaats van een spatie:
sass --watch source_file.scss: compiled_file.css
Je kunt ook hele mappen specificeren om naar te kijken en om naar te exporteren, in plaats van enkele bestanden, zoals:
sass --watch source / sass: assets / css
Nadat het kijken is gestart, zou u zoiets in uw terminal moeten zien:
Om over alle beschikbare opties te lezen via de commandoregel met Ruby Sass run:
sass --help
Een uitlezing van de commandolijndocs wordt weergegeven in uw terminal:
Je kunt dit gebruiken --helpen vlag om meer informatie te krijgen over elke opdracht die u gebruikt. Typ gewoon de naam van de opdracht gevolgd door --helpen en u zult in beide gevallen dezelfde informatie krijgen als hierboven.
Als je met LibSass werkt, kun je aan de slag met dezelfde methode die je eerder hebt gebruikt om npm-pakketten te installeren in deze tutorialserie.
LibSass zelf is geschreven in C / C ++ maar er zijn verschillende implementaties van, inclusief sommige gedaan om met Node.js. te werken. In ons geval gebruiken we het package node-sass.
Voer de volgende opdracht uit om node-sass globaal te installeren:
[sudo] npm install node-sass -g
Om een bestandstype te compileren knooppunt-sass gevolgd door de naam van het invoerbestand en de naam die u wilt dat uw gecompileerde CSS-bestand heeft:
node-sass source_file.scss compiled_file.css
Om de directory te beheren, wordt uw CSS-bestand gecompileerd om de --uitgang vlag en bestemmingsmap tussen de namen van uw invoer- en uitvoerbestanden:
node-sass source_file.scss --output assets / css compiled_file.css
Net als Ruby Sass gebruikt node-sass ook de --kijk maar vlag om automatische compilatie van uw bestanden bij verandering mogelijk te maken:
node-sass --watch source_file.scss compiled_file.scss
U kunt ook hele mappen opgeven om naar te kijken en naar te exporteren in plaats van afzonderlijke bestanden:
node-sass --watch source / sass / * --output assets / css
Wanneer u node-sass gebruikt om een hele map te bekijken, moet u deze opnemen / * aan het einde om aan te geven dat je alle bestanden in wilt.
Wanneer u een "watch" -proces uitvoert, kunt u het stoppen met een van beide:
De LESS-preprocessor is ook erg populair en staat waarschijnlijk het meest bekend om zijn tewerkstelling in het kader van Twitter Bootstrap. LESS is een geweldige eerste preprocessor om mee aan de slag te gaan, omdat het erg lijkt op schrijven in hetero CSS.
Lees meer over LESS op: http://lesscss.org/
Om LESS globaal te installeren, zodat je het overal kunt gebruiken om ".loze" bestanden te compileren, voer je deze opdracht uit:
[sudo] npm installeer minder -g
Open een terminal in de map waarin het LESS-bestand staat dat u wilt compileren en gebruik de opdracht lessc gevolgd door de naam van het bestand, a > symbool, dan de naam die u wilt dat uw gecompileerde CSS-bestand heeft:
lessc source_file.less> compiled_file.css
Autoprefixer is een npm-pakket dat met CanIUse.com controleert op actuele informatie over welke CSS-eigenschappen voorvoegsels van leveranciers nodig hebben en welke niet. Vervolgens worden automatisch de vereiste voorvoegsels van leveranciers in uw code toegevoegd.
Dit kan zijn ongelooflijk handig omdat, tenzij je voortdurend browser-updates controleert, je jezelf gemakkelijk kunt vinden, inclusief browser-voorvoegsels die je niet echt meer nodig hebt. Het betekent ook dat u al uw CSS kunt schrijven zonder na te denken over voorvoegsels en Autoprefixer voor hen moet laten zorgen.
Autoprefixer zal bijvoorbeeld deze code veranderen:
een display: flex;
… in dit:
een display: -webkit-box; weergave: -webkit-flex; weergave: -ms-flexbox; weergave: flex;
Lees meer over Autoprefixer op: https://www.npmjs.com/package/autoprefixer
Installeer Autoprefixer wereldwijd met:
[sudo] npm installeer autoprefixer -g
Gebruik de volgende opdracht om automatisch een CSS-bestand te fuseren:
autoprefixer style.css
In tegenstelling tot het compileren van een preprocessor-bestand, maakt dit standaard geen tweede bestand. Het bestand dat u target zal worden bijgewerkt, met de juiste voorvoegsels direct toegevoegd.
als jij do wil Autoprefixer een tweede, apart bestand genereren, voeg de --uitgang vlag gevolgd door een naam voor uw prefix css bestand:
autoprefixer unprefixed.css --out Prefixed.css
U wilt altijd dat de CSS die u op uw sites implementeert, wordt gekraakt tot de kleinst mogelijke grootte. Om dit te bereiken, kunt u optimalisatietechnieken gebruiken van:
Stylus, Ruby Sass en node-sass hebben allemaal de mogelijkheid om uw CSS tijdens compilatie te comprimeren.
Neem in Stylus de --samenpersen vlag:
stylus --comprimeren < source_file.scss > compiled_file.css
In Ruby Sass zijn de --stijl vlag, gevolgd door gecomprimeerde:
sass source_file.scss compiled_file.css --style gecomprimeerd
Voeg in node-sass de --uitgang-stijl vlag gevolgd door gecomprimeerde:
node-sass --output-style gecomprimeerde source_file.scss compiled_file.css
Als u geen CSS-preprocessors gebruikt of u wilt alleen maximale code-optimalisatie, dan kunt u het clean-css-pakket gebruiken dat uw CSS-bestanden diepere compressieprocessen doorvoert..
Normale compressieprocessen verwijderen meestal alleen witruimte en opmerkingen van uw CSS. Het clean-css-pakket aan de andere kant kan ook dingen doen als:
Het samenvoegen van gedupliceerde selectors kan handig zijn, bijvoorbeeld als u de lay-out voor een bepaalde klasse in eerste instantie in een "layout.css" -bestand wilt hebben, terwijl de inkleuring voor dezelfde klasse in eerste instantie in een "colors.css" staat.
Afronding van getallen is geweldig als je een preprocessor-functie hebt gebruikt om een waarde in remeenheden om te zetten en je eindigt met iets als 2.3649858573rem. Met clean-css zou dat getal worden afgerond op twee decimalen, waardoor het op een veel opgeruimder 2.36rem-waarde komt.
U kunt meer lezen over clean-css op: https://github.com/jakubpawlowicz/clean-css
Installeer clean-css wereldwijd met de opdracht:
[sudo] npm installeer clean-css -g
Om een CSS-bestand op te schonen, gebruikt u:
cleancss style.css
Notitie: Hoewel de pakketnaam "clean-css" een koppelteken bevat, moet u dit gebruiken cleancss zonder een koppelteken om uw opdrachten te starten.
Om een nieuwe bestandsnaam op te geven voor clean-css om het gebruik van de -O vlag gevolgd door de nieuwe bestandsnaam, vóór de naam van het bestand dat u target:
cleancss -o cleaned.css style.css
Er zijn verschillende andere opdrachtopties beschikbaar voor clean-css, waar u alles over kunt lezen op: Schoon CSS-CLI gebruiken.
Jade is een verbazingwekkende taal die in HTML wordt gecompileerd, en maakt het voor u mogelijk om zowel uw code in steno te schrijven, zodat de ontwikkeling veel sneller verloopt, en uw eigen sjabloonsystemen te maken, zodat u zichzelf kunt redden met code herschrijven.
Lees meer over Jade op: https://www.npmjs.com/package/jade
Om Jade globaal te installeren, voert u de opdracht uit:
[sudo] npm jade -g installeren
Jade, gemaakt door dezelfde persoon als Stylus, gebruikt dezelfde standaardcommandasyntaxis van < en > tekens om een bestand te compileren:
jade < index.jade > index.html
Deze opdracht compileert "index.jade" in "index.html" in dezelfde map.
Om alle Jade-bestanden in een bepaalde map te compileren, gebruikt u:
jade dir_name
Om de map in te stellen waarin u wilt dat uw HTML-bestanden worden geschreven om de --uit markeren tussen de naam van de invoer- en uitvoerdirectory's:
jade src_dir --out html_dir
Om Jade's te gebruiken kijk maar functie voor automatische compilatie bij opslaan, geslaagd voor de --kijk maar vlag direct na de opdracht jade.
Voor enkele bestanden:
jade - horloge < index.jade > index.html
Of voor volledige mappen:
jade - bekijk dir_name
jade - bekijk dir_name --out html_dir
Net zoals we willen dat de CSS-bestanden die we implementeren, worden geoptimaliseerd, willen we onze JavaScript-bestanden ook op de meest efficiënte manier leveren.
Het komt vaak voor dat we meerdere JS-bestanden in onze projecten opnemen, zoals Modernizr, jQuery en onze eigen aangepaste code nodig hebben, maar we willen ook het aantal http-verzoeken dat onze sites maken minimaliseren. Daarnaast willen we ervoor zorgen dat de laadtijd voor onze JavaScript super snel is.
De beste manier om beide problemen aan te pakken, is door gelijktijdig onze JavaScript-bestanden samen te voegen tot één bestand, wat betekent dat we slechts één http-verzoek nodig hebben om het te laden en het resulterende bestand verkleinen zodat het de kleinst mogelijke grootte heeft.
We zullen het UglifyJS-pakket gebruiken om voor dit proces te zorgen.
Om uglify-js wereldwijd te runnen:
[sudo] npm installeer uglify-js -g
Als u twee JavaScript-bestanden wilt combineren en witruimte en opmerkingen uit het resulterende bestand wilt verwijderen, gebruikt u de uglifyjs opdracht gevolgd door de namen van elk van uw bronbestanden met spaties ertussen. Hierna de --uitgang vlag en de naam die u wilt dat uw nieuwe gecombineerde en verkleinde bestand moet hebben:
uglifyjs input1.js input2.js --output input.min.js
Naast het standaard verwijderen van spaties en opmerkingen, kunt u ook compressie toevoegen die de code daadwerkelijk zal wijzigen om de grootte te verkleinen. Om dit te doen, voegt u de --samenpersen vlag aan het einde van de opdracht:
uglifyjs input1.js input2.js --output input.min.js --compress
Een andere optimalisatie-optie die beschikbaar is, is om de code te "mangel", wat dingen als het opruimen van variabelen, functie- en argumentnamen tot enkele karakters zal doen. Om deze optie te gebruiken, voegt u de --mangel vlag aan het einde van de opdracht:
uglifyjs input1.js input2.js --output input.min.js --mangle
Je kunt ook zowel compressie als mangling gebruiken door beide vlaggen te passeren:
uglifyjs input1.js input2.js --output input.min.js --mangle --compress
Lees meer over de opdrachten die u kunt uitvoeren met UglifyJS op: https://www.npmjs.com/package/uglify-js
Als u scripts van derden, zoals jQuery, Modernizr enzovoort, combineert en / of verkleint, moet u ervoor zorgen dat u de volledige uitgebreide versies van die bestanden gebruikt. Het is over het algemeen een slecht idee om bestanden opnieuw te verkleinen die al zijn verkleind omdat je hun functionaliteit kunt breken.
U kunt bestanden identificeren die al zijn verkleind, omdat deze meestal de naamgevingsconventie van "naam.min.js" zullen volgen, terwijl de uitgebreide versie van het bestand "name.js" zal zijn.
Nu weet je hoe je een aantal ongelooflijk nuttige taken met verschillende commando's moet voltooien, maar wat als je alle taken die je project nodig heeft tegelijkertijd allemaal kunt voltooien met één opdracht?
In de volgende zelfstudie leert u hoe u precies dat kunt doen, met behulp van taakrunners om alle taken te configureren die uw project nodig heeft, zodat al uw compilatie, automatisch aanvullen, combineren en optimaliseren in één keer en in slechts enkele seconden kan worden gedaan.
Ik zie je in de volgende tutorial!
Accentsconagua