Share
Nell'ultimo tutorial abbiamo trattato come iniziare immediatamente con PostCSS utilizzando CodePen o Prepros. Queste opzioni sono grandiose, ma restrittive in quanto non si arriva a controllare quali plugin sono disponibili per l'uso.
In questo tutorial vedremo come utilizzare PostCSS con il task runner Gulp, permettendoti di decidere da te quali plugin vuoi utilizzare e quindi di sfruttare appieno l'ecosistema dei plugin.
Nota: Se non hai mai lavorato prima con la riga di comando o con i responsabili delle attività, prima di iniziare questo tutorial ti consiglio di dare un'occhiata alle nostre serie gratuite: La riga di comando per il Web design.
Dato che lavoreremo con Gulp, supponiamo che tu abbia già i prerequisiti per il suo utilizzo installati:
Se non sei sicuro di averli installati, ti preghiamo di seguire il tutorial La riga di comando per il web design: Addomesticare i pacchetti di terze parti perché ti porterà a ottenere questi prerequisiti sul posto.
Assicurati di aver compreso le basi dell'utilizzo di Gulp seguendo il tutorial La riga di comando per il web design: automazione con Gulp. Inoltre, seguire le istruzioni nella sezione "Setup Project for Gulp" del tutorial. Prima di andare avanti dovresti avere una cartella di progetto con:
All'interno della cartella del progetto, crea due sottocartelle, una denominata "src" e l'altra "dest". La cartella "src" conserverà i file CSS non elaborati, mentre nella cartella "dest" verranno scritti i file PostCSS elaborati.
La prossima cosa che devi fare è installare il plugin gulp-postcss nel tuo progetto: lo useremo per gestire l'elaborazione PostCSS.
In un terminale / prompt dei comandi puntato sulla cartella del progetto, eseguire il comando:
Installa npm --save-dev gulp-postcss
Una volta completata l'installazione, la struttura del tuo progetto dovrebbe assomigliare a questa:
Ora apri il tuo Gulpfile per modificarlo e crea variabili per chiamare sia i moduli "gulp" che "gulp-postcss" aggiungendo il seguente codice:
Accentsconagua
var gulp = require ('gulp'); var postcss = require ('gulp-postcss');Ora possiamo impostare un'attività per leggere un file CSS di origine ed elaborarlo tramite PostCSS.
Aggiungi il seguente:
gulp.task ('css', function () var processors = []; restituisce gulp.src ('./ src / *. css') .pipe (postcss (processori)) .pipe (gulp.dest ('. / dest ')););Analizziamo ciò che abbiamo nel codice qui sopra.
Nella prima riga abbiamo impostato un compito di gulp chiamato css. Questa attività esegue una funzione e all'interno di quella funzione è stato creato un array chiamato processori. In questo momento quell'array è vuoto, ma in un momento lo riempiremo con i plugin PostCSS che vogliamo usare.
Dopo il processori array abbiamo specificato i file che vogliamo utilizzare come destinazione per l'elaborazione: qualsiasi file CSS nella cartella "src".
Nella prima delle due linee usando il tubo() funzione, stiamo impostando PostCSS per l'esecuzione tramite la funzione postcss (). Come argomento attraverso quella funzione stiamo passando il nostro processori array, che in seguito dirà a PostCSS quali plug-in vogliamo utilizzare.
Finalmente, con il secondo dei due tubo() funzioni, stiamo facendo scrivere il nostro codice elaborato in un nuovo file CSS nella nostra cartella "dest".
Vai avanti e crea un nuovo file "style.css" nella cartella "src" e aggiungi un po 'di test CSS come:
.test background: nero;
Ora nel tuo terminale / prompt dei comandi, ancora puntato verso la cartella del tuo progetto, esegui il comando:
gulp css
Questo eseguirà l'attività che hai appena impostato, e come risultato dovresti ora trovare un nuovo file "style.css" nella cartella "dest".
Quando apri questo nuovo file, vedrai un codice identico a quello del tuo file sorgente. Il codice non è cambiato perché non abbiamo ancora utilizzato alcun plugin PostCSS e, come saprai da un precedente tutorial, sono i plug-in che eseguono le effettive manipolazioni CSS.
Ora aggiungeremo una selezione di plug-in e pacchetti PostCSS: Autoprefixer (aggiunge i prefissi dei fornitori), cssnext (attiva la sintassi futura) e precss (si estende con la funzionalità di tipo Sass).
Esegui i seguenti comandi per installare ciascun plug-in nel tuo progetto:
npm install autoprefixer --save-dev npm installa cssnext --save-dev npm installa precss --save-dev
Nota: Il cssnext e precss le installazioni potrebbero richiedere un po 'di tempo poiché sono pacchetti di plug-in multipli.
Successivamente definiremo le variabili da caricare in ognuna nel nostro progetto. Aggiungi il seguente codice sotto le due variabili esistenti nella parte superiore del tuo Gulpfile:
var autoprefixer = require ('autoprefixer'); var cssnext = require ('cssnext'); var precss = require ('precss');Quindi aggiungeremo questi tre plug-in al processori array nel nostro compito di gulp. Aggiorna la matrice al seguente:
processori var = [autoprefixer, cssnext, precss];
Con i tre plugin aggiunti al nostro array di processori, PostCSS saprà che desideriamo applicarli ognuno al nostro codice sorgente CSS.
Ora siamo pronti ad aggiungere del codice di test al nostro file "src / style.css" e controllare che tutto funzioni. Elimina ciò che hai già nel file e aggiungi invece questo CSS:
/ * Test di autoprefixer * / .autoprefixer display: flex; / * Test di cssnext * / .cssnext background: color (red alpha (-10%)); / * Test precss * / .precss @if 3 < 5 background: green; @else background: blue;
Corri il gulp css comando di nuovo ora, e il file risultante nella cartella "dest" dovrebbe avere il seguente contenuto:
/ * Test di autoprefixer * / .autoprefixer display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; / * Test di cssnext * / .cssnext background: rgba (255, 0, 0, 0.9); / * Test precss * / .precss background: verde
Come sopra, dovresti vedere i prefissi dei fornitori sono stati aggiunti alla prima classe da Autoprefixer, a RGBA () il colore è stato prodotto da cssnext nella seconda classe, e il @se altro il controllo è stato valutato da PreCSS nella terza classe.
Nota: se vuoi configurare le opzioni per un plugin, aggiungi una coppia di parentesi dopo il suo nome nella matrice dei preprocessori e passa le opzioni lì. Ad esempio, è possibile specificare l'elenco dei browser che si desidera che Autoprefixer funzioni, in questo modo:
var processors = [autoprefixer (browser: ['last 1 version']), cssnext, precss];
La bellezza di PostCSS è nella sua capacità di essere configurata con qualsiasi combinazione di plugin. La sfida che questo porta avanti, tuttavia, è garantire che le altre persone che desiderano lavorare a un progetto abbiano la stessa configurazione dei plugin PostCSS. Grazie a npm, questa sfida viene gestita attraverso il suo sistema di gestione delle dipendenze.
Perché stai usando il --save-dev contrassegna ogni volta che installi un plug-in nel tuo progetto, verrà aggiunto al tuo file "project.json" come dipendenza dev. Questo significa che se vuoi condividere il tuo progetto con altri, possono eseguire il comando installazione di npm sul pacchetto che condividi con loro e fai installare automaticamente tutti gli stessi plugin.
Per saperne di più su come funziona la gestione delle dipendenze con NPM, consulta il tutorial La riga di comando per il web design: domare i pacchetti di terze parti.
Per riassumere quanto sopra:
processori schieramentopostcss () funzione, con il processori array passato come argomentoDa lì, puoi seguire gli stessi passaggi essenziali per abilitare qualsiasi plug-in PostCSS nel tuo progetto:
installazione di npm --save-dev var autoprefixer = require ('autoprefixer'); preprocessori schieramento.Controlla il repository Github per i file di avviamento e gli esempi completati.
Nel prossimo tutorial vedremo come configurare un progetto PostCSS nell'altro dei due grandi corridori: Grunt. Ci vediamo lì!
