Was ist ein vernünftiger Workflow zum Entwerfen von Webanwendungen?

Es ist schon eine Weile her, dass ich umfangreiche Webentwicklungen durchgeführt habe und ich möchte die neuesten Praktiken nutzen, aber ich habe Mühe, den Workflow zu visualisieren, um alles zu integrieren.

Folgendes möchte ich verwenden:

• CakePHP-Framework
• jsmin (JavaScript Minify)
• SASS (Synctactically Awesome StyleSheets)
• Git

CakePHP:

Ziemlich selbsterklärend, nehmen Sie Änderungen vor und aktualisieren Sie die Quelle.

jsmin:

Wenn Sie ein Skript ändern, führen Sie jsmin manuell aus, um den neuen minimierten Code auszugeben, oder führen Sie besser einen Pre-Commit-Hook aus, der automatisch jsmin-Ausgaben von geänderten Javascript-Dateien generiert. Angenommen, ich habe keine Kenntnisse über die Implementierung von Commit-Hooks.

SASS:

Mir gefällt das, was SASS zu bieten hat, sehr gut, aber mir ist auch bewusst, dass SASS-Code standardmäßig nicht von Browsern unterstützt wird. Daher muss der SASS-Code irgendwann in normales CSS umgewandelt werden. An welchem ​​Punkt im Workflow ist dies erledigt?

Git

Ich habe Angst, es zuzugeben, aber als ich das letzte Mal eine wesentliche Webentwicklung durchgeführt habe, habe ich keine SCM-Quellcodeverwaltung verwendet (IE, ich habe die Quellcodeverwaltung verwendet, aber sie bestand aus einem sehr detaillierten Änderungsprotokoll mit Sicherungen).

Ich habe seitdem viel Erfahrung mit Git (sowie Mercurial und SVN) für die Desktop-Entwicklung, aber ich frage mich, wie ich es am besten für die Web-Entwicklung implementieren kann.

Ist es üblich, ein Remote-Repository auf dem Webhost zu implementieren, damit ich die Änderungen direkt auf den Produktionsserver übertragen kann, oder gibt es ein plattformübergreifendes Tool (Windows / Linux), mit dem nur geänderte Dateien einfach auf den Produktionsserver hochgeladen werden können? . Gibt es Webhosting-Unternehmen, die die Implementierung eines Remote-Repositorys vereinfachen? Benötige ich SSH-Zugriff usw.

Ich weiß, wie ich dies auf meinem eigenen Testserver mit einem Remote-Repository mit einem separaten Remote-Tracking-Zweig erreichen kann, aber ich habe es noch nie zuvor auf einem Remote-Produktions-Webhosting-Server durchgeführt, sodass mir die Optionen noch nicht bekannt sind.

Extra:

Ich habe überlegt, ein Javascript-Framework zu implementieren, bei dem separate Javascript-Dateien, die auf einer Seite verwendet werden, für jede Seite auf dem Produktionsserver zu einer einzigen Datei kompiliert werden, um die Anzahl der pro Seite erforderlichen Dateidownloads zu begrenzen.

Gibt es so etwas schon? Gibt es bereits ein Open-Source-Projekt in freier Wildbahn, das etwas Ähnliches implementiert, das ich verwenden und dazu beitragen könnte?

In Anbetracht der paranoiden Webentwickler in Bezug auf die Leistung (und der Tatsache, dass die Anzahl der Dateianforderungen auf einer Website einen großen Einfluss auf die Leistung hat) schätze ich, dass es im Internet einen Assistenten-Hacker gibt, der dieses Problem bereits behoben hat.

Sie können sich die PageSpeed-Erweiterung von Google für Apache ansehen: afaik, es gibt eine Option zum automatischen Aggregieren und Minimieren von Javascript und CSS und kombiniert mit Caching. Dies würde zu dem passen, was Sie am Ende Ihres Beitrags suchen.

jsmin

Wenn Sie nicht über eine Menge JS verfügen, können Sie jedes Mal, wenn Sie auf Speichern klicken, eine Minimierung vornehmen. Wenn Sie viel JS haben, machen Sie es zu einem Teil Ihres Bereitstellungsprozesses (siehe Git unten).

SASS

Verwenden Sie das Compass Framework . Es enthält SASS sowie ein kleines Skript, das Ihr SASS-Verzeichnis "überwacht" und die Dateien bei jedem Speichern in CSS (einschließlich minimiertem CSS, falls gewünscht) kompiliert. Es wurde unter Berücksichtigung von RoR erstellt, aber Sie können es problemlos mit jedem Webframework verwenden, indem Sie eine Kompass-Konfigurationsdatei erstellen und den Befehl "Kompassüberwachung" ausführen. Compass enthält auch viele andere nützliche Tools wie Blueprint , nützliche Mixins und die automatische Sprite-Generierung über das Lemonade-Plugin (das in der nächsten Version in Compass integriert werden sollte ).

Git

Je nach Größe / Komplexität des Standorts sollten Sie dem Capistrano folgenBereitstellungsmodell. Sie sind sich nicht sicher, ob Sie Capistrano direkt mit CakePHP verwenden können, aber das Wesentliche ist: Jeder Produktionsserver verfügt über einen "aktuellen" Ordner, der den gesamten Code enthält, der gerade in der Produktion ausgeführt wird. Jedes Mal, wenn Sie neuen Code bereitstellen möchten, führen Sie ein Skript aus, das auf jedem Produktionsserver sshs ist, und lassen es (a) den Inhalt des "aktuellen" Ordners in einen Sicherungsordner kopieren (mit dem Versionsnamen / Zeitstempel darauf), ( b) Überprüfen Sie den neuesten Code von Git in den "aktuellen" Ordner und (c) starten Sie diesen neuen Code aus dem "aktuellen" Ordner. Auf diese Weise können Sie bei Bedarf auf eine frühere Version zurücksetzen und genau feststellen, welche Revision in Produktion ist. Mit Capistrano können Sie im Rahmen des Bereitstellungsprozesses auch alle Arten von benutzerdefinierten Aufgaben hinzufügen, einschließlich der JS / CSS-Minifaktion.

Extra

Ja, es gibt eine Menge. Google für so etwas wie "CSS / JS concat". Hier ist eine kurze Beschreibung, die ich für CakePHP gefunden habe: Asset Packer .