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
Gulp.js
Search
Samuel Flores
August 09, 2014
Technology
1
150
Gulp.js
Automatizando o build do front end das suas apps, de maneira rápida e fácil.
Samuel Flores
August 09, 2014
Tweet
Share
More Decks by Samuel Flores
See All by Samuel Flores
Clojure
samflores
4
200
Introdução ao MRuby
samflores
1
56
Por que Ruby?
samflores
1
140
Extendendo Ruby com C (& cartoons)
samflores
3
180
Sinatra
samflores
2
220
Other Decks in Technology
See All in Technology
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
170
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
290
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
250
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
140
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
Android Audio: Beyond Winning On It
atsushieno
0
3.6k
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
500
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Become a Pro
speakerdeck
PRO
29
5.5k
Building Applications with DynamoDB
mza
96
6.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Balancing Empowerment & Direction
lara
3
630
4 Signs Your Business is Dying
shpigford
184
22k
Speed Design
sergeychernyshev
32
1.1k
Why Our Code Smells
bkeepers
PRO
339
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Transcript
@samflores
None
Twitter Bootstrap Slider Parallax jQuery Backbone
1 .css & 1 .js 1 .css & 1 .js
1 .js 1 .js 2 .js Twitter Bootstrap Slider Parallax jQuery Backbone
None
None
None
None
None
None
None
None
<html> <head> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/slider.css"> <link rel="stylesheet"
href="css/custom.css"> </head> <body> ... <script src="js/jquery.js"></script> <script src="js/jquery.parallax.js"></script> <script src="js/jquery.slider.js"></script> <script src="js/bootstrap.js"></script> <script src="js/underscore.js"></script> <script src="js/backbone.js"></script> <script src="js/application.js"></script> </body> </html>
seriously?
! No braço!
seriously?
None
GRUNT The JavaScript Task Runner
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: {
options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' }, dist: { files: { 'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>'] } } }, qunit: { files: ['test/**/*.html'] }, jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { // options here to override JSHint defaults globals: { Gruntfile.js
files: ['test/**/*.html'] }, jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options:
{ // options here to override JSHint defaults globals: { jQuery: true, console: true, module: true, document: true } } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint', 'qunit'] } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('test', ['jshint', 'qunit']); grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); }; Gruntfile.js
seriously?
gulp.js The streaming build system
Streams Modular API Simples Rápido
Streams Unix pipes no Node.js
Streams Unix pipes no Node.js Facilita composição e reuso
Streams Unix pipes no Node.js Facilita composição e reuso Assíncrono
sem callback hell
Streams Unix pipes no Node.js Facilita composição e reuso Assíncrono
sem callback hell stream1.pipe(stream2)
Modular Pequenos plugins
Modular Pequenos plugins "do one thing and do it well"
Modular Pequenos plugins "do one thing and do it well"
Orientações rígidas
Modular Pequenos plugins "do one thing and do it well"
Orientações rígidas require('gulp-module')
API Simple gulp.task(…)
API Simple gulp.task(…) gulp.src(…)
API Simple gulp.task(…) gulp.src(…) gulp.dest(…)
API Simple gulp.task(…) gulp.src(…) gulp.dest(…) gulp.watch(…)
Rápido Perfeito para "watch"
Rápido Perfeito para "watch" Assíncrono FTW"
Rápido Perfeito para "watch" Assíncrono FTW" Assíncrono WTF#
Live Coding (hopefully)
Thanks! @samflores