Share
Come web designer ci sono tre lingue in cui è più o meno garantito lavorare in un modo o nell'altro: CSS, HTML e JavaScript. In questo tutorial sfrutterai la riga di comando per rendere il tuo sviluppo con questi tre linguaggi più potente e più efficiente.
Imparerai come utilizzare la riga di comando per:
Nota: questo tutorial presume che tu abbia già completato le esercitazioni precedenti in questa serie. Se non lo hai, troverai utile tornare indietro e seguirli prima di procedere.
Se non hai mai lavorato con i preprocessori CSS prima di eliminare tutto immediatamente e provare uno fuori. Una volta trovato il preprocessore che ti piace che si adatta al tuo stile di codifica, è probabile che non sarai mai più codificato in CSS.
I tre preprocessi che sono generalmente considerati come quelli da scegliere sono Stylus, Sass / SCSS e LESS. Tuts + ha una gamma impressionante di tutorial e corsi per aiutarti a imparare a scrivere nella sintassi di tutti e tre i preprocessori.
In questo tutorial vedremo come utilizzare la riga di comando per compilare il codice per ciascuno dei tre.
Ogni utente del preprocessore ha un preferito e il mio è Stylus. Utilizza una sintassi minima che può essere scritta molto rapidamente, ha funzionalità molto potenti ed è supportata da grandi librerie di terze parti come Jeet e Kouto-Swiss.
Puoi leggere tutto su Stylus all'indirizzo: http://stylus-lang.com/
Per installare Stylus a livello globale, permettendoti di usarlo per compilare file ".styl" ovunque, esegui questo comando:
[sudo] npm installa lo stilo -g
Il modo più semplice per compilare con Stylus è utilizzare questo comando a una riga:
stilo < example.styl > example.css
Questo comando compilerà "example.styl" in "example.css" nella stessa directory.
Per abbattere abbiamo stilo per iniziare il comando. Quindi usiamo a < example.styl per indicare il file di input di Stylus, seguito da > example.css per denotare il nome del file CSS che vogliamo aver creato.
Hai anche la possibilità di aggiungere ulteriori flag a questo comando, come ad esempio l'uso di --comprimere contrassegna per rimuovere gli spazi bianchi dal file CSS risultante:
stilo - compressione < example.styl > example.css
In alternativa alla compilazione di un file alla volta, è possibile compilare tutti i file Stylus in una directory in file CSS in un'altra directory. Per fare questo, dopo il stilo comando, specificare la cartella di origine, quindi utilizzare --su flag seguito dalla cartella di destinazione.
Ad esempio, per compilare tutti i file Stylus da una cartella denominata "source_files" in "assets / css", utilizzare:
stilo source_files --out assets / css
Nota: la cartella in cui si sta compilando deve già esistere prima di eseguire il comando in quanto non riesce se non riesce a trovare la cartella specificata per l'output dei file CSS in.
Ci sono molte altre opzioni che puoi sfruttare quando usi Stylus tramite la riga di comando. Per leggere tutto su di loro visita: http://stylus-lang.com/docs/executable.html
Sass è molto probabilmente il preprocessore più popolare in questo momento. È incredibilmente potente in ciò che è possibile ottenere con esso e ha una comunità molto ampia e attiva. È supportato da ben note librerie di terze parti come Compass, Bourbon e Susy.
Per saperne di più su Sass: http://sass-lang.com/
Hai due opzioni per compilare Sass sulla tua macchina: puoi usare Ruby per gestirlo, oppure puoi usare LibSass.
Sass è stato creato per la prima volta su Ruby e, come tale, se si sta cercando il 100% di completezza e supporto completo, è l'opzione che si potrebbe desiderare di scegliere. Ad esempio, se si desidera utilizzare Compass, il modo più semplice è attenersi alla compilazione di Ruby.
LibSass è stato creato come alternativa e una delle opzioni che rende disponibili è la compilazione sass tramite un pacchetto npm. Questo approccio si compila molto più velocemente, portando un tempo di compilazione di circa 5 secondi attraverso Ruby a meno di mezzo secondo attraverso LibSass. Tuttavia, è possibile che alcune funzionalità e il codice di terze parti non siano supportati.
La scelta dipende completamente dalle preferenze personali, ma come regola generale suggerirei di andare con LibSass per la velocità a meno che non ci sia qualcosa di specifico (come Compass) per il quale è necessaria la compilazione di Ruby.
Indipendentemente dalla tua scelta, copriremo l'utilizzo di entrambi in modo tale che tu sia impostato su entrambi gli eventi.
Per compilare Sass tramite Ruby, devi prima installare Ruby sul tuo computer.
Se sei su Mac sei fortunato perché Ruby è già preinstallato in modo da non dover fare nulla.
Se sei su Windows, vai su http://rubyinstaller.org/ quindi scarica ed esegui il programma di installazione che trovi lì. Quindi, installa Sass eseguendo questo comando:
[sudo] gem install sass
Sass dovrebbe essere scaricato e installato automaticamente per te. Per ricontrollare l'installazione è stato eseguito correttamente il comando:
sass -v
Dovresti vedere il numero di versione e il nome della tua installazione di Sass visualizzata sul tuo terminale:
Per compilare un file usando Ruby sass basta digitare insolenza, seguito dal nome del file di input, uno spazio, quindi il nome che si desidera che il file CSS compilato abbia:
sass source_file.scss compiled_file.css
Ruby Sass ha anche una funzione incorporata di "orologio" (copriremo di più la visione successiva) che guarderà i tuoi file per le modifiche e ricompilerà automaticamente ogni volta che vengono salvati.
Per usarlo, aggiungi il --orologio contrassegna al tuo comando, quindi separa i nomi della tua fonte e del file compilato con i due punti invece che con uno spazio:
sass --watch source_file.scss: compiled_file.css
Puoi anche specificare intere directory da guardare e da esportare, invece di singoli file, in questo modo:
sass --watch source / sass: assets / css
Una volta avviata la visualizzazione dovresti vedere qualcosa di simile nel tuo terminale:
Per leggere tutte le opzioni disponibili tramite la riga di comando con Ruby Sass, esegui:
sass --help
Una lettura dei documenti della riga di comando verrà visualizzata nel terminale:
Puoi usare questo --Aiuto flag per ottenere maggiori informazioni su qualsiasi comando tu usi. Basta digitare il nome del comando seguito da --Aiuto e otterrete informazioni simili a quelle di cui sopra in ciascun caso.
Se vai con LibSass, puoi iniziare con lo stesso metodo che hai usato per installare i pacchetti npm in precedenza in questa serie di tutorial.
Lo stesso LibSass è scritto in C / C ++ ma ci sono varie implementazioni, incluso alcune che funzionano con Node.js. Nel nostro caso utilizzeremo il pacchetto node-sass.
Per installare node-sass globalmente, esegui questo comando:
[sudo] npm install node-sass -g
Per compilare un tipo di file node-sass seguito dal nome del file di input e dal nome che vorresti avere per il tuo file CSS compilato:
node-sass source_file.scss compiled_file.css
Per controllare la directory il tuo file CSS è compilato in aggiungere il --produzione flag e directory di destinazione tra i nomi dei file di input e di output:
node-sass source_file.scss --output assets / css compiled_file.css
Come Ruby Sass, anche node-sass usa il --orologio flag per abilitare la compilazione automatica dei tuoi file in caso di modifica:
node-sass --watch source_file.scss compiled_file.scss
Puoi anche specificare intere directory da guardare e da esportare a, anziché singoli file:
node-sass --watch source / sass / * --output assets / css
Quando usi node-sass per guardare un'intera directory, assicurati di includere / * alla fine per specificare che vuoi tutti i file all'interno.
Quando hai un processo di "sorveglianza" in esecuzione puoi fermarlo con:
Il preprocessore LESS è anche molto popolare, ed è probabilmente il più noto per il suo impiego nel framework Bootstrap di Twitter. LESS è un ottimo primo preprocessore con cui iniziare a lavorare poiché è molto simile alla scrittura in CSS puro.
Maggiori informazioni su LESS su: http://lesscss.org/
Per installare LESS a livello globale, permettendoti di usarlo per compilare file ".less" ovunque, esegui questo comando:
[sudo] npm installa meno -g
Aprire un terminale nella cartella contenente il file LESS che si desidera compilare e utilizzare il comando lessc seguito dal nome del file, a > simbolo, quindi il nome che vuoi che il tuo file CSS compilato abbia:
lessc source_file.less> compiled_file.css
Autoprefixer è un pacchetto npm che controlla con CanIUse.com per ottenere informazioni aggiornate su quali proprietà dei CSS hanno bisogno dei prefissi dei fornitori e quali no. Quindi gestisce automaticamente l'aggiunta dei prefissi dei fornitori richiesti nel codice.
Questo può essere incredibilmente utile perché, a meno che tu non stia monitorando costantemente gli aggiornamenti del browser, puoi facilmente trovare te stesso inclusi i prefissi dei browser che non ti servono più. Significa anche che puoi scrivere tutti i tuoi CSS senza dover pensare ai prefissi e lasciare che Autoprefixer si prenda cura di loro per te.
Ad esempio, autoprefixer trasformerà questo codice:
un display: flex;
... in questo:
un display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
Maggiori informazioni su Autoprefixer su: https://www.npmjs.com/package/autoprefixer
Installa Autoprefixer globalmente con:
[sudo] npm install autoprefixer -g
Per correggere automaticamente un file CSS utilizzare il seguente comando:
autoprefixer style.css
A differenza della compilazione di un file del preprocessore, questo non creerà un secondo file per impostazione predefinita. Il file che sceglierai verrà aggiornato, con i prefissi corretti aggiunti direttamente.
Se tu fare vuoi che Autoprefixer generi un secondo file separato aggiungi il --produzione flag seguito da un nome per il file css prefisso:
autoprefixer unprefixed.css --output prefixed.css
Vuoi sempre che il CSS che distribuisci sui tuoi siti sia ridotto alla dimensione più piccola possibile. Per raggiungere questo obiettivo è possibile utilizzare tecniche di ottimizzazione di:
Stylus, Ruby Sass e node-sass hanno tutte la capacità di comprimere il tuo CSS durante la compilazione.
In Stylus, includi il --comprimere bandiera:
stilo - compressione < source_file.scss > compiled_file.css
In Ruby Sass include il --stile bandiera, seguita da compresso:
sass source_file.scss compiled_file.css --style compresso
Nel nodo-sass aggiungere il --Uscita in stile bandiera seguita da compresso:
node-sass - style -put compresso source_file.scss compiled_file.css
Se non stai usando i preprocessori CSS, o vuoi solo ottimizzare il codice, puoi usare il pacchetto clean-css che metterà i tuoi file CSS attraverso processi di compressione più approfonditi.
I normali processi di compressione in genere rimuovono solo lo spazio bianco e i commenti dal CSS. Il pacchetto clean-css d'altra parte può anche fare cose come:
L'unione di selettori duplicati può essere utile, ad esempio, se si desidera avere inizialmente tutto il layout per una determinata classe in un file "layout.css", mentre la colorazione per la stessa classe è inizialmente in un "colors.css".
Arrotondare i numeri è ottimo per quando hai usato una funzione di preprocessore per convertire un valore in unità rem e ti ritrovi con qualcosa come 2.3649858573rem. Con clean-css quel numero sarebbe arrotondato a due cifre decimali, portandolo a un valore di 2.36rem molto più ordinato.
Puoi leggere ulteriori informazioni su clean-css all'indirizzo: https://github.com/jakubpawlowicz/clean-css
Installa clean-css a livello globale con il comando:
[sudo] npm installa clean-css -g
Per pulire un file CSS utilizzare:
cleancss style.css
Nota: Anche se il nome del pacchetto "clean-css" contiene un trattino, assicurati di usarlo CleanCSS senza un trattino per iniziare i tuoi comandi.
Per specificare un nuovo nome di file per clean-css per generare utilizzare il file -o flag seguito dal nuovo nome del file, prima del nome del file che hai scelto come target:
cleancss -o clean.css style.css
Ci sono molte altre opzioni di comando disponibili per clean-css, che puoi leggere a proposito di: Come usare Clean CSS CLI.
Jade è un linguaggio stupefacente che si compila in HTML e ti consente sia di scrivere il tuo codice in stenografia in modo che lo sviluppo sia molto più veloce, e di creare i tuoi sistemi di template in modo da poterti salvare sul codice di riscrittura.
Maggiori informazioni su Jade su: https://www.npmjs.com/package/jade
Per installare Jade esegui globalmente il comando:
[sudo] npm installa jade -g
Jade, creata dalla stessa persona di Stylus, utilizza la stessa sintassi di comando di base di < e > firma per compilare un file:
giada < index.jade > index.html
Questo comando compilerà "index.jade" in "index.html" nella stessa directory.
Per compilare tutti i file Jade in una determinata directory, utilizzare:
jade dir_name
Per impostare la directory in cui si desidera scrivere i file HTML per posizionare il file --su flag tra il nome delle directory di input e di output:
jade src_dir --out html_dir
Per usare Jade's orologio funzione per la compilazione automatica al salvataggio, passare il --orologio bandiera subito dopo il comando di giada.
Per singoli file:
giada - orologio < index.jade > index.html
O per le directory complete:
jade --watch dir_name
jade --watch dir_name --out html_dir
Proprio come vogliamo che i file CSS che implementiamo siano ottimizzati, così vogliamo anche consegnare i nostri file JavaScript nel modo più efficiente possibile.
È comune per noi avere più file JS nei nostri progetti, come ad esempio Modernizr, jQuery e il nostro codice personalizzato, ad esempio, ma vogliamo anche ridurre al minimo il numero di richieste HTTP effettuate dai nostri siti. Inoltre, vogliamo garantire che il tempo di caricamento del nostro JavaScript sia super veloce.
Il modo migliore per gestire entrambi i problemi consiste nel concatenare simultaneamente i nostri file JavaScript in un singolo file, il che significa che avremo bisogno solo di una richiesta http per caricarla e ridimensionare il file risultante in modo che sia il più piccolo possibile.
Useremo il pacchetto UglifyJS per occuparci di questo processo.
Per installare uglify-js globalmente eseguito:
[sudo] npm installa uglify-js -g
Per combinare due file JavaScript, eliminare lo spazio bianco e i commenti dal file risultante, utilizzare il comando uglifyjs comando seguito dai nomi di ciascuno dei tuoi file sorgente con spazi tra loro. Dopo ciò includi il --produzione flag e il nome che vuoi che il tuo nuovo file combinato e minimizzato abbia:
uglifyjs input1.js input2.js --output input.min.js
Oltre allo spoglio predefinito di spazi bianchi e commenti, puoi anche aggiungere una compressione che modificherà effettivamente il codice per ridurne le dimensioni. Per fare questo aggiungi il --comprimere bandiera alla fine del comando:
uglifyjs input1.js input2.js --output input.min.js --compress
Un'altra opzione di ottimizzazione disponibile è quella di "manipolare" il codice, che farà cose come crimpare i nomi delle variabili, delle funzioni e degli argomenti su singoli caratteri. Per usare questa opzione aggiungi il --mangano bandiera alla fine del comando:
uglifyjs input1.js input2.js --output input.min.js --mangle
Puoi anche utilizzare sia la compressione che il mangling passando entrambi i flag:
uglifyjs input1.js input2.js --output input.min.js --mangle --compress
Maggiori informazioni sui comandi che puoi eseguire con UglifyJS all'indirizzo: https://www.npmjs.com/package/uglify-js
Se stai combinando e / o minimizzando script di terze parti come jQuery, Modernizr e così via, assicurati di utilizzare le versioni complete di questi file. In genere è una cattiva idea ridirigere i file che sono già stati minimizzati in quanto è possibile rompere le loro funzionalità.
È possibile identificare i file che sono già stati miniati in quanto in genere seguiranno la convenzione di denominazione di "nome.min.js", mentre la versione espansa del file sarà "name.js".
Ora sai come completare alcune attività incredibilmente utili con vari comandi, ma se fosse possibile completare tutte le attività richieste dal progetto contemporaneamente con un solo comando?
Nel prossimo tutorial imparerai come fare esattamente questo, usando i task runner per configurare tutte le attività di cui il tuo progetto ha bisogno in modo che tutta la tua compilation, autoprefixing, combinazione e ottimizzazione possano essere eseguite in una sola volta e in pochi secondi.
Ci vediamo nel prossimo tutorial!
Accentsconagua