Share
Usiamo comunemente pacchetti di terze parti in progetti di web design.
Carichiamo in CSS di terze parti da progetti come Bootstrap e Foundation e script come jQuery e Modernizr. Sempre più spesso utilizziamo anche pacchetti di terze parti come parte dei processi di sviluppo, come compilatori per i preprocessori CSS o strumenti di pulizia e compressione del codice per massimizzare la velocità di caricamento e esecuzione dei nostri siti.
Gestire tutti questi pacchetti può rapidamente diventare un disastro nel download manuale, nel trasferimento di file e nell'aggiornamento. Certo, lo stiamo facendo funzionare, ma è dispendioso in termini di tempo e la sua pesantezza spesso lascia i progetti usando un codice scaduto. Ora c'è un modo migliore, usando i gestori di pacchetti alimentati da linea di comando.
In questo tutorial imparerai come gestire i pacchetti di terze parti semplicemente digitando una manciata di comandi da due a cinque parole.
Nota: Se non hai seguito il primo tutorial di questa serie, Grasping the Basics, ti sarà di aiuto farlo prima di iniziare qui.
Per iniziare a utilizzare la riga di comando per gestire i pacchetti di terze parti, la prima cosa di cui hai bisogno è un "sistema di gestione dei pacchetti" o "gestore dei pacchetti". Le due scelte che sono di gran lunga le più popolari tra i web designer in questo momento sono npm e Bower, e quelli sono i sistemi che imparerai ad usare oggi.
Potresti aver sentito parlare di Node.js, un bagaglio di gadget basato su JavaScript che può alimentare tutto, dalle piattaforme di blog, agli IDE di codifica, ai media center a interi sistemi operativi.
Insieme a un'installazione di Node.js, arriva il gestore di pacchetti npm, un sistema tremendamente utile che vedrai utilizzato spesso in questa serie.
Contrariamente a quanto si potrebbe pensare, npm lo fa non sta per "Node Package Manager". Ufficialmente significa "Npm non è un acronimo" e nella parte superiore del sito vedrete piccole battute salire ogni aggiornamento come "mai colpire le scimmie" e "i principianti sfilano maestosamente".
A partire da questo momento, npm fornisce accesso e gestione per 127.664 pacchetti progettati per tutti i diversi tipi di scopi. Tra gli articoli utili per il web design troverai pacchetti come:
Per gli scopi di questo tutorial useremo npm in congiunzione con Node.js, tuttavia è un'entità indipendente che può essere utilizzata con altri sistemi come il nuovo arrivato IO.js.
Come principiante, ti consiglio di seguire insieme alle esercitazioni utilizzando Node.js, ma potresti voler esplorare altre opzioni in seguito.
La mia introduzione all'uso della linea di comando per la gestione dei pacchetti di terze parti è arrivata tramite Bower. Qualcuno mi ha avvertito dicendo semplicemente
"Hai provato Bower? È meraviglioso!"
Non avevo idea di cosa avrebbe dovuto essere usato, quindi sono andato su www.bower.io e uno sguardo alla lista di pacchetti disponibili era tutto ciò che serviva per far scattare la lampadina.
La libreria del pacchetto Bower include cose come:
È molto probabile che tu stia utilizzando regolarmente uno o due di questi pacchetti nei tuoi progetti. Bower rende più veloce e facile per te continuare a farlo.
In alcuni casi potresti trovare un pacchetto disponibile su entrambi i npm e Bower. In tal caso, quale versione dovresti usare?
Entrambe queste opzioni installeranno e aggiorneranno i pacchetti tanto velocemente quanto l'un l'altro. Non ci sono regole rigide su cui usare, e alla fine svilupperai il tuo modo di fare le cose, quindi ti darò una regola generale su cui basare le tue decisioni per ora.
Dal punto di vista del web design, la differenza dipende in realtà dal modo in cui userete i pacchetti, e i due casi d'uso tipici che avrete sono per la distribuzione frontale e l'utilizzo dello sviluppo.
Bower è progettato per la gestione dei pacchetti front-end, quindi sceglilo se stai cercando qualcosa che verrà consumato dai visitatori del sito tramite un browser.
D'altra parte, i pacchetti npm saranno la scelta giusta se si intende utilizzare un pacchetto solo come parte del processo di sviluppo e non sarà incluso nel prodotto finito.
Per fortuna, l'installazione di npm è abbastanza semplice perché è integrata con il programma di installazione di Node.js. Vai su http://www.nodejs.org e scarica il programma di installazione per la tua piattaforma. Installalo sul tuo computer e npm verrà installato insieme a esso, quindi sarai pronto per procedere.
Importante! Anche se hai già installato Node.js sul tuo sistema, segui il passaggio precedente per assicurarti di avere la versione più recente. Se stai utilizzando una versione obsoleta, alcuni dei passi da seguire mentre passi attraverso questa serie potrebbero non funzionare.
Secondo il sito di npm, è probabile che ci sia una versione successiva di npm disponibile rispetto a quella che si ottiene in bundle con l'installazione di Node.js.
Per assicurarti di essere sull'ultima versione, esegui:
[sudo] npm installa npm -g
Git, insieme a Node.js e npm, è un prerequisito per l'utilizzo di Bower. Git è anche un prerequisito per alcuni degli altri pacchetti orientati al web design che vorresti utilizzare, quindi cerchiamo di ottenere tutto il necessario sul tuo sistema prima di passare a.
Per gli utenti OSX, ti consigliamo di visitare il sito Web Git principale, prendere l'installer binario ed eseguirlo come faresti con qualsiasi altro programma di installazione di app: http://git-scm.com/download/mac
Al fine di utilizzare Bower su Windows, avrai invece bisogno di una versione specifica di Git per Windows denominata msysGit. Colpire il Scaricare e prendi il programma di installazione eseguibile, ma non eseguirlo ancora: http://msysgit.github.io
Il motivo per cui ho detto di non installarlo è che dovrai fare attenzione a scegliere le impostazioni corrette durante l'esecuzione del programma di installazione. Quando vedi la schermata qui sotto, assicurati di controllare Esegui Git dal prompt dei comandi di Windows.
Per ulteriori informazioni sull'installazione di msysGit come prerequisito per Bower, consultare: Una nota per utenti Windows.
Bower può essere installato tramite npm eseguendo questo comando:
[sudo] npm install -g bower
Utenti Mac, perché stiamo usando il -g flag per installare Bower a livello globale ricorda che probabilmente dovrai includere sudo all'inizio del comando, quindi inserire la password quando richiesto.
Sia npm che Bower funzionano con file manifest specializzati che contengono informazioni su un progetto e un elenco di pacchetti che utilizza. Con i progetti npm il file viene chiamato "package.json" e nei progetti Bower viene chiamato "bower.json". Il modo più semplice per creare questi file è usare il dentro comando associato a ciascuno. Facciamolo ora.
Con il terminale puntato verso la cartella principale del tuo progetto, esegui questo comando:
npm init
Questo ti farà una serie di domande a cui puoi rispondere all'interno del terminale, fornendo le informazioni che il tuo file "package.json" sarà creato da.
Maggiori informazioni su npm init comando su: https://docs.npmjs.com/cli/init
Di nuovo, con il terminale puntato verso la cartella principale del progetto, esegui questo comando:
bower init
Proprio come con il processo di inizializzazione di npm, risponderai a una serie di domande e le tue risposte formeranno il tuo file "bower.json".
Maggiori informazioni su bower init comando su: http://bower.io/docs/creating-packages/#bowerjson
Con il progetto inizializzato sei pronto per iniziare a portare i pacchetti. Per fare questo dovrai trovare i pacchetti che vuoi usare attraverso npm o Bower.
È necessario cercare nel punto giusto in quanto è necessario conoscere il nome corretto del pacchetto all'interno dell'ecosistema npm o Bower per poterlo installare e aggiornare.
Puoi cercare i pacchetti che vuoi usare con npm tramite la barra di ricerca nella parte superiore della loro homepage.
È anche possibile cercare direttamente tramite la riga di comando con ricerca npm , tuttavia personalmente trovo più facile trovare quello che sto cercando direttamente sul sito di npm.
Quando trovi il pacchetto che desideri utilizzare, prendi nota del nome del pacchetto.
La ricerca dei pacchetti Bower può essere effettuata tramite http://bower.io/search/.
Come con npm, prendi nota del nome del pacchetto che vuoi usare una volta trovato.
Una volta trovato il pacchetto che desideri utilizzare, sei pronto per installarlo. È qui che utilizzerai il nome del pacchetto che hai annotato. Nelle istruzioni sottostanti, usa quel nome ovunque tu veda
Per installare localmente un pacchetto, ad esempio nella cartella del progetto, eseguire:
installazione di npm
Il pacchetto verrà scaricato in una sottocartella denominata "node_modules", rendendola disponibile per l'uso all'interno del progetto. Per esempio:
Oltre a installare i pacchetti localmente, c'è anche la possibilità di installare i pacchetti npm a livello globale.
I pacchetti installati localmente sono disponibili solo per l'uso nel contesto del progetto, ma i pacchetti installati a livello globale possono essere utilizzati da qualsiasi punto della macchina. Ad esempio, una volta che il pacchetto "less" è stato installato globalmente, puoi usarlo per compilare qualsiasi documento ".less", ovunque nel tuo sistema.
Per installare globalmente un pacchetto, allegare il -g contrassegno al tuo comando:
[sudo] installazione di npm-g
Il processo di installazione per i pacchetti Bower è quasi identico a quello con npm, utilizzando il comando:
installazione di bower
La differenza è che i pacchetti Bower sono collocati in una sottocartella denominata "bower_components", ad esempio:
Poiché utilizzerai Bower per distribuire pacchetti front-end all'interno di progetti specifici, tutte le tue installazioni possono essere eseguite localmente, quindi non dovrai utilizzare il -g bandiera.
Se sei interessato alla condivisione o anche solo alla duplicazione e allo spostamento di un progetto che hai utilizzato npm o Bower, la gestione delle dipendenze è una grande cosa da sapere. Lasciami spiegare perché.
Ricorderai i file manifest che hai creato in precedenza; "Package.json" e "bower.json". In ognuno di questi file puoi aggiungere un elenco di pacchetti da cui dipende il tuo progetto.
Hai già visto come i pacchetti npm vanno in una cartella denominata "npm_modules" e Bower in "bower_components". Bene, la cosa interessante è che se vuoi condividere il tuo progetto puoi completamente omettere entrambe le cartelle, purché le tue dipendenze siano elencate nei tuoi file manifest.
Questo può facilmente farti risparmiare un paio di centinaia di megabyte, rendendo molto più semplice lo spostamento del tuo progetto.
Quando qualcun altro prende possesso del tuo progetto, può correre installazione di npm e tutti i pacchetti elencati nel file "package.json" verranno automaticamente scaricati in una nuova cartella "npm_modules".
Allo stesso modo, il comando installazione di bower scaricherà automaticamente tutte le dipendenze elencate nel file "bower.json" e le inserirà in una nuova cartella "bower_components".
Esistono due tipi di dipendenze:
Dipendenze di produzione - nel contesto del web design ciò si riferisce ai pacchetti che verranno distribuiti sul front-end, ad es. Modernizr per compatibilità cross browser.
Dipendenze dello sviluppo - nel contesto del web design ciò si riferisce ai pacchetti utilizzati durante lo sviluppo, ad es. MENO per la compilazione di file .less.
Bower e npm consentono di specificare dipendenze di produzione e sviluppo. Tuttavia, come discusso in precedenza, utilizzerai Bower per i pacchetti front-end e npm per i pacchetti di sviluppo. Pertanto, imposteremo i pacchetti Bower come dipendenze di produzione e i tuoi moduli npm come dipendenze dello sviluppo.
Il metodo per impostare le dipendenze è lo stesso sia in npm che in Bower, e cioè aggiungere un flag al comando che usi per installare un pacchetto.
Per impostare un pacchetto come dipendenza di sviluppo, aggiungere il --save-dev bandiera, ad es.
installazione di npm--save-dev
Il pacchetto verrà installato nello stesso modo in cui l'hai già visto, ma verrà aggiunto all'elenco di devDependencies nel tuo file "package.json" in questo modo:
Per impostare un pacchetto come dipendenza dalla produzione, aggiungere il --salvare bandiera, ad es.
installazione di bower--salvare
In questo caso il pacchetto verrà aggiunto all'elenco di dipendenze nel file "bower." in questo modo:
Nota: quando si installano pacchetti npm globalmente con -g bandiera, non devi preoccuparti di usare entrambi --salvare né --save-dev bandiere.
L'aggiornamento dei pacchetti è anche un comando a riga singola sia per Bower che per npm.
Per i pacchetti installati localmente, eseguire il seguente comando nella cartella principale del progetto in cui si trova la cartella "node_modules":
aggiornamento npm
Per aggiornare invece i pacchetti installati a livello globale aggiungere il -g bandiera:
[sudo] aggiornamento npm-g
Puoi anche lasciare il nome del pacchetto in modo da poter aggiornare in gruppo tutti i tuoi pacchetti contemporaneamente.
Per aggiornare tutti i pacchetti in un progetto specifico, punta il terminale nella sua cartella principale ed esegui:
aggiornamento npm
E per aggiornare tutti i pacchetti installati globalmente esegui:
[sudo] aggiornamento npm -g
L'aggiornamento dei pacchetti di Bower è essenzialmente lo stesso di npm. Dalla cartella principale del tuo progetto, quella che ospita la tua cartella "bower_components", esegui questo comando:
aggiornamento del pergolato
L'ultima versione verrà automaticamente scaricata e aggiunta nella cartella "bower_components".
Una volta installati i pacchetti, probabilmente vorrai sapere come utilizzarli effettivamente, giusto?
Con i pacchetti di Bower, il processo può essere lo stesso che si utilizzerebbe per inserire le risorse normalmente, ad esempio tramite copione o collegamento elementi nel codice HTML, caricando i file direttamente dalla cartella "bower_components".
Tuttavia questo non è ottimale e ci sono modi migliori per farlo. Ad esempio, potresti unire tutti i file JS che stai utilizzando dai pacchetti Bower in un file compresso e caricarlo.
Vedrai una dimostrazione su come procedere nel prossimo tutorial Automation with Task Runners.
I pacchetti installati tramite npm verranno in genere utilizzati tramite script a riga di comando o di task runner.
Diversi pacchetti hanno una propria serie di comandi incorporati che è possibile utilizzare per tutti i tipi di attività come la compilazione, la compressione, la combinazione e altro. Queste attività specifiche del pacchetto possono a loro volta essere automatizzate impostando i responsabili delle attività per eseguire più attività contemporaneamente.
Imparerai come utilizzare i pacchetti npm in entrambi i modi nelle successive esercitazioni di questa serie.
Prossimamente passeremo attraverso il modo in cui puoi sfruttare la riga di comando per aggiungere un nuovo livello di efficienza al tuo codice di front-end, sia nel modo in cui lo sviluppi sia come viene eseguito una volta completato.
Imparerai come utilizzare la riga di comando per la compilazione del preprocessore, la correzione automatica dei CSS, l'ottimizzazione dei file JS e CSS e la compilazione per la stenografia e il templating dell'HTML.
Ci vediamo nel prossimo tutorial, Accensione del codice frontale.
Accentsconagua