Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

Linea di comando per il Web Design: Padroneggiare i pacchetti di terze parti

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Grasping the Basics
The Command Line for Web Design: Powering Up Front End Code

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Adoperiamo comunemente pacchetti di terze parti in progetti di Web Design.

Carichiamo CSS di terze parti da progetti come Bootstrap e Foundation, e scripts come jQuery e Modernizr. Sempre più spesso utilizziamo pacchetti di terze parti in processi di sviluppo, come compilatori per preprocessori CSS o strumenti di pulizia e compressione del codice per massimizzare la velocità di caricamento ed esecuzione dei nostri siti.

L'aver a che fare con tutti questi pacchetti può rapidamente trasformarsi in un miscuglio di download manuale, trasferimento file e aggiornamenti. Certo, faremo lavorare il tutto, ma si tratta di tempo perso e l' intrinseca pesantezza del processo spesso porterà i progetti ad usare codice datato. Ora, esiste una via migliore, sfruttando gestori di pacchetti (Package Managers) potenziati da linea di comando.

In questo tutorial imparerete come il gestire pacchetti di terze parti sia una questione di digitare giusto dalle due alle cinque parole di istruzioni.

Nota: Se non avete seguito il primo tutorial di questa serie, Comprendere le basi, troverete molto utile iniziare da lì prima di proseguire.

I "Due Grandi" Package Managers

Per cominciare a usare la linea di comando in modo da gestire pacchetti di terze parti la prima cosa di cui avrete bisogno sarà un “sistema di gestione di pacchetti”, o “package manager”. Le due scelte di gran lunga più popolari tra i web designers in questo momento sono npm e Bower, i sistemi che imparerete a usare oggi.

npm (via Node.js)

Potreste aver già sentito di Node.js, una cornucopia di prelibatezze basata su Javascript che può potenziare tutto, dalle piattaforme blog, agli IDE di programmazione, ai media centers fino ad interi sistemi operativi.

Insieme all'installazione di Node.js troverete il package manager npm, un sistema tremendamente utile che vedrete utilizzato spesso nel corso di questa serie.

Al contrario di ciò che potreste subito pensare, npm non significa “Node Package Manager.” Ufficialmente sta per “npm is not an acronym” e sul sito ufficiale vedrete piccoli giochi di parole ogni volta che effettuerete un refresh, qualcosa come “never poke monkeys” e “newts parading majestically.”

In questo momento npm fornisce accesso e gestione a 127,664 pacchetti, pensati per qualsiasi tipo di proposito. Tra gli oggetti utili per il Web Design troverete pacchetti come:

  • Stylus
  • node-sass
  • LESS
  • Jade
  • UglifyJS
  • Bower
  • Grunt
  • Gulp
  • Yeoman
  • Autoprefixer
  • BrowserSync
  • Foundation CLI
  • UglifyJS
  • clean-css
  • Jeet.gs
  • Kouto Swiss

Per i propositi di questo tutorial useremo npm in unione a Node.js, anche se comunque rimane un'entità indipendente che può essere usata con altri sistemi come il nuovo arrivato IO.js.

Da principianti consiglio di seguire i tutorials usando Node.js, ma potreste esplorare altre opzioni più avanti.

Bower

La mia introduzione all'utilizzo della linea di comando per la gestione di pacchetti di terze parti era iniziata con Bower. Qualcuno me lo suggerì semplicemente dicendo

“Hai provato Bower? È fantastico!”

Non avevo alcuna idea per cosa sarebbe stato utilizzato, così andai su www.bower.io e uno sguardo alla lista dei pacchetti disponibili era tutto ciò di cui avevo bisogno per far scattare l'accensione della lampadina.

La libreria di pacchetti di Bower include cose come:

  • Bootstrap
  • AngularJS
  • jQuery
  • Font Awesome
  • HTML5 Boilerplate
  • Animate.css
  • Normalize.css
  • Modernizr
  • Underscore
  • Flat UI
  • jQuery UI
  • Handlebars
  • Masonry

Esiste una probabilità molto elevata che stiate già utilizzando con regolarità uno o due di quei pacchetti nei vostri progetti. Bower rende più rapido e facile l'utilizzo di ciò che già adoperate.

Quando utilizzare Bower rispetto a npm

In alcuni casi potreste trovare un pacchetto disponibile sia per npm che per Bower. Se così, quale versione dovreste utilizzare?

Entrambe queste opzioni installeranno e aggiorneranno pacchetti rapidamente. Non ci sono regole su quale utilizzare, e in definitiva svilupperete un vostro modo di fare le cose, così vi darò una semplice regola del pollice sul quale potrete basare le vostre decisioni per il momento.

Da una prospettiva da Web Design, la differenza si riduce semplicemente al come utilizzerete i pacchetti, e i due casi tipici saranno quelli di rilascio e produzione del codice front end rispetto allo sviluppo stesso.

Bower è pensato per la gestione front end dei pacchetti, così sceglietelo se state cercando qualcosa che sarà utilizzato da visitatori di un sito attraverso un browser.

Dall'altra parte i pacchetti npm saranno la scelta giusta se vorrete utilizzare un pacchetto come parte del processo di sviluppo e non verrà incluso nel prodotto finale.

Installare npm e Bower

Installare Node.js e npm

Per fortuna installare npm sarà abbastanza facile dal momento che lo troverete in bundle insieme a Node.js. Andate all'indirizzo http://www.nodejs.org ed effettuate il download dell'installer per la vostra piattaforma. Installatelo sulla vostra macchina e npm verrà installato insieme ad esso, quindi sarete pronti a procedere.

Importante! anche se avete già Node.js installato sul vostro sistema, seguite il passaggio sopra per essere sicuri di avere l'ultima versione. Se state usando una versione datata alcuni dei passaggi che seguiranno in questa serie potrebbero non funzionare.

Aggiornare npm

Secondo il sito di npm, è verosimile che possa essere disponibile una versione più aggiornata di npm rispetto a quella che trovate in bundle all'installazione di Node.js.

Per essere sicuri di avere l'ultima versione digitate:

Installare Git / MsysGit

Git, insieme a Node.js e npm, è un prerequisito per usare Bower. Git è anche un prerequisito per alcuni degli altri pacchetti orientati al Web Design che vorrete utilizzare, così vediamo di avere tutto impostato sul vostro sistema prima di procedere.

Per utenti OSX

Per gli utenti OSX vorrete andare al sito principale di Git, prendere l'installer binario ed eseguirlo come fareste con qualsiasi altro app installer: http://git-scm.com/download/mac

Per utenti Windows

Per usare Bower su Windows avrete invece bisogno di una versione specifica di Git per Windows chiamata msysGit. Cliccate il pulsante Download e ottenete l'installer, ma non eseguitelo ancora: http://msysgit.github.io

Il motivo per cui vi ho detto di non installarlo ancora è perché dovrete essere attenti a scegliere il settaggio corretto quando eseguirete l'installer. Quando vedrete la schermata sottostante, siate certi di selezionare Run Git from the Windows Command Prompt.

Per maggiori informazioni sull'installare msysGit come prerequisito di Bower vedete: A Note for Windows Users.

Installare Bower

Bower può essere installato via npm eseguendo questo comando:

Utenti Mac, dal momento che stiamo utilizzando il flag -g per installare Bower globalmente ricordate che probabilmente avrete bisogno di includere sudo all'inizio dell'istruzione, e poi digitare la password una volta pronti.

Le basi di npm e Bower

Inizializzare un progetto

Sia npm che Bower lavorano con files di manifesto specializzati che contengono informazioni riguardo il progetto e una lista di pacchetti che questo utilizza. In npm quel file viene chiamato “package.json” mentre nei progetti Bower viene definito come “bower.json”. Il modo più facile per creare questi files consiste nell'usare il comando init associato ad ognuno. Facciamolo adesso.

Via npm

Con il vostro terminale puntato alla cartella principale del vostro progetto, eseguite questa istruzione:

Vi verranno chieste una serie di domande cui potrete dare risposta all'interno del terminale, fornendo le informazioni per la creazione del vostro file “package.json”.

Approfondite la lettura del comando npm init qui: https://docs.npmjs.com/cli/init

Via Bower

Di nuovo, con il vostro terminale puntato alla cartella principale del vostro progetto, eseguite l'istruzione:

Proprio come il processo di inizializzazione di npm risponderete a una serie di domande e le vostre risposte formeranno il vostro file “bower.json”.

Approfondite la lettura del comando bower init qui: http://bower.io/docs/creating-packages/#bowerjson

Cercare i pacchetti

Con il progetto inizializzato siete pronti per importare i vostri pacchetti. Per farlo avrete bisogno di trovare i pacchetti che vorrete utilizzare sia attraverso npm che Bower.

Dovrete cercare nella posizione giusta dal momento che avrete bisogno di conoscere il nome corretto del pacchetto all'interno degli ecosistemi di npm o Bower, in modo da installarli e aggiornarli.

Via npm

Potrete cercare i pacchetti che volete usare con npm attraverso la barra di ricerca nella parte alta della homepage.

È inoltre possibile cercare direttamente attraverso la linea di comando con npm search <package>, anche se personalmente reputo più facile trovare quel che sto cercando direttamente dal sito npm.

Quando avrete trovato il pacchetto che vorrete utilizzare prendete nota del nome del pacchetto.

Via Bower

Cercare i pacchetti Bower può essere fatto via http://bower.io/search/.

Come nel caso di npm, prendete nota del nome del pacchetto che volete utilizzare una volta che lo trovate.

Installare nuovi pacchetti

Una volta che avrete trovato il pacchetto che volete utilizzare siete pronti per installarlo. Qui è dove userete il nome del pacchetto di cui avete preso nota. Nelle istruzioni sottostanti, usate quel nome ovunque vediate <package> in un'istruzione.

Via npm

Per installare localmente un pacchetto, ad esempio all'interno della cartella del vostro progetto, eseguite:

Il download del pacchetto verrà eseguito in una sottocartella denominata “node_modules”, da cui sarà possibile utilizzarlo all'interno del progetto. Per esempio:

Così come si possono installare i pacchetti localmente, esiste anche l'opzione di installare i pacchetti npm globalmente.

I pacchetti installati localmente sono utilizzabili solo all'interno del contesto del vostro progetto, ma i pacchetti installati globalmente possono essere usati ovunque sulla vostra macchina. Per esempio, una volta che il pacchetto “less” viene installato globalmente potrete usarlo per compilare qualsiasi documento “.less”, ovunque nel vostro sistema.

Per installare globalmente un pacchetto aggiungete il flag -g alla vostra istruzione:

Via Bower

Il processo di installazione per i pacchetti Bower è pressoché uguale a quello di npm, usando l'istruzione:

La differenza è che i pacchetti Bower vengono collocati nella sottocartella chiamata “bower_components”, per esempio:

Poiché userete Bower per installare pacchetti front end all'interno di specifici progetti tutte le vostre installazioni possono essere fatte in locale, così non avrete bisogno di usare il flag -g.

Lavorare con le dipendenze

Se siete interessati a condividere o semplicemente duplicare e lavorare con un progetto in cui avete utilizzato npm o Bower, la gestione delle dipendenze è un'ottima nozione da conoscere. Lasciatemi spiegare perché.

Ricorderete i files manifesto che avete creato precedentemente; “package.json” e “bower.json”. In ognuno di questi files potrete aggiungere una lista di pacchetti da cui il vostro progetto dipende.

Avete già visto come i pacchetti npm finiscono in una cartella nominata “npm_modules” e quelli di Bower in “bower_components”. Bene, la parte intrigante deriva dal fatto che se volete condividere il vostro progetto potrete omettere completamente entrambe le cartelle, fintantoché che avrete le dipendenze elencate nei file manifesto.

Questa procedura salverà facilmente un paio di centinaia di megabytes circa, rendendo più facile muoversi nel progetto.

Quando qualcuno prenderà in mano il vostro progetto potrà eseguire npm install e tutti i pacchetti presenti nel file “package.json” verranno immediatamente scaricati in una nuova cartella “npm_modules”.

Allo stesso modo, il comando bower install eseguirà il download delle dipendenze elencate nel file “bower.json” e li collocherà in una nuova cartella “bower_components”.

Dipendenze in Produzione & Sviluppo

Ci sono due tipi di dipendenze:

  1. Dipendenze di Produzione - nel contesto del web design ciò si riferisce a pacchetti che saranno distribuiti in front end, ad esempio Modernizr per la compatibilità attraverso i browsers.

  2. Dipendenze di Sviluppo - nel contesto del web design ciò si riferisce a pacchetti usati in sviluppo, ad esempio LESS per la compilazione di file .less.

Sia Bower che npm permettono di specificare dipendenze di produzione e sviluppo. Comunque, come dicevamo prima, userete Bower per pacchetti front end e npm per pacchetti di sviluppo. Così, imposteremo i pacchetti Bower come dipendenze di produzione e i moduli npm come dipendenze di sviluppo.

Il metodo per impostare dipendenze è identico in npm e Bower e consiste nell'aggiungere un flag all'istruzione che usate per installare un pacchetto.

Installazione come Dipendenza di Sviluppo

Per impostare un pacchetto come dipendenza di sviluppo aggiungete il flag --save-dev, ad esempio:

Il pacchetto verrà installato nello stesso modo che avete già visto, ma verrà aggiunto alla lista devDependencies nel file “package.json” in questo modo:

Installazione come Dipendenza di Produzione

Per impostare un pacchetto come dipendenza di produzione aggiungete il flag --save, ad esempio:

In questo caso il pacchetto verrà aggiunto alla lista dependencies nel file “bower.” in questo modo:

Nota: quando installate pacchetti npm globalmente con il flag -g, non dovrete preoccuparvi di usare nè il flag --save--save-dev.

Aggiornare i pacchetti

Aggiornare pacchetti consiste in una linea di istruzioni sia per Bower che per npm.

Via npm

Per pacchetti installati localmente eseguite la seguente istruzione nella cartella principale del vostro progetto dove si trova la cartella “node_modules”:

Per aggiornare globalmente i pacchetti installati aggiungete il flag -g:

Potrete anche escludere il nome così aggiornerete in gruppo e in una sola volta tutti i vostri pacchetti.

Per aggiornare tutti i pacchetti in uno specifico progetto puntate il terminale nella cartella principale ed eseguite:

E per aggiornare tutti i pacchetti installati globalmente eseguite:

Via Bower

La procedura per aggiornare i pacchetti Bower è uguale a quella per npm. Dalla cartella principale del vostro progetto, quella che ospita la cartella “bower_components”, eseguite questa istruzione:

Verrà effettuato automaticamente il download e aggiunto alla cartella “bower_components”.

Usare pacchetti npm e Bower

Una volta che avete installato i vostri pacchetti, vorrete probabilmente sapere come usarli, giusto?

Con i pacchetti Bower il processo sarà lo stesso che usereste per includere i vostri assets normalmente, ad esempio attraverso elementi HTML come script o link, caricando files direttamente dalla cartella “bower_components”.

Questa soluzione non è ottimale e ci sono modi migliori per farlo. Per esempio potreste unire tutti i files JS che state utilizzando nei pacchetti Bower in un file unico compresso e importare direttamente quel file.

Vedrete una dimostrazione di come farlo nel prossimo tutorial Automazione con i Task Runners.

Pacchetti installati via npm verrano tipicamente usati attraverso linea di comando o scripts di task runner.

Diversi pacchetti vengono rilasciati con comandi preimpostati che potrete usare per ogni sorta di attività quali compilazione, compressione, combinazione e altro. Queste specifiche attività possono essere automatizzate impostando task runners in modo da eseguire più attività in un'unica volta.

Imparerete queste metodologie sull'utilizzo dei pacchetti npm nel prosieguo di questa serie.

Nel prossimo Tutorial

Andando avanti vedremo come portare ad un altro livello di efficienza la vostra abilità nello scrivere codice front end, sia quando lo sviluppate che quando lo eseguite una volta completato.

Imparerete come usare la linea di comando per la compilazione di preprocessori, autoprefixing in CSS, ottimizzazione di file Javascript e CSS e compilazione abbreviata in HTML e nello sviluppo di template.

Ci vedremo nel prossimo tutorial, Potenziare il codice Front End.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.