Hoe projecten te configureren en te versterken met behulp van Bower

In deel 1 van onze Bower-serie hebben we u de essentiële functies van Bower getoond, waaronder het installeren, bijwerken en verwijderen van website-bibliotheken. Afgezien van deze biedt Bower ook enkele flexibiliteit. Hier zullen we u laten zien hoe u Bower kunt configureren en uw projecten ermee kunt versterken .

Wijzig de Bower Directory

Standaard maakt Bower een nieuwe mapnaam aan : bower_components . Als de naam u niet aanspreekt, kunt u deze wijzigen.

Eerst moeten we een nieuw bestand maken met de naam .bowerrc . Voeg vervolgens de volgende regel toe.

 {"map": "componenten"} 

Het vertelt Bower om de bibliotheken te maken en op te slaan die zijn geïnstalleerd in de map met de naam componenten .

Bower JSON

Bower JSON is een bestand dat uw project definieert als een Bower-pakket. Het bestand specificeert de projectnaam, de versie, de projectafhankelijkheden en informatie die zeer nuttig is om uw project bij te houden en te documenteren .

Om dit bestand te maken, navigeert u naar uw projectdirectory en typt u bower init . U wordt gevraagd om verschillende opties en vragen, inclusief de name (van uw project). Hoewel de restopties optioneel zijn, zou ik willen voorstellen dat u het volgende invult: description, version, main die de primaire bestanden van het project definieert, author, license, homepage en dependencies die de bibliotheken zijn waar uw project op vertrouwt.

Als u de bibliotheken al in bower_components hebt geïnstalleerd, kunt u Y selecteren als wordt gevraagd " stel momenteel geïnstalleerde componenten in als afhankelijkheden?" “; Bower registreert ze automatisch als de afhankelijkheden in het bestand.

Bower zal u de inhoud tonen voordat het bestand wordt aangemaakt. Als het er goed uitziet, kunt u typen Y ...

... en een nieuw bestand met de naam bower.json wordt aangemaakt in uw projectdirectory.

Oude projecten exporteren naar Bower

Nu u weet dat Bower een geweldig hulpmiddel is om u te helpen bij het beheer van uw projecten, wilt u het misschien gebruiken in uw vorige projecten. Typisch, in uw oude projecten, hebt u de bibliotheken op deze manier binnen de .

Als we dit als voorbeeld nemen, kunnen we hier zien dat het project afhankelijk is van jQuery, Normalize en Accounting.js (zie onze vorige tutorial, Numerieke indeling met Accounting.Js).

Laten we dus bower init in dit project. Open vervolgens de bower.json en definieer deze als de afhankelijkheden.

 "afhankelijkheden": {"jQuery": "1.10.2", "normalize-css": "3.0.1", "accounting": "0.3.2"} 

Voer vervolgens het bower install commando uit. Hiermee wordt bower.json gescand en de bibliotheken geïnstalleerd die worden vermeld onder dependencies .

U kunt veilig de oude bibliotheken verwijderen en ze koppelen aan de componentendirectory van Bower. En iedereen die later het project zal uitvoeren, kan de bibliotheken gemakkelijk installeren en bijwerken met Bower-opdrachten.

Afronden

Bower geeft ons veel configuraties, waarvan we de meeste hier niet volledig kunnen behandelen. Om meer van de opdrachtregels te verkennen, kunt u bower help het hulpprogramma Bower bower help die de andere Bower-hulpprogramma's zal retourneren. Ten slotte kunt u Bower op elke projectschaal (klein of groot) gebruiken. Het zou nuttig moeten zijn om het project beter beheersbaar te maken.

21 Google Maps Tips en trucs die u moet weten

Google Maps is mijn go-to-app zodra ik de deur uit ga . Niet alleen omdat ik de weg weet, maar ook voor de onschatbare informatie die het biedt over mijn route. Ik krijg verkeersinformatie, leer meer over plaatsen in de buurt, houd de tijd en afstand bij, plan mijn volledige reis en nog veel meer.Van het stylen van Google maps tot echt dichtbij inzoomen, als mijn bijbehorende app voor meer dan 5 jaar zijn er veel trucs die ik heb geleerd

(Technische en ontwerptips)

Statische sites bouwen met Kit en MINDER - Deel I

In deze post zullen we je door een project leiden. In het project zullen we een statische HTML-website maken en zullen we Kittaal gebruiken voor het construeren van de HTML-pagina's en LESS CSS als de stijltaal.Als je ons vorige artikel over de introductie van "Kit" hebt gevolgd, zul je zien dat het ons toestaat variabelen te gebruiken en externe bestanden te importeren, waardoor het gemakkelijk is om een ​​project met een groot aantal HTML-pagina's te beheren.Omd

(Technische en ontwerptips)