Come configurare i progetti e rinforzarli usando Bower

Nella parte 1 della nostra serie di Bower, vi abbiamo mostrato le funzioni essenziali di Bower, che includono l'installazione, l'aggiornamento e la rimozione delle librerie dei siti Web. Oltre a questi, Bower offre anche alcune flessibilità. Qui ti mostreremo come configurare Bower e rinforzare i tuoi progetti con esso.

Cambia la directory di Bower

Di default Bower creerà un nuovo nome di directory: bower_components . Se il nome non ti appella, puoi cambiarlo.

Per prima cosa, dobbiamo creare un nuovo file chiamato .bowerrc . Quindi aggiungere la seguente riga in esso.

 {"directory": "componenti"} 

Indica a Bower di creare e salvare le librerie installate nella cartella denominata componenti .

Bower JSON

Bower JSON è un file che definisce il tuo progetto come un pacchetto Bower. Il file specifica il nome del progetto, la versione, le dipendenze del progetto e le informazioni che sono molto utili per tenere traccia e documentare il progetto .

Per creare questo file, accedere alla directory del progetto e digitare bower init . Ti verranno chieste varie opzioni e domande, incluso il name (del tuo progetto). Mentre le restanti opzioni sono opzionali, ti suggerisco di riempire quanto segue: description, version, main che definisce i file primari del progetto, l' author, la license, la homepage e le dependencies che sono le librerie su cui si basa il tuo progetto.

Se le librerie bower_components già installate in bower_components, è possibile selezionare Y quando viene richiesto di " impostare i componenti attualmente installati come dipendenze? “; Bower li registrerà automaticamente come dipendenze nel file.

Bower ti mostrerà il contenuto prima di creare il file. Se sembra buono, puoi digitare Y ...

... e un nuovo file chiamato bower.json verrà creato nella directory del progetto.

Esportare vecchi progetti in Bower

Ora che sai Bower è un ottimo strumento per aiutarti a gestire i tuoi progetti, potresti volerlo usare nei tuoi progetti precedenti. Tipicamente, nei tuoi vecchi progetti, potresti aver collegato le librerie in questo modo all'interno di .

Prendendo questo come esempio, qui possiamo vedere che il progetto dipende da jQuery, Normalize e Accounting.js (vedi il nostro precedente tutorial, Formatting Numbers With Accounting.Js).

Quindi, bower init in questo progetto. Quindi apri il file bower.json e definiscili come dipendenze.

 "dipendenze": {"jquery": "1.10.2", "normalize-css": "3.0.1", "accounting": "0.3.2"} 

Quindi, eseguire il comando di bower install . Scansionerà bower.json e installerà le librerie elencate nelle dependencies .

Puoi tranquillamente eliminare le vecchie librerie e collegarle alla directory dei componenti di Bower. E chiunque svolgerà il progetto in un secondo momento potrebbe facilmente installare e aggiornare le librerie con i comandi di Bower.

Incartare

Bower ci offre molte configurazioni, molte delle quali non possiamo coprire completamente qui. Per esplorare più delle sue linee di comando, è possibile digitare la guida di bower help che restituirà le altre utilità di Bower. Infine, puoi utilizzare Bower su qualsiasi scala di progetto (piccola o grande). Dovrebbe essere utile rendere il progetto più gestibile.

20 siti Web con elementi di geometria non ortodossi per la tua ispirazione

Anche se l'argomento secondo cui la maggior parte degli utenti di Internet oggi è sempre "on-the-go" e sono più interessati a fare le cose nel modo più semplice e veloce è abbastanza plausibile, i "creativi" difficilmente sono d'accordo con l'idea di rinunciare all'unicità e estetica per la prevedibilità.Per q

(Consigli tecnici e di design)

Il 2017 sta per portare un ulteriore calo del boom tecnologico? [Editoriale]

L'anno scorso non è stato molto gentile con molti che lavorano nel settore tecnologico. Dietro il lancio di nuovi prodotti e servizi, molte aziende tecnologiche erano impegnate in licenziamenti, ridimensionamenti e ristrutturazioni, a indicare che il periodo di boom della scena tecnologica potrebbe finalmente finire .

(Consigli tecnici e di design)