Stručné představení Gulpu, buildsystému/task runneru pro web. Nevyhneme se ani srovnání s Gruntem, předchůdcem a inspirátorem Gulpu. Brief presentation of GULP, buildsystem/task runner for the websites. Comparison between GULP and Grunt.

1. Gulp
Vojta Grec / Keyup

2. O co jde?
• Build systém pro web
• Automatizace opakujících se tasků
• Preprocessing CSS/Coffeescript/…
• Minifikace CSS/JS/…
➡ Ulehčení toho, co stejně děláte.

3. Grunt
• Vytvořen: 2012
• Poslední commit: měsíc(e)
• Konfigurace > kód
• Sekvenční provádění
• Filesystem based
• „Kitchen sink“
• 3600+ pluginů
Gulp
• Vytvořen: 2013
• Poslední commit: dny
• Kód > konfigurace
• Paralelní provádění
• Stream based
• Unix-like
• 700+ pluginů
• Postaveno nad node.js

4. Grunt Gulp
grunt.initConfig({
sass: {
dist: {
files: [{
cwd: 'app/styles',
src: '**/*.scss',
dest: '../.tmp/styles',
expand: true,
ext: '.css'
}]
}
},
autoprefixer: {
options: ['last 1 version'],
dist: {
files: [{
expand: true,
cwd: '.tmp/styles',
src: '{,*/}*.css',
dest: 'dist/styles'
}]
}
},
watch: {
styles: {
files: ['app/styles/{,*/}*.scss'],
tasks: ['sass:dist','autoprefixer:dist']
}
}
});
grunt.registerTask('default',
['styles','watch']);
var sass = require('gulp-sass');
var autoprefixer =
require('gulp-autoprefixer');
gulp.task('sass', function () {
gulp.src('app/styles/**/*.scss')
.pipe(sass())
.pipe(autoprefixer('last 1 version'))
.pipe(gulp.dest('dist/styles'));
});
gulp.task('default', function() {
gulp.run('sass');
gulp.watch('app/styles/**/*.scss',
function() {
gulp.run('sass');
});
});

5. • Příkazy:

6. • Příkazy:
• task
// Create task
gulp.task('name', ['deps'], function(done) {
return stream || promise;
// ...or call done()
});

7. • Příkazy:
• task
• src // Returns a readable stream
gulp.src(['src/**/*.js', '!src/**/*.spec.js'])

8. • Příkazy:
• task
• src
• dest
// Writes stream contents
// into files
gulp.src('src')
.pipe(...)
.pipe(gulp.dest('dist'));

9. • Příkazy:
• task
• src
• dest
• watch // Runs tasks when files change
gulp.watch('src/**/*.js', ['compile']);

10. • Příkazy:
• task
• src
• dest
• watch
• pipe (z node.js streamů)

11. Conclusions
• Určitě chceme používat (kde má smysl)
• Pro frontendisty dnes součást toolboxu
• Gulp má větší budoucnost než Grunt
• Pojďme vyzkoušet Gulp
• http://gulpfiction.divshot.io pomůže

12. Díky za pozornost :-)
(a díky Tomáši Holasovi ze Socialbakers za jeho
přednášku na Webexpo (http://goo.gl/ZCnH2y),
kterou jsem značně vykradl ;-) )