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

Gulp.js

Samuel Flores
August 09, 2014
Technology
1
140

 Gulp.js

Automatizando o build do front end das suas apps, de maneira rápida e fácil.

Samuel Flores

August 09, 2014
Tweet

More Decks by Samuel Flores

See All by Samuel Flores
Clojure
samflores
4
190
Introdução ao MRuby
samflores
1
54
Por que Ruby?
samflores
1
140
Extendendo Ruby com C (& cartoons)
samflores
3
180
Sinatra
samflores
2
210

Other Decks in Technology

See All in Technology
BCMathを高速化した一部始終をC言語でガチ目に解説する / BCMath performance improvement explanation
sakitakamachi
2
680
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
120
「エンジニアマネージャー」の役割を担っている / 担ってみたい方へのキャリアパスガイド
coconala_engineer
1
220
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
990
LINE API Deep Dive Q1 2025: Unlocking New Possibilities
linedevth
1
140
日本MySQLユーザ会ができるまで / making MyNA
tmtms
1
180
Why Go?
xpmatteo
0
120
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
470
Keynote - KCD Brazil - Platform Engineering on K8s (portuguese)
salaboy
0
110
ISUCONにPHPで挑み続けてできるようになっ（てき）たこと / phperkaigi2025
blue_goheimochi
0
120
Explainable Software Engineering in the Public Sector
avandeursen
0
270
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
0
110

Featured

See All Featured
Music & Morning Musume
bryan
46
6.4k
Speed Design
sergeychernyshev
28
850
KATA
mclloyd
29
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Embracing the Ebb and Flow
colly
84
4.6k
4 Signs Your Business is Dying
shpigford
183
22k
Building Applications with DynamoDB
mza
94
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A better future with KSS
kneath
238
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
GraphQLとの向き合い方2022年版
quramy
45
14k

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