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
140
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
MCPを理解する
yudai00
14
9.9k
AIによるコードレビューで開発体験を向上させよう!
moongift
PRO
0
420
本当に必要なのは「QAという技術」だった!試行錯誤から生まれた、品質とデリバリーの両取りアプローチ / Turns Out, "QA as a Discipline" Was the Key!
ar_tama
9
4k
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
110
MySQL InnoDB Data Recovery - The Last Resort
lefred
0
110
データベース04: SQL (1/3) 単純質問 & 集約演算
trycycle
PRO
0
730
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
carta_engineering
0
27k
Azure & DevSecOps
kkamegawa
2
180
Simplify! 10 ways to reduce complexity in software development
ufried
2
240
Serverlessだからこそコードと設計にはこだわろう
kenichirokimura
2
910
GraphQLを活用したリアーキテクチャに対応するSLI/Oの再設計
coconala_engineer
0
210
2025-04-14 Data & Analytics 井戸端会議 Multi tenant log platform with Iceberg
kamijin_fanta
1
190
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fireside Chat
paigeccino
37
3.4k
Visualization
eitanlees
146
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Code Review Best Practice
trishagee
68
18k
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