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
1
150

 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
Tweet

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
58
Por que Ruby?
Avatar for Samuel Flores samflores
1
150
Extendendo Ruby com C (& cartoons)
Avatar for Samuel Flores samflores
3
180
Sinatra
Avatar for Samuel Flores samflores
2
220

Other Decks in Technology

See All in Technology
入社1ヶ月でデータパイプライン講座を作った話
Avatar for Yuta Ozaki waiwai2111
1
250
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
24k
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
Avatar for Niishi Kubo n11sh1
0
120
こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -
Avatar for Masataka Tsukamoto tsukaman
0
110
システムのアラート調査をサポートするAI Agentの紹介/Introduction to an AI Agent for System Alert Investigation
Avatar for SadayoshiTada taddy_919
2
2k
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
Avatar for Sashimimochi sashimimochi
0
150
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
42k
あたらしい上流工程の形。 0日導入からはじめるAI駆動PM
Avatar for 熊井悠 kumaiu
5
760
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
Avatar for kekke-n kekke_n
1
360
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
Avatar for Konishi tatsuhiro tatsukoni
0
210
What happened to RubyGems and what can we learn?
Avatar for Mike McQuaid mikemcquaid
0
250
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
290

Featured

See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
140
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
88
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
160
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
520
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
430
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
160

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