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
59
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
【Oracle Cloud ウェビナー】データ主権はクラウドで守れるのか？NTTデータ様のOracle Alloyで実現するソブリン対応クラウドの最適解
Avatar for oracle4engineer oracle4engineer
PRO
3
130
Oracle Cloud Infrastructure：2026年3月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
320
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
Avatar for Cybozu cybozuinsideout
PRO
10
77k
スクラムを支える内部品質の話
Avatar for IIJ_PR iij_pr
0
170
FASTでAIエージェントを作りまくろう！
Avatar for YukiOgawa yukiogawa
4
190
The essence of decision-making lies in primary data
Avatar for 株式会社カミナシ kaminashi
0
230
SSoT（Single Source of Truth）で「壊して再生」する設計
Avatar for かわうそ kawauso
2
410
OCI技術資料 : 証明書サービス概要
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
1
7.2k
非同期・イベント駆動処理の分散トレーシングの繋げ方
Avatar for Ken ichikawaken
1
250
FlutterでPiP再生を実装した話
Avatar for 白井翔大 s9a17
0
240
ブラックボックス化したMLシステムのVertex AI移行 / mlops_community_62
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
260
Cortex Code君、今日から内製化支援担当ね。
Avatar for あべ coco_se
0
140

Featured

See All Featured
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
92
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.1k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
210
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
330
It's Worth the Effort
Avatar for 3n 3n
188
29k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
190
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k

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