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
240
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
21
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
27
Either, Some or None: An introduction to monadic structures and functional programming
hilios
0
720
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
960
Empreendedores: Pessoas que moldam o mundo
hilios
0
940
Classificação de Dados Multivariados Relacionados a Poluição em Regiões Urbanas Utilizando Self-Organizing Maps
hilios
0
1.5k
HTML5 & CSS3
hilios
0
46
CPBR8: WTF to Test
hilios
2
3.7k
Other Decks in Programming
See All in Programming
GitHub Copilotのススメ
marcy731
1
200
Milestoner
bkuhlmann
1
410
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
270
Elm 0.19.0 Changes
bkuhlmann
0
490
ゆるい個人開発のススメ
kuroppe1819
10
990
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Anthropic Cookbook のおすすめレシピ
schroneko
7
960
Goのエラースタックトレースの歴史と今後
sonatard
8
1.4k
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Six Lessons from altMBA
skipperchong
21
3k
Designing Experiences People Love
moore
136
23k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
How to name files
jennybc
65
93k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
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