Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gulp.js

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Samuel Flores Samuel Flores
August 09, 2014
Technology
160
1

 Gulp.js

Automatizando o build do front end das suas apps, de maneira rápida e fácil.

Avatar for Samuel Flores

Samuel Flores

August 09, 2014

More Decks by Samuel Flores

See All by Samuel Flores
Clojure
Avatar for Samuel Flores samflores
4
200
Introdução ao MRuby
Avatar for Samuel Flores samflores
1
62
Por que Ruby?
Avatar for Samuel Flores samflores
1
160
Extendendo Ruby com C (& cartoons)
Avatar for Samuel Flores samflores
3
190
Sinatra
Avatar for Samuel Flores samflores
2
230

Other Decks in Technology

See All in Technology
Reference-Free Image Quality Assessment for Virtual Try-On via Human Feedback
Avatar for ZOZO Developers zozotech
PRO
0
400
つくって納得、つかって実感！ 大規模言語モデルことはじめ ver2.0
Avatar for Recruit recruitengineers
PRO
5
1.8k
LLM Internals: 언어 모델의 계보와 알고리즘 진화 (2023~2026)
Avatar for Jeongkyu Shin inureyes
PRO
0
200
Genie Codeハンズオン応用編
Avatar for Takaaki Yayoi taka_aki
0
110
SO-101×VLAによる3色キューブのピック＆プレース
Avatar for ABEJA abeja
0
210
その“隠したつもり”が命取り ── 自前と平文をやめて「正解」に委ねる
Avatar for kuroneko kuroneko13
0
130
ラジオの科学
Avatar for Frieve-A frievea
0
330
TypeScript入門 2026
Avatar for Recruit recruitengineers
PRO
3
640
FDEの心得
Avatar for Noriaki Oji noriakioji
5
6.1k
20260804_Q4AzureUpdateBite_FabricDataAgentの精度を高める設計.pdf
Avatar for matayuuu matayuuu
1
140
事業価値と Engineering 2026年度版
Avatar for Recruit recruitengineers
PRO
50
24k
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
2
7.7k

Featured

See All Featured
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
290
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
940
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
66
57k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
610
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.4k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k

Transcript

  1. @samflores

  2. None

  3. Twitter Bootstrap Slider Parallax jQuery Backbone

  4. 1 .css & 1 .js 1 .css & 1 .js

    1 .js 1 .js 2 .js Twitter Bootstrap Slider Parallax jQuery Backbone
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None

  13. <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>

  14. seriously?

  15. ! No braço!

  16. seriously?

  17. None

  18. GRUNT The JavaScript Task Runner

  19. 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

  20. 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

  21. seriously?

  22. gulp.js The streaming build system

  23. Streams Modular API Simples Rápido

  24. Streams Unix pipes no Node.js

  25. Streams Unix pipes no Node.js Facilita composição e reuso

  26. Streams Unix pipes no Node.js Facilita composição e reuso Assíncrono

    sem callback hell

  27. Streams Unix pipes no Node.js Facilita composição e reuso Assíncrono

    sem callback hell stream1.pipe(stream2)

  28. Modular Pequenos plugins

  29. Modular Pequenos plugins "do one thing and do it well"

  30. Modular Pequenos plugins "do one thing and do it well"

    Orientações rígidas

  31. Modular Pequenos plugins "do one thing and do it well"

    Orientações rígidas require('gulp-module')

  32. API Simple gulp.task(…)

  33. API Simple gulp.task(…) gulp.src(…)

  34. API Simple gulp.task(…) gulp.src(…) gulp.dest(…)

  35. API Simple gulp.task(…) gulp.src(…) gulp.dest(…) gulp.watch(…)

  36. Rápido Perfeito para "watch"

  37. Rápido Perfeito para "watch" Assíncrono FTW"

  38. Rápido Perfeito para "watch" Assíncrono FTW" Assíncrono WTF#

  39. Live Coding (hopefully)

  40. Thanks! @samflores