Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hello Gulp
Search
Edson Hilios
June 13, 2014
Programming
5
310
Hello Gulp
An introduction to gulp:
https://github.com/hilios/hello-gulp
Edson Hilios
June 13, 2014
Tweet
Share
More Decks by Edson Hilios
See All by Edson Hilios
Consensus decision-making
hilios
0
49
Estimating the occupancy using Wi-Fi sensing of mobile phones: An application on the urban public transportation by bus
hilios
1
46
Geographic Information Science 101
hilios
0
42
Either, Some or None: An introduction to monadic structures and functional programming
hilios
0
880
Estimativa da ocupação de veículos por tecnologias sem fio e dispositivos móveis: Uma aplicação no transporte urbano de passageiros de ônibus
hilios
0
1k
Empreendedores: Pessoas que moldam o mundo
hilios
0
1k
Classificação de Dados Multivariados Relacionados a Poluição em Regiões Urbanas Utilizando Self-Organizing Maps
hilios
0
1.6k
HTML5 & CSS3
hilios
0
63
CPBR8: WTF to Test
hilios
2
3.8k
Other Decks in Programming
See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
技術同人誌をMCP Serverにしてみた
74th
1
360
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
410
WindowInsetsだってテストしたい
ryunen344
1
190
Select API from Kotlin Coroutine
jmatsu
1
190
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
360
Is Xcode slowly dying out in 2025?
uetyo
1
190
GraphRAGの仕組みまるわかり
tosuri13
8
480
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
190
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Speed Design
sergeychernyshev
32
1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Practical Orchestrator
shlominoach
188
11k
Documentation Writing (for coders)
carmenintech
72
4.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Designing for Performance
lara
609
69k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Transcript
Hello Gulp! @hilios
Edson Hilios Software Engineer @ Telefónica https://github.com/hilios edson (at) hilios.com.br
Yet another build system...
Build system • Pre-compilers: LESS, SASS, CoffeeScript; • Automate repetitive
tasks; • Optimize files for production / deploy; • Ease development workflow;
None
Summary • Minimal API; • Automate tasks; • Stream IO;
• Flow control: Async / Sync; • Built-in watch;
Install $ npm install -g gulp
Install Project gulpfile.js
API var gulp = require('gulp'); gulp.task(); gulp.src(); gulp.dest(); gulp.watch();
API • Code over configuration; • Plain JS and Node;
• ~30% less code; • Easier to split in several files; • Easier to hack and extend;
Tasks gulp.task('build', function() { return gulp.src(['**/*.js', '**/*.jst']) .pipe(aPlugin()) .pipe(anotherPlugin()) .pipe(gulp.dist('./bin/js'));
});
Tasks stream .pipe( doSomething() ) .pipe( ... ) .pipe( ...
) .pipe( ... )
Tasks $ gulp build
Output $ gulp build [gulp] Using gulpfile /gulpfile.js [gulp] Starting
'build'... [gulp] Finished 'build' after 6.81 ms
Tasks // Task with dependencies gulp.task('name', ['dependency1', ...], function() {
... }); // Task alias gulp.task('name', ['dependency1', ...]); // 'Default' task => $ gulp gulp.task('default', ['lint', 'build', 'less']);
Tasks $ gulp --tasks
IO operation are slow, and gulp is FAST! lorem ipsum
dolor sit Stream READ WRITE
.js .js .js .js .js min.js .lint() .concat() .minify() .rename()
Stream var lint = require('gulp-jshint'), concat = require('gulp-concat'); gulp.src('*.js') .pipe(lint())
.pipe(concat('all.js')) .pipe(gulp.dist('./bin')); READ WRITE
By default, tasks run with maximum concurrency -- e.g. it
launches all the tasks at once and waits for nothing. – Gulp API documentation
Flow control gulp.task('stream', function() { var stream = gulp.src('**/*.js') .pipe(someplugin())
.pipe(gulp.dist('./bin')); return stream; });
Flow control gulp.task('timeout', function(done) { setTimeout(function() { done(exitCode); }, 1000);
});
Flow control gulp.task('build', function(done) { gulp.src(['**/*.js', '**/*.jst']) .pipe(aPlugin()) .pipe(gulp.dist('./bin/js')); gulp.src('**/*.css')
.pipe(other()) .pipe(gulp.dist('./bin/css')); done(); // This won't work as expected });
Watch gulp.task('default', function() { gulp.watch('**/*.js', ['lint', 'concat']); });
Plugins • gulp-concat • gulp-rename • gulp-jshint • gulp-karma •
gulp-less • gulp-coffee • gulp-include • gulp-uglify • gulp-zip • gulp-bump https://www.npmjs.org/search?q=gulp-*
Drawbacks • Manage errors in pipe; • Docs aren't that
good; • Easy but not trivial;
Caveats // Load a config file var config = require('config.json');
gulp.task('build', function(done) { gulp.src(config.js) .pipe(...); });
Caveats var util = require('gulp-util'); // Emit sound util.beep(); //
Log with color util.log(); // Lo-dash template util.template();
Caveats gulp.src('**/*.js') .pipe(less()) .on('error', function(error) { // Handle errors console.log(error.message);
});
Caveats var karma = require('karma').server; gulp.task('test', function(done) { karma.start({ configFile:
__dirname + '/karma.conf.js' }, function(exitCode) { done(exitCode); }); });
Hands on...| https://github.com/hilios/hello-gulp
Tks :) https://speakerdeck.com/hilios/hello-gulp