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
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
1
370
恐怖!テストコードなき夜
tsukuboshi
2
110
AWS表彰プログラムとキャリアについて
naoki_0531
1
150
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
180
Rubyの国のPerlMonger
anatofuz
0
260
Datasets for Critical Operations by Dataform
kimujun
0
130
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
1
370
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
0
220
MCPと認可まわりの話 / mcp_and_authorization
convto
2
340
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
0
260
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
210
With Devin -AIの自律とメンバーの自立
kotanin0
2
960
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
GitHub's CSS Performance
jonrohan
1031
460k
Speed Design
sergeychernyshev
32
1k
Thoughts on Productivity
jonyablonski
69
4.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Visualization
eitanlees
146
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Designing Experiences People Love
moore
142
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Six Lessons from altMBA
skipperchong
28
3.9k
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