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
45
Either, Some or None: An introduction to monadic structures and functional programming
hilios
0
890
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
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
120
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
効率的な開発手段として VRTを活用する
ishkawa
0
160
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
VS Code Update for GitHub Copilot
74th
2
670
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
670
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
820
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
130
Porting a visionOS App to Android XR
akkeylab
0
660
すべてのコンテキストを、 ユーザー価値に変える
applism118
4
1.4k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Practical Orchestrator
shlominoach
189
11k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Embracing the Ebb and Flow
colly
86
4.7k
Speed Design
sergeychernyshev
32
1k
How GitHub (no longer) Works
holman
314
140k
Six Lessons from altMBA
skipperchong
28
3.9k
Adopting Sorbet at Scale
ufuk
77
9.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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