Gulp - The Streaming Build System

Talk about Gulp.js at Georgian Front-end Developers Meet-up #1. Let Gulp do everything for you.

Video on 17th slide: http://youtu.be/czAvYaPWBko

Transcript

1. The streaming build system
2. Levan Velijanashvili me@stichoza.com twitter.com/Stichoza github.com/Stichoza
3. WHY BUILD SYSTEM Minify Mangle File concatenation Sprite generation Image optimization Live Server Testing (TTD) Deployment Fun!
4. Code over config Stream based Fast, Efficient Simple API WHY GULP
5. CODE OVER CONFIG
6. grunt.initConfig({ sass: { dist: { files: [{ cwd: '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: ['styles/{,*/}*.scss'], tasks: ['sass:dist', 'autoprefixer:dist'] } } }); grunt.registerTask('default', ['watch']); gulp.task('sass', function () { gulp.src('styles/**/*.scss') .pipe(sass()) .pipe(autoprefixer('last 1 version')) .pipe(gulp.dest('dist/styles')); }); gulp.task('default', function() { gulp.watch('styles/**/*.scss',function(){ gulp.run('sass'); }); }); CODE OVER CONFIG
7. STREAM BASED
8. RTFM: nodejs.org/api/stream.html STREAM BASED
9. ls -Sla | grep "^d" | head -n 2 STREAM BASED
10. STREAM BASED a.styl b.styl c.styl minify auto prefix concat d.css How gulp works (and how we think it should)
11. STREAM BASED a.styl b.styl c.styl minify auto prefix concat d.css How grunt works (not how we think it should) foo.tmp bar.tmp baz.tmp hei.tmp heu.tmp hoy.tmp Intensive I/O
12. SIMPLE API
13. gulp.task() SIMPLE API
14. gulp.src() SIMPLE API
15. gulp.dist() SIMPLE API
16. SIMPLE API gulp.watch()
17. Watch this video: youtu.be/czAvYaPWBko
18. FAST MAXIMUM CONCURRENCY
19. FAST Orchestrator sequencing and executing tasks in maximum concurrency
20. FAST
21. FAST 3-4min Manual 1300ms Grunt 210ms Gulp
22. OTHER Excellent Plugins Intuitive Laravel Elixir
23. .pipe(questions())
24. me@stichoza.com twitter.com/Stichoza github.com/Stichoza Thanks!