Komprimera js och css

Ett bra tips som kan göra stor skillnad, speciellt på mobila enheter. Ser fram mot 3.0 där standard-CSS och JavaScript är ihopslagna och komprimerade. Om man vill göra det smidigare finns det bra programvaror som hjälper till, t.ex. Smaller för OS X: http://smallerapp.com.

Som utvecklare har jag försökt få till ett arbetsflöde med externa CSS- och JS-filer utan att ha kommit ända fram riktigt. På stora webbplatser som har många olika tillämplingar, proxyintegrationer och egenskriva moduler vill jag gärna dela upp stilmallar och JavaScript i små delprojekt. Just nu ser det ut ungefär så här:

* ett git repository för varje webbplats med delprojekt som kataloger
* ett byggskript som automagiskt slår ihop och komprimerar alla css- och js-filer
* LiveReload (http://livereload.com) som laddar om webbläsaren åt mig så fort jag sparar en fil
* Proxyserver (Charles) som låter mig peka ut mina lokala filer och förhandsgranska förändringar utan att ladda upp filerna på produktionsservern
* manuell uppladdning av de komprimerade filerna när det är dags för deploy

Kan tyckas vara lite omständigt men för projekt som har mycket egna JavaScript vill jag ha det versionshanterat och kunna sitta i en vettig textredigerare. Hur jobbar ni andra med JavaScript-/CSS-tunga applikationer?

Det här blev nästan lite off topic, men det är ju kul att diskutera SiteVision! :)

Vi kör ganska sällan med minifierade js och css. Men Webdav från Coda rätt in i Sitevision har underlättat vårt jobb OTROLIGT mycket :)

Precis som att jobba med lokala filer. Det blir ju inte mer ordning för det, men otroligt smidigt.

Jag jobbar liknande som dig Sven. Fast just nu utan git/livereload och Proxyserver. Vilket inte var en helt dum idé. Tack för tipset!

Jag har knåpat ihop ett eget byggskript i nodejs som komprimerar ner alla javascript filer till en stor fil som sedan optimeras. För att göra det använder jag mig utav
* Browserify (https://github.com/substack/node-browserify). Browserify ger möjlighet att göra precis som man gör i nodejs, d.v.s. använda sig utav require. Det gör att man slipper fundera på i vilken ordning filerna ska ligga i när dom optimeras till en fil, samt ger ett skönt include-liknande system. Den ger även möjlighet att skriva coffeescript (http://coffeescript.org/) istället för javascript om man så vill.
* uglify-js (https://github.com/mishoo/UglifyJS) för javascript komprimering.
* TrimPath templates (http://code.google.com/p/trimpath/wiki/JavaScriptTemplates) för att kunna ha smidiga mallar i javascript filerna. Mallarna kompileras vid bygg till funktioner som man sedan kan köra require på.

För CSS så använder jag mig utav less (http://lesscss.org/) för att få möjlighet att bland annat modulera upp CSS-filerna lite. Även här appliceras en CSS-optimizer för att få ner filstorleken.

Denna laddar sedan automatiskt upp javascriptet och CSS-filerna till SV-servern via webdav.

Javascript: Från ca. 70 filer som tillsammans är 900 kb till en fil på 470kb

CSS: Från ca. 34 filer på 204 kb, till en fil på ca. 100 kb.

Jag tror det var allt faktiskt :)

@kentos det är ganska smart, men hur gör ni när ni ska arbeta med en redan lanserad webbplats? Sitter ni och ändrar "live" i JavaScript då?

Jag har uppdaterat inlägget med lite "nyttigheter" som ni utvecklare kanske kan dra nytta av i SiteVision 3.0.

@sven: det skulle man kunna säga att "vi" gör. Som man märker så har Patrik något supersystem för det där, som inte riktigt jag kör på ;)

@janne: skitbra med editor i verktyget! men när det gäller css/js så brukar man vilja använda sin favoriteditor, där känner man sig mest hemma. man är för van med cmd+s, alt+tab, cmd+r ;)