Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Gulp.js

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
AWSセキュリティアップデートとAWSを育てる話
Avatar for cm-usuda-keisuke cmusudakeisuke
0
200
20251209_WAKECareer_生成AIを活用した設計・開発プロセス
Avatar for syobochim syobochim
5
1.4k
直接メモリアクセス
Avatar for KOBA789 koba789
0
290
A Compass of Thought: Guiding the Future of Test Automation ( #jassttokai25 , #jassttokai )
Avatar for teyamagu teyamagu
PRO
1
250
MLflowで始めるプロンプト管理、評価、最適化
Avatar for Databricks Japan databricksjapan
1
130
[CMU-DB-2025FALL] Apache Fluss - A Streaming Storage for Real-Time Lakehouse
Avatar for Jark Wu jark
0
110
エンジニアリングをやめたくないので問い続ける
Avatar for estie | エスティ estie
2
1k
SSO方式とJumpアカウント方式の比較と設計方針
Avatar for Yuto Obayashi yuobayashi
7
590
チーリンについて
Avatar for ぐっち hirotomotaguchi
6
1.7k
第4回 「メタデータ通り」　リアル開催
Avatar for データ横丁 datayokocho
0
120
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
Avatar for SansanTech sansantech
PRO
1
110
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
Avatar for 1ft-seabass 1ftseabass
PRO
0
310

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k

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