npm, bower, github, bootstrap - Durchblick?!

Struct · 11. Oktober 2015

Guten Tag

Ich würde gerne eine responsive Website mit Bootstrap erstellen. Diese soll dann gleichermaßen auf dem Desktop, sowie auf mobilen Endgeräte laufen.

Allerdings blick ich nicht ganz durch bei denganzen Begriffen und Frameworks. Könnte mir das jemand vielleicht in eigenen Worten kurz erklären? Die offiziellen Erklärungen habe ich schon durchgelesen, aber habe dennoch noch Fragen.

ALSO...

Ich habe mir ein Template ausgesucht. Das gibt es bei Github.
1. Frage: Rechts steht da Clone in Desktop oder Download ZIP. Ist das genau das gleiche? Dann ist ja das ZIP runterladen viel schneller. Hab mal git installiert und in der Konsole (Windows) git eingegeben, aber Befehl nicht gefunden.

Dann steht da Install via bower. Wenn ich power installieren will steht da, dass Bower: node, npm und git benötigt.
2. Frage: Ich dachte npm ist schon so ein Package Manager. Bower soll das aber scheinbar auch sein. Wieso braucht Bower dann npm?

3. Frage: Wie gehe ich nun am besten vor, was muss ich alles installieren, in welcher Reihenfolge? Wäre das so richtig?
- node: https://nodejs.org/en/
- git: https://git-scm.com/download/win (muss ich mich da dann auch anmelden?)
- npm: da steht auf der Seite, dass es in node inbegriffen ist, also nix installieren?
- bower: über npm
- bootstrap template: über bower

Vielen Dank

e_Lap · 11. Oktober 2015

ähm dir fehlt grundlegendes Wissen im Bereich Development und Web. So wirst du keine Webseite erstellen, so leicht geht das dann doch nicht.
Vielleicht kannste was mit Wordpress oder nem Webseitenbaukasten (www.bubble.is) machen.

Alternativ versuche doch einfach erstmal per Xampp local HTML und CSS kennen zulernen. Hier kannste ja gerne Bootstrap als "Vorlage" verwenden. Wenn die Grundlagen laufen, kannste dir ja Javascript angucken.

Struct · 11. Oktober 2015

Hab mit HTML und CSS (mit Hilfe von XAMPP) schon Websites erstellt und auch mit Bootstrap. Allerdings nie Bower oder Github (über clonen) verwendet.

Bitte wirklich nicht falsch verstehen, aber wäre jemand so lieb und würde auf die Fragen eingehen und nicht mangelndes Wissen bescheinigen

Vielen Dank im voraus

sparvar · 11. Oktober 2015

das was du schreibst riecht stark nach angularJS.
Da kann ich ne lektüre empfehlen - der im anfang nicht schlecht schreibt, dann sich meiner meinung nach aber verliert. am ende aber wieder einen guten überblick über die von dir genannten Themen gibt.

- AngularJS: Moderne Webanwendungen und Single Page Applications mit JavaScript
- dazu noch AngularJs Tutorials auf den üblichen Seiten wie W3Schools & co.

Rossie · 11. Oktober 2015

Struct schrieb:
1. Frage: Rechts steht da Clone in Desktop oder Download ZIP. Ist das genau das gleiche? Dann ist ja das ZIP runterladen viel schneller.

Du hast erst einmal die gleichen Dateien. Aber wenn Du die Dateien lediglich aus dem Archiv entpackst, geschieht das außerhalb der Versionsverwaltung und das will man meist nicht. Von daher ist "git clone <repository>" das was man normalerweise nutzt.

Struct schrieb:
Hab mal git installiert und in der Konsole (Windows) git eingegeben, aber Befehl nicht gefunden.

Shell neu gestartet? Ansonsten überprüfe die Installation und/oder den Pfad.

Struct schrieb:
2. Frage: Ich dachte npm ist schon so ein Package Manager. Bower soll das aber scheinbar auch sein. Wieso braucht Bower dann npm?

Bower nutzt node.js und für die Abhängigkeiten kommt npm zum Zuge.

Struct schrieb:
3. Frage: Wie gehe ich nun am besten vor, was muss ich alles installieren, in welcher Reihenfolge? Wäre das so richtig?

- npm: da steht auf der Seite, dass es in node inbegriffen ist, also nix installieren?

Genau, ist Teil von node.js, also nix extra installieren.

e_Lap · 11. Oktober 2015

Struct schrieb:
Bitte wirklich nicht falsch verstehen, aber wäre jemand so lieb und würde auf die Fragen eingehen und nicht mangelndes Wissen bescheinigen
Vielen Dank im voraus

Das war nicht meine Intention, aber du hast halt deine Fragen so formuliert, dass ich das dadraus geschlossen habe. Beispielsweise die Path Variable läuft doch jedem Entwickler in den ersten Stunden über den Weg.
Desweiteren deine Frage zu Git. Clonen und runterladen ist halt vom Ding her doch grundverschieden. Obwohl man mit beiden Möglichkeiten die Dateien lokal speichert.
Wenn du schon Webseiten erstellt hast, wirst du diese doch in einem Repository gespeichert haben?

T0a5tbr0t · 12. Oktober 2015

Die Frage ist, ob du Bootstrap anpassen willst (also eigene Farben, Styles etc.). Dann würde ich die original Quellen herunterladen (idealerweise mit git) um die less Dateien selber anpassen und kompilieren zu können.
Wenn du erst nur Bootstrap kennenlernen willst, muss man gar keinen Paketmanager nutzen. Das ist vllt. zum automatisierten updaten gut. An sich ist Bootstrap halt nur ein Haufen CSS und ein paar JavaScript Bausteine, kann man alles fertig herunterladen.

Auf Windows: Git kann man eigentlich von der normalen Konsole aus nutzen, wenn man bei der Installation die richtige Option gewählt hat, sonst nur mit der "Git Bash" welche im Startmenü sein sollte.

Bower ist mit npm tatsächlich redundant. Der war mal als Paketmanager extra für Frontend Krams gedacht, aber das übernimmt immer mehr npm. Wenn man Bower nicht schon verwendet, würde ich auch nicht einsteigen.
Aber node / npm genauer anzupacken kann sich lohnen. Sehr viele Frontendtools nutzen node mittlerweile als Plattformunabhängige Laufzeitumgebung.

fhtagn · 13. Oktober 2015

Man muss nicht unbedingt npm/node.js/bower usw. verwenden.

Das Problem ist, dass sehr viele Beispiele und Tutorials Codekonstrukte benutzen, die mit den aktuellen Browsern inkompatibel sind und deshalb durch einen Bauprozess transformiert werden müssen. Oft sieht man z.B. das Modulsystem von node.js aka require("modulname"). Zum Bauen von solchem Code wird das npm-Plugin browserify benötigt, das JS und Html so anzupasst, dass das Ganze im Browser lauffähig wird.

Mit common.js gibt es Bestrebungen, ein Modulsystem wie das von node.js zu standardisieren. Allerdings habe ich noch keine passende Bibliothek gefunden, die das problemlos bereitstellt. AMD (Asynchronous Module Definition) ist ein weiterer Ansatz, der langsam in Fahrt kommt. So gut wie alle bekannten JS-Bibliotheken sind mittlerweile AMD-Module. Die einzige anfängliche Hürde ist, dass die Syntax umfangreicher/ungewohnter ist als die von node.js/common.js. Die bekannteste AMD-Bibliothek ist require.js.

Beispielcode:

Code:

// Zu bauen mit npm + browserify.

var $ = require("jquery");
require("bootstrap");

$("body").text("hello world");

Code:

// require.js in die Webseite einbinden. Kein Bauen erforderlich.

require(["jquery", "bootstrap"], function($) {

    $("body").text("hello world");
});

TWry · 14. Oktober 2015

Tipp von mir: schau dir mal Yeoman an. Um Yeoman zu bekommen, mußt du zunächst node installieren und sicherstellen, dass es im Pfad ist. Danach ggf. ein neues Terminalfenster starten weil ansonsten die Pfadänderung nicht im aktuellen Fenster übernommen wird. Dann per

Code:

npm install -g yo bower grunt-cli gulp generator-webapp

die nötigen Pakete installieren. Mit

Code:

mkdir my-yo-project
cd my-yo-project
yo webapp

erzeugst du dann ein Grundgerüst für deine Web-Applikation. Yeoman wird dich fragen, ob du Sass, Bootstrap und Modernizer nutzen möchtest. Sass ist eine Erweiterung von CSS, mit der du u.a. mit Variablen arbeiten kannst, was (wie du sicherlich weißt) mit normalem CSS nicht geht. Mit der Leertaste kannst du jede einzelne Option an/abwählen. Anschließend baut Yeoman dir dein Applikationsgerüst zusammen.

Mit

Code:

grunt serve

startest du einen lokalen Webserver und es wird ein Browserfenster automatisch geöffnet, was dir die Applikation zeigt. Wenn du das Browserfenster geöffnet läßt, und daneben dein Editorfenster positionierst und den Inhalt zum Beispiel von app/index.html änderst, wird die Änderung sofort sichtbar. Cool, oder?

Falls du das alles brauchen kannst, empfehle ich, dass du dir ein paar Tutorials zu dem Thema auf Youtube ansiehst.

Suche

npm, bower, github, bootstrap - Durchblick?!

Struct

Gast

e_Lap

Commander

Struct

Gast

sparvar

Lt. Commander

Rossie

Commodore

e_Lap

Commander

T0a5tbr0t

Lieutenant

fhtagn

Ensign

TWry

Ensign

Ähnliche Themen