Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Gulp.js

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
210
Introdução ao MRuby
Avatar for Samuel Flores samflores
1
63
Por que Ruby?
Avatar for Samuel Flores samflores
1
170
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
SREの視点で考えるSIEM活用術 〜AWS環境でのセキュリティ強化〜
Avatar for サイバーセキュリティクラウド cscengineer
PRO
0
340
SREへの勘違いに気づいた後の話
Avatar for yuden tomodakengo
0
150
GoのInterface内部構造から学ぶ！最高パフォーマンスを出すコード設計
Avatar for Yappli Developers yappli_developers
1
290
AIエージェントの権限管理 3:  Agentic RAG の Fine grained access control 編
Avatar for Renya Kujirada ren8k
1
260
認知負荷を吸収し、プロダクトをまたぐPR Preview基盤の設計事例
Avatar for taiki45 taiki45
2
220
AI Agent入門〜今更聞けないAgentの話〜
Avatar for Magy hiromimaganuma
0
120
メルカリにおけるAI時代の高速プロトタイピング基盤「Arca」
Avatar for Ryota Arai ryotarai
11
8.4k
時うどん〜Socket.getifaddrsで学ぶネットワーク編 / Tokiudon: The Socket.getifaddrs Edition
Avatar for Misaki Shioi(塩井美咲/しおい) coe401_
4
260
リアーキテクチャ後の障害ゼロを目指したShadow Testingの取り組み
Avatar for nihonbuson nihonbuson
PRO
1
180
PQC移行の今 -- IETF からみた現在地
Avatar for Satoru Kanno satokan
3
230
あけおめLINE 傾向とその対策
Avatar for nasa9084 nasa9084
0
330
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
12k

Featured

See All Featured
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
700
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
510
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
16k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

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