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

Gulp.js

Avatar for Samuel Flores Samuel Flores
August 09, 2014
Technology
150
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
60
Por que Ruby?
Avatar for Samuel Flores samflores
1
150
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
checker.tsにチキンレースを仕掛けてみた：型エラー(TS2589)が発生する境界線を求めて
Avatar for Hal hal_spidernight
1
130
freee-mcpを Local→Remote で出してわかった MCP認可実装のリアル
Avatar for てらら terara
2
470
CloudFront VPCオリジンとVPC Latticeサービスの内部ALBをマルチアカウントで一元利用しよう
Avatar for k-kun duelist2020jp
4
110
Kaggle未経験社員をメダリストに育てる「AIドラゴン桜」
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
160
AI全盛の今だからこそ、あえてもう一度振り返るAPIの基礎
Avatar for Makky12 smt7174
3
150
" 生成AIだけを使って" uPAR治療薬特許の分析
Avatar for Polytec polytech
0
110
AI時代に求められる思考のパラダイムシフト
Avatar for NRI Netcom nrinetcom
PRO
0
130
TSKaigi 2026 - 10秒のビルドを1秒へ：tsdownが切り拓く2026年のTypeScriptライブラリ開発
Avatar for teamLab teamlab
PRO
1
130
論文紹介：Pixal3D (SIGGRAPH 2026)
Avatar for TakatoYoshikawa tenten0727
0
690
その英語学習、AWSで代替できませんか？
Avatar for Tatsuya suzutatsu
1
210
ANDPAD Ruby sponsor session in RubyKaigi 2026
Avatar for ANDPAD inc andpad
0
120
自作エディターをOSSにして分かった、一人に刺さる開発が世界を動かす理由
Avatar for Shinya Saita shinyasaita
1
260

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.3k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
120
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
810
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
510
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
280
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
830
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k

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