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
280
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
34
Estimating the occupancy using Wi-Fi sensing of mobile phones: An application on the urban public transportation by bus
hilios
1
38
Geographic Information Science 101
hilios
0
35
Either, Some or None: An introduction to monadic structures and functional programming
hilios
0
840
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
56
CPBR8: WTF to Test
hilios
2
3.8k
Other Decks in Programming
See All in Programming
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
自力でTTSモデルを作った話
zgock999
0
120
楽しく向き合う例外対応
okutsu
0
720
ML.NETで始める機械学習
ymd65536
0
240
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
640
iOSでQRコード生成奮闘記
ktcryomm
2
120
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
260
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
350
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
310
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
19
4.2k
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.2k
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
550
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Site-Speed That Sticks
csswizardry
4
410
A Modern Web Designer's Workflow
chriscoyier
693
190k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Producing Creativity
orderedlist
PRO
344
40k
How GitHub (no longer) Works
holman
314
140k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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