logotype

80 Ridge Street Media

User Experience, Product Management, Webb

Öka intäkterna med effektiv och optimerad webb

Foto från Påarp, Halmstad

Snabba upp din webb med Compass/Sass och Grunt

Publicerad av   i Webbutveckling

En av de stora bovarna när det gäller prestanda på webben är för många http-requests mellan webbläsaren och servern. Varje sida består av många olika resurser som webbläsaren efterfrågar från servern, det är själva sidan, javascript, stilmallar och bilder. I den här posten tänkte jag visa hur man med hjälp av verktyg som Compass och Grunt.js kan kombinera sina javascript, stilmallar och bilder och minska antalet http requests som krävs och därmed förbättra prestandan på webbplatsen och förhoppningsvis också användarens upplevelse av webbplatsen. Låt oss köra igång.

Compass

Compass är ett stilmallsbibliotek baserat på Sass, Sass hjälper dig att skriva bättre CSS:er genom att erbjuda saker som nästlade css-regler, variabler, funktioner (så kallade mixins), arv och andra saker som exempelvis möjligheten att loopa över saker och ting. Sass hjälper dig att hålla din CSS-kod DRY, dvs ren och utan att repetera saker i onödan. Sass och Compass är s k preprocessors, du skriver koden i Sass-syntax och Sass gör om det till css-kod. Sass är språket och Compass ramverket eller biblioteket som hjälper dig att skriva bättre CSS som är enklare att underhålla (och det är mycket roligare att jobba med). För att köra Sass måste du installera det först. Både Sass och Compass installeras via så kallade RubyGems och i denna artikel så förutsätter vi att du har RubyGems installerat. Starta en terminal och skriv:

$ gem update --system
$ gem install compass

Nu ska det rassla till och du har nu installerat Compass (och Sass med för den delen). Man kan köra rena Sass-projekt men för att åtnjuta Compass funktionalitet för att kombinera bilder och få ner antalet requests den vägen så kör vi Compass. För att starta upp ett Compass-projekt så är mitt förslag att du gör följande:

$ cd <dittprojekt>
$ compass create --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "img"

där “scss”, “css”, “js” och “img” är dina mappar för respektive filer, scss är själva källkoden för Sass-stilmallarna. “css”, “js” och “img” katalogerna bör du ha sen förr eller sätt upp dem och döp dem så som du vill ha dem (det finns andra alternativ hur man skapar compass-projekt, läs mer om dem i dokumentationen för Compass). Nu skapas en scss mapp och en config.rb. Öppna config.rb i den editor du föredrar. Mitt förslag är att du ändrar enligt följande:

output_style = :expanded
line_comments = false
relative_assets = true

det kommer göra din css som genereras mer lättläst och underlätta när du ska nyttja Compass funktionalitet för att generera kombinerade så kallade sprites för dina bilder. Line comments kan vara bra att ha under utveckling, då de skriver ut en kommentar i den slutliga css-filer i vilken scss-källfil som den aktuella stildeklarationen finns, men ofta gör kommentarerna css:en svårare att få överblick över när du läser den.

Nu är du redo att köra igång Compass:

$ cd <dittprojekt> #om du inte redan är där
$ compass watch .

Nu lyssnar Compass på förändringar på dina scss-källkodsfiler i scss-foldern och kommer generera css-filer till din css-mapp när en ändring görs i källkoden, väldigt smidigt.

$ cd <dittprojekt>/scss
$ touch style.scss
$ mkdir includes
$ cd includes
$ touch _settings.scss

OK, filer som börjar med ‘’ kommer aldrig göras om till css-filer, det är en bra sak att lära sig, filer som inkluderas bör därför döpas till _namn.scss och bara de filer som du verkligen vill ska bli css:er till något utan ‘’ i början. Så öppna nu <dittprojekt>/scss/style.scss och lägg till följande rad:

@import "compass";
@import "includes/settings";

Det funkar att skriva settings, settings eller _settings.scss, jag gillar att skriva namnet utan ‘’ för bättre läsbarhet. Importen av Compass är så vi har tillgång till Compass hela funktionalitet. Man kan välja att bara importera det man använder, men då scss-filerna ändå preprocessas så anser jag inte detta vara speciellt effektivt, utan det är bra att i sin huvud-scss-fil importera Compass-biblioteket så du vet att du har tillgång till alla Compass funktioner i dina scss-filer utan att explicit behöva inkludera dem. En settings-fil, eller variables eller vad du väljer att kalla den är väldigt bra för att sätta dina generella sass-variabler, tex färger, typsnitt, storlekt på text och annat smått och gott. På vilket sätt får du ner antalet requests med hjälp av Sass? Jo, du kan utan problem kombinera css:er men fortfarande ha kvar spårbarheten. Ett typiskt exempel är css:er för exempelvis ramverk som Twitter Bootstrap, CSS-reset-filer och css:er för jQuery-plugin. skapa en external-mapp (eller vendors, eller vad du finner smidigast) där du lägger externa ramverk och css:er så att du i din style.scss kan inkludera dem enkelt, döp dem enligt följande: _ramverk.scss.

@import "external/css-reset";
@import "external/bootstrap";
@import "external/jquery-plugin-css";

Compass kommer generera en style.css åt dig som innehåller alla dessa ramverk och externa filer (samt dina egna moduler) men du har fortfarande de separerade och kan enkelt uppgradera när nya versioner kommer. Här kan du vinna många http-requests och behålla spårbarheten i varje enskild fil, vilket underlättar underhåll när exempelvis buggar uppstår eller nya versioner av. Givetvis finns det andra lösningar för att kombinera sina css:er, Sprockets, Minify och otalet andra, men jag tycker Sass/Compass gör ett bra jobb för detta då jag ändå använder det för all de extra fördelar jag får av en preprocessor för CSS.

Kombinera bilder med Compass

Compass har kraftfull funktionalitet för så kallade CSS Sprites (Spriting with Compass). Det fina är att du behöver inte hålla på att fundera på bakgrunds-positioner hit och dit för det tar Compass hand om. Ett vanligt användningsområde där du kan spara många requests och därmed också snabba upp din webb för användaren är ju ikoner. Många sajter idag använder idag olika ikoner för sociala tjänster för att göra det enklare för sina användare att dela med sig av innehållet. Dessa ikoner är passande att kombinera till en CSS-sprite. Så, du har dina sociala ikoner i din bildmapp <dittprojekt>/img/social

I din scss-fil där du vill använda ikoner skriver du följande:

@import "social/*.png";
@include all-social-sprite;

‘social’ är nyckeln här. Compass kommer nu skapa en css-sprite för dina sociala ikoner som du kommer åt enligt följande: .social-filnamn, så om du hade en facebook.png i din social-mapp så har du nu en klass som heter .social-facebook som du kan använda i css när du behöver använda en facebook-ikon, mycket smidigt. Man kan konfigurera hur mycket mellanrum man vill ha mellan bilderna i spriten, låt säga att vi vill ha 45 pixlars mellanrum mellan våra sociala ikoner, då lägger vi bara till följande innan vi importerar bilderna:

$social-spacing: 45px;
@import "social/*.png";
@include all-social-sprite;

Det finns en hel del konfigurationsmöjligheter.

Så Compass är ett perfekt verktyg för att göra ditt liv enklare vad gäller underhåll och utveckling av effektiv, DRY css men också för att hjälpa dig med att kombinera filer så din webb blir snabbare. Mitt tips är att alltid använda Compass i dina webbprojekt, det är en effektivitetshöjare och gör CSS roligt. Nu till Grunt.js.

Grunt.js

Grunt is a task-based command line build tool for JavaScript projects.

Grunt hjälper dig med saker som är väldigt bra, men oftast ganska tråkiga och eller komplicerade att komma igång med, jag använder Grunt.js för att göra mina JavaScript-filer redo för produktion. Grunt kan användas för olika tasks, exempelvis test via Qunit och för test av kodkvalitet/validera via JSHint. Jag använder Grunt för att baka ihop JavaScript-filer (grunt concat) och minifiera dem (grunt min) med UglifyJS. För att göra livet så enkelt som möjligt så använder jag mig av den inbyggda watch-funktionaliteten som kör Grunt-tasks när en fil ändras.

För att kunna köra Grunt måste du ha npm (Node Package Manager):

$ curl http://npmjs.org/install.sh | sh

När det är klart, installera Grunt via npm:

$ npm install -g grunt
$ cd <dittprojekt>
$ touch grunt.js

Öppna upp grunt.js som du precis skapade och sätt upp enligt följande:


module.exports = function(grunt) {
grunt.initConfig({
lint: {
files: ["js/src/lib.js", "js/src/widget.js", "js/src/hack.js"]
},
concat: {
dist: {
src: '<config:lint.files>',
dest: 'js/dist/dittprojekt.js',
separator: ';'
}
},
min: {
dist: {
src: ['js/dist/dittprojekt.js'],
dest: 'js/dist/dittprojekt.min.js'
}
},
watch: {
files: '<config:lint.files>',
tasks: 'concat:dist min:dist'
}
});
};

$ grunt watch

Nu lyssnar grunt på ändringar i “js/src/lib.js”, “js/src/widget.js”, “js/src/hack.js” och kommer när du ändrar i ngn av filerna att kombinera dina filer och komprimera dem, du kommer ha två filer i ditt js/dist-folder: En kombinerad okomprimerad och en kombinerad och komprimerad. Grunt hjälper dig med saker som annars är ganska omständiga att sätta upp. Jag rekommenderar att pröva.

Det finns många olika sätt att uppnå samma resultat som detta, men en sak som jag gillar med Grunt och Compass/Sass är att allt sker på utvecklingsmaskinen och det är rena statiska filer som är komprimerade och klara som du kan skjuta upp på vilken dedikerad filserver som helst, du har inget beroende till en serverprocess för att generera dina kombinerade filer. Du har ett minimalt nummer av rörliga delar på din live-server som kan gå sönder, därför föredrar jag byggapproachet för statiska filer. Hoppas artikeln hjälpt er att upptäcka Compass och Grunt.

Tveka inte att kontakta oss på 80 Ridge Street Media om du är intresserad av hur din webb kan bli ännu snabbare, effektivare och erbjuda en bättre användarupplevelse.

Kategorier

Nyckelord

Kommentarer

Vill du lära dig mer om UX, SEO och Webbutveckling?

Anmäl dig till vår nyhetslista så får du tips direkt till din e-post.

Vill du lära dig mer om UX, SEO och Webbutveckling?

Anmäl dig till vår nyhetslista så får du tips direkt till din e-post.

Några av våra kunder


Senaste på bloggen

På vår blogg kan du läsa aktuella inlägg om webbutveckling, user experience och sökmotoroptimering.


80 Ridge Street Media AB

Bättre och mer effektiv webb och appar med fokus på User Experience, Product Management, SEO, Webbutveckling. Knivsta, Uppsala.

Åsgatan 80
74145 Knivsta, Uppsala
Telefon 0735-336699
E-post info@ridgestreet.se
Webb
Facebook ridgestreet
Twitter @80ridgestreet
Google Plus Google+