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
180
Introdução ao MRuby
samflores
1
44
Por que Ruby?
samflores
1
130
Extendendo Ruby com C (& cartoons)
samflores
3
170
Sinatra
samflores
2
200

Other Decks in Technology

See All in Technology
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
420
Janus
bkuhlmann
1
490
オーナーシップを持つ領域を明確にする
konifar
13
3k
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
27
5.7k
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
130
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
270
アクセス制御にまつわる改善 / Improving access control
itkq
0
480
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
220
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
250
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
0
230
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.2k
Google Cloud の AI を支える裏側のインフラを垣間見る！
maroon1st
0
320

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Optimizing for Happiness
mojombo
370
69k
Adopting Sorbet at Scale
ufuk
67
8.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Rails Girls Zürich Keynote
gr2m
91
13k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
How to train your dragon (web standard)
notwaldorf
72
5.1k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Side Projects
sachag
451
41k
In The Pink: A Labor of Love
frogandcode
138
21k

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