Componenti di Bower fuori dal web > Gulp! Un rinfresco per le tue risorse di frontend | SymfonyCasts

Grande notizia! Abbiamo minificato e combinato tutti i nostri CSS in un solo file. Oh, tranne il CSS di Bootstrap! Abbiamo due buone opzioni. Primo, potremmo puntare il link ad un CDN pubblico di Bootstrap. Oppure potremmo stipare il bootstrapstyling proprio in main.css. Facciamo così – è molto più interessante.

Bower!

Bootstrap è installato grazie a Bowser. Ehm, voglio dire Bower. Bower è il compositore di risorse per il frontend, come Bootstrap o jQuery. È un’alternativa al download dei file e al loro commit nel tuo repo.

Bower legge da, sorpresa, un file bower.json:

20 linee bower.json

{

“nome”: “knpu-gulp”,

… linee 3 – 15

“dipendenze”: {

“bootstrap”: “~3.3.2”

}

E quando ho creato il progetto, ho anche aggiunto un file .bowerrc. Questo diceva a bower di scaricare le cose in questa web/vendor directory:

4 linee .bowerrc

{

“directory”: “web/vendor”

}

Questo li ha resi pubblicamente accessibili.

Ma ora che abbiamo i muscoli di Gulp, voglio complicare le cose. Cambia questo in vendor/bower_components:

4 linee .bowerrc

{

“directory”: “vendor/bower_components”

}

Questo metterà questi file fuori dalla directory pubblica, che all’inizio, causerà alcuni problemi. Cancella quella vecchia roba:

rm -rf web/vendor

Vai al terminale e ctrl+c fuori da gulp. Ora, esegui bower install:

bower install

Se non hai il comando bower, controlla i loro documenti. È installato globalmente tramite npm, esattamente come gulp.

Fatto! Ora, nella mia directory vendor/ ho una bella bower_componentscartella.

Aggiungimento di file CSS al nostro Gulp Styles Stream

Ma anche se volessi avere 2 tag link separati nel mio layout, non posso: Bootstrap non chiama più la directory web/ home. Quindi, sbarazzati del suo taglink.

In gulpfile.js, proviamo a sistemare le cose! Inizierò aggiungendo una nuova variabile di configurazione chiamata bowerDir, perché sarà molto comune fare riferimento a cose in quella directory. Impostala su vendor/bower_components:

41 linee gulpfile.js

… linee 1 – 3

var config = {

… righe 5 – 8

bowerDir: ‘vendor/bower_components’

};

… righe 11 – 41

Se apri quella directory, puoi vedere dove vive il file bootstrap.css. Notate che non è un file Sass – solo un normale vecchio CSS. In realtà c’è una versione Sass di Bootstrap, e puoi assolutamente usarla se vuoi controllare le variabili di Bootstrap.

Ma la domanda è: possiamo spingere i semplici file CSS attraverso la nostra funzione Sass-processingaddStyle? Certo! Aggiungiamo config.bowerDir poi /bootstrap/dist/css/bootstrap.css:

41 linee gulpfile.js

… righe 1 – 23

gulp.task(‘sass’, function() {

app.addStyle(, ‘main.css’);

… linee 30 – 33

});

… linee 35 – 41

E non dobbiamo nemmeno preoccuparci di ottenere il file min, perché ce ne stiamo già occupando. Questo file passerà attraverso il filtro sass, ma va bene così! Sembrerà semplicemente il più noioso file Sass di sempre.

Torna indietro ed esegui gulp:

gulp

E ora, main.css inizia con il glorioso codice Bootstrap. E sarebbe minificato se avessi passato il flag --production.

Il nostro sito dovrebbe essere ancora bello. Quindi aggiornate. Sì, è proprio come prima, ma con un file CSS in meno da scaricare.

Rinominare il task in styles

E prima di continuare, penso che possiamo fare un altro miglioramento. Il nostro compito si chiama sass. Cambiamolo in styles, perché il suo compito è proprio quello di elaborare gli stili, sia che si tratti di file CSS o Sass.

41 linee gulpfile.js

… linee 1 – 23

gulp.task(‘styles’, function() {

… linee 25 – 33

});

… linee 35 – 41

Dobbiamo anche cambiare quel nome nel task default. Ooops, e beforerestart Gulp, cambia anche il nome sul task watch in styles:

41 linee gulpfile.js

… linee 1 – 35

gulp.task(‘watch’, function() {

gulp.watch(config.assetsDir+’/’+config.sassPattern, )

});

… linea 39

gulp.task(‘default’, );

Ok, ora possiamo provare le cose. ctrl+c per fermare Gulp, e farlo ripartire:

gulp

Sì, nessun errore! E il sito è ancora Tri-tastic! Vedi cosa ho fatto?

Free Press