BUILDPROCESSEN

het doel vandaag:  

een beetje duidelijk krijgen wat we ermee kunnen!

BUILDPROCESSEN?

• SCSS compiling
• JS minification (en concatination)
• Browserreload on save

GULP

the streaming build system

GULP VS GRUNT

• Allebei geschreven in JavaScript
• Gulp gebruikt Streams
• Grunt het filesysteem
• Grunt vergt wat meer configuratie

STREAMS dUS

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

streams of processes

• pipeline van kleine functies die na elkaar volgen
• de output van de ene stream is de input voor de volgende

Gulp is dus veel sneller

gulp plugins

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

$ npm install --save-dev gulp-jshint
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-concat

gulp tasks

gulp.task('greet', function () {
   console.log('Hello world!');
});

$ gulp greet

gulp.task('build', ['css', 'js', 'imgs']);

$ gulp build

gulp.task('css', ['greet'], function () {
   // Deal with CSS here
});

$ gulp css

gulp.task('default', function () {
   // Your default task
});

$ gulp

package.json

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

$ npm init

project opzetten

$ npm install

project gebruiken

good to go!!1!one!

OK en nu?

zeg het maar...

misschien linken aan onze principes?

• flawless
• accessible
• maintainable
• smooth 'n snappy
• future proof
• scalable

• flawless
• accessible
• maintainable
• smooth 'n snappy
• future proof
• scalable

brainstormtime!

Als je alles op zou kunnen lossen met Gulp, wat zou je dan opgelost willen zien?