Gulp.js

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

Transcript

1. @samflores
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
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?
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