Front-end Development Automatisatie

Verbeter je werkwijze

WordPress Meetup Tilburg, 12 Maart 2014

Gaya Kessler

Gaya Kessler

Senior Lead Web Developer Ninja
bij Merchandise.nl

Blog: http://www.gayadesign.com

Slides: http://talk.gayadesign.com

Twitter: @gayadesign

Front-end Development

in a nutshell

HTML, CSS, images, JavaScript, overige assets, optimalisatie assets, optimalisatie voor de browser, unit tests uitvoeren

Er moet een aanpassing gedaan worden

Dus gaan we weer..

optimalisatie assets, optimalisatie voor de browser, unit testing

Oh wacht! Het project wordt groter

CSS is niet te beheersen.

JavaScript is een ophoping van ellende.

Optimalisatie kost te veel tijd.

Er is hoop

CSS Preprocessors

Breng logica naar je CSS


$ gem install sass

Variablen

Sass


$header-color: #666;
$body-color: #333;

body {
    color: $body-color;
}

h1, h2, h3, h4 {
    color: $header-color;
}

CSS


body {
    color: #333;
}

h1, h2, h3, h4 {
    color: #666;
}

Nesting


.header {
    ul {
        margin: 0px;

        li {
            padding: 0px;
            font: {
                family: 'Open Sans', sans-serif;
                size: 21pt;
            }

            &:hover {
                background: #666;
            }
        }
    }
}



.header ul {
    margin: 0px;
}

.header ul li {
    padding: 0px;
    font-family: 'Open Sans', sans-serif;
    font-size: 21pt;
}

.header ul li:hover {
    background: #666;
}

Partials en Imports

 


/* _settings.scss, _layout.scss */

@import "settings";
@import "layout";

body {
    background-color: $body-color;
    color: $body-text;
}

Mixins

Sass


@mixin fix-for-ie6($display) {
    display: $display;
}

header {
    @include fix-for-ie6(none);
}

CSS


header {
    display: none;
}

Extend / Inheritance

Sass


.button {
    border-radius: 2px;
    background: #eee;
    color: #420;
}

.submit {
    @extend .button;
}

.next {
    @extend .button;
}

CSS


.button, .submit, .next {
    border-radius: 2px;
    background: #eee;
    color: #420;
}

But wait... there is more!


$ gem install compass

Een klein config bestand


relative_assets = true
css_dir = "css"
sass_dir = "sass"
images_dir = "images"

output_style = :expanded # After dev :compressed

line_comments = true

preferred_syntax = :scss

Live demo sprites

maar het kost zo veel tijd om te leren

NOPE!

Task Runners

herhalende taken uit handen geven

Maak een lijst van je taken

  • JavaScript bestanden samenvoegen
  • JSHint
  • Tests uitvoeren
  • Debug logging verwijderen
  • Uitkomst uglifyen

Wanneer voer je de taken uit?

  • Tijdens development: (bij elke verandering in de source)
    • JavaScript bestanden samenvoegen
    • JSHint
    • Tests uitvoeren

  • Bij build:
    • JavaScript bestanden samenvoegen
    • JSHint
    • Tests uitvoeren
    • Debug logging verwijderen
    • Uitkomst uglifyen

En dit kan allemaal automatisch?

Ja.

Stap 1: Installeer NodeJS

http://nodejs.org/download/

Stap 2: Installeer Grunt CLI


$ npm install -g grunt-cli

Wat doet NPM?

package.json


{
	"name": "project-name",
	"version": "1.3.37",
	"description": "Een voorbeeld van een project",
	"main": "",
	"scripts": {
		"test": "grunt test"
	},
	"author": "Gaya Kessler",
	"license": "MIT",
	"devDependencies": {
		"grunt": "~0.4.2"
	}
}

Grunt toevoegen aan je project


$ npm install grunt --save-dev

We hebben nodig

  • Bestanden in de gaten houden
  • Bestanden samenvoegen
  • JSHint uitvoeren
  • Tests uitvoeren
  • Console.log's verwijderen
  • Uitkomst "lelijk" maken

Grunt plugins zoeken

http://gruntjs.com/plugins

We hebben nodig

  • Bestanden in de gaten houden > grunt-contrib-watch
  • Bestanden samenvoegen > grunt-contrib-concat
  • JSHint uitvoeren > grunt-contrib-jshint
  • Tests uitvoeren > grunt-contrib-qunit
  • Console.log's verwijderen > grunt-remove-logging
  • Uitkomst "lelijk" maken > grunt-contrib-uglify

Grunt demo

En hoe nu verder?

Wat kan Yeoman voor mij doen?

  • Project scaffolding
  • Neemt projecten opzetten uit handen
  • Automatisatie automatiseren

Yeoman generators

  • Zet een vagrant box klaar voor testing.
  • Grunt configuratie voor dist en build taken.
  • Standaard Sass indeling en mixins en libs.
  • Laatste versie van platform waar ik mee wil werken.
  • Geen configs meer aanpassen, het werkt gewoon meteen.

Bedankt voor jullie aandacht

Vragen?

Blog: http://www.gayadesign.com

Slides: http://talk.gayadesign.com

Twitter: @gayadesign