Share
Nell'ultimo tutorial abbiamo esaminato come configurare un progetto PostCSS con Gulp. In questo tutorial otterremo gli stessi obiettivi, usando Grunt. Alla fine di questo tutorial saprai come configurare un progetto PostCSS + Grunt con qualsiasi selezione di plugin che scegli.
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.
Poiché lavoreremo con Grunt, supponiamo che tu abbia già i prerequisiti per il suo utilizzo installati:
Se non sei sicuro di averlo installato, segui il tutorial The Command Line for Web Design: Taming di pacchetti di terze parti.
Assicurati di aver installato Grunt CLI a livello globale e ne comprendi l'utilizzo di base seguendo la linea di comando per il web design: Automation with Grunt. Inoltre, seguire le istruzioni nella sezione "Setup Project for Grunt" del tutorial. Prima di andare avanti dovresti avere una cartella di progetto con:
Nella cartella del progetto aggiungi due sottocartelle, una denominata "src" e l'altra "dest". La cartella "src" conserverà i file CSS non elaborati e PostCSS scriverà i file CSS compilati nella cartella "dest".
La prossima cosa che devi fare è installare il plugin Grunt per PostCSS nel tuo progetto: useremo grunt-postcss per gestire la compilazione.
In un terminale / prompt dei comandi puntato sulla cartella del progetto, eseguire il comando:
installa npm grunt-postcss --save-dev
A questo punto la struttura del tuo progetto dovrebbe assomigliare a questa:
Apri il tuo Gruntfile per la modifica e inizia aggiungendo la shell di codice di base che tutti i Gruntfile richiedono:
module.exports = function (grunt) ;
All'interno di questo, useremo il grunt.loadNpmTasks () funzione da caricare nel nostro grugnito-postcss plugin in questo modo:
Accentsconagua
module.exports = function (grunt) grunt.loadNpmTasks ('grunt-postcss'); ;Ora siamo pronti per iniziare a configurare l'attività Grunt che useremo per eseguire postcss. Innanzitutto, aggiungi il grunt.initConfig () funzione sopra la linea che abbiamo appena aggiunto:
module.exports = function (grunt) grunt.initConfig (); grunt.loadNpmTasks ( 'grunt-postcss'); ;
Al suo interno, imposta un oggetto chiamato postcss così:
module.exports = function (grunt) grunt.initConfig (postcss: ); grunt.loadNpmTasks ( 'grunt-postcss'); ;
All'interno del nuovo postcss oggetto aggiungeremo altri due oggetti nidificati, uno chiamato opzioni e uno chiamato dist:
module.exports = function (grunt) grunt.initConfig (postcss: options: , dist: ); grunt.loadNpmTasks ( 'grunt-postcss'); ;
Il opzioni oggetto manterrà la configurazione per PostCSS e il dist oggetto terrà informazioni su dove i nostri file CSS devono essere letti a partire dal e scritto a.
Vai avanti ora e crea un file CSS chiamato "style.css" nella cartella "src" del tuo progetto. Aggiungi un codice di prova ad esso, come ad esempio:
.test background: nero;
Ora aggiorna il dist oggetto per specificare "src / style.css" come il nostro file sorgente, e "dest / style.css" come il file che vogliamo generare:
dist: src: 'src / style.css', dest: 'dest / style.css'
Quindi, all'interno del opzioni oggetto, aggiungi una matrice vuota chiamata processori. Qui è dove configureremo i plugin PostCSS per usarli un po 'più tardi. Per ora, basta aggiornarlo a:
opzioni: processori: [],
La tua base postcss compito è ora pronto per andare. Per provarlo, con il tuo terminale / prompt dei comandi ancora puntato verso la cartella del tuo progetto, esegui il comando:
grunt postcss
Nel tuo terminale dovresti vedere questo messaggio:
Esecuzione dell'attività "postcss: dist" (postcss) >> 1 foglio di stile elaborato creato.
E ora nella cartella "dest" dovresti trovare un nuovo file "style.css", contenente lo stesso codice del file "style.css" nella cartella "src".
In seguito aggiungeremo una selezione di plug-in e pacchetti PostCSS: Autoprefixer (aggiunge il prefisso del fornitore), cssnext (attiva la sintassi futura) e precss (si estende con la funzionalità di Sass).
Esegui i seguenti comandi per installare ciascuno 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.
Ora siamo pronti per caricare ciascuno dei plugin tramite il processori array creato in precedenza. Aggiorna la matrice al seguente:
processori: [require ('autoprefixer') (), require ('cssnext') (), require ('precss') ()]Andiamo avanti ora aggiungiamo del codice di test al nostro file "style.css" di origine e controlliamo che i plug-in PostCSS appena configurati funzionino come previsto.
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 grunt postcss 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
Vedrai nel .autoprefixer classe, i prefissi dei venditori sono stati aggiunti da Autoprefixer. Nel .cssnext classe, un RGBA () il colore è stato generato da cssnext. E infine nel .precss classe, il @se altro condizionale è stato valutato da PreCSS.
Nota, se vuoi configurare le opzioni per un plugin, passa le tue opzioni attraverso la seconda coppia di parentesi dopo il richiedere() funzione per quel plugin. Ad esempio, è possibile specificare l'elenco dei browser che si desidera che Autoprefixer funzioni, in questo modo:
processori: [require ('autoprefixer') (browser: ['last 1 version']), require ('cssnext') (), require ('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.
In sintesi di tutto quanto sopra esposto:
grunt.loadNpmTasks ( 'grunt-postcss'); opzioni oggetto contenente a processori schieramentodist oggetto che specifica i tuoi file sorgente e la destinazione per i file compilatiDa lì, puoi seguire gli stessi passaggi essenziali per abilitare qualsiasi plug-in PostCSS nel tuo progetto:
installazione di npm --save-dev preprocessori array usando la funzione require ()richiedere('') () .Controlla il repository Github per i file di avviamento e gli esempi completati.
Ora sai come usare Gulp o Grunt per usare PostCSS con qualsiasi plugin tu scelga. La prossima cosa di cui hai bisogno è un modo per esplorare l'ecosistema di plugin PostCSS e trovare ottimi plugin che sono perfetti per il tipo di progetti che vuoi creare.
Analizzeremo esattamente come puoi farlo nel prossimo tutorial; "Guida rapida: esplorazione dei plugin".
