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
260
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
23
Estimating the occupancy using Wi-Fi sensing of mobile phones: An application on the urban public transportation by bus
hilios
1
34
Geographic Information Science 101
hilios
0
31
Either, Some or None: An introduction to monadic structures and functional programming
hilios
0
790
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
990
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
50
CPBR8: WTF to Test
hilios
2
3.7k
Other Decks in Programming
See All in Programming
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
110
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
2.8k
役立つログに取り組もう
irof
18
5.3k
The future of development – Are our jobs getting harder or easier?
hollycummins
1
240
Piniaの現状と今後
waka292
5
1.3k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
170
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
110
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
520
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
480
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
270
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.6k
EventSourcingの理想と現実
wenas
5
1.9k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Facilitating Awesome Meetings
lara
49
6k
Producing Creativity
orderedlist
PRO
341
39k
What's in a price? How to price your products and services
michaelherold
243
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
360
Teambox: Starting and Learning
jrom
132
8.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Embracing the Ebb and Flow
colly
84
4.4k
Adopting Sorbet at Scale
ufuk
73
9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
BBQ
matthewcrist
85
9.3k
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