Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti
-
Upload
develcz -
Category
Engineering
-
view
2.885 -
download
6
description
Transcript of Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti
![Page 1: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/1.jpg)
Automatizácia vývoja
![Page 2: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/2.jpg)
![Page 3: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/3.jpg)
Kompilácia
![Page 4: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/4.jpg)
class Person
constructor: (@name = 'John Doe') -> greet: -> console.log "Hi! My name is #{@name}"
1. CoffeeScript
![Page 5: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/5.jpg)
2. ???
![Page 6: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/6.jpg)
var Person;
Person = (function() { function Person(name) { this.name = name != null ? name : 'John Doe'; }
Person.prototype.greet = function() { return console.log("Hi! My name is " + this.name); };
return Person;
})();
3. Profit!!!
![Page 7: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/7.jpg)
![Page 8: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/8.jpg)
module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-watch' grunt.loadNpmTasks 'grunt-contrib-coffee' grunt.initConfig watch: files: 'coffee/*.coffee' tasks: ['coffee'] coffee: files: 'js/my_project.js': 'coffee/*.coffee'
Gruntfile.coffee
![Page 9: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/9.jpg)
Minifikácia kódu
![Page 10: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/10.jpg)
var Person;
Person = (function() { function Person(name) { this.name = name != null ? name : 'John Doe'; }
Person.prototype.greet = function() { return console.log("Hi! My name is " + this.name); };
return Person;
})();
1. Neminifikovaný kód
![Page 11: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/11.jpg)
2. ???
![Page 12: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/12.jpg)
var Person;Person=function(){function e(e){this.name=e!=null?e:"John Doe"}e.prototype.greet=function(){return console.log("Hi! My name is "+this.name)};return e}()
3. Profit!!!
![Page 13: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/13.jpg)
module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-uglify' grunt.loadNpmTasks 'grunt-contrib-cssmin' grunt.initConfig uglify: files: 'js/my_project.min.js': 'js/my_project.js'
cssmin: files: 'js/my_project.min.css': 'js/my_project.css'
Gruntfile.coffee
![Page 14: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/14.jpg)
Minifikácia obrázkov
![Page 15: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/15.jpg)
1. Obrovský obrázok
2500 KB
![Page 16: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/16.jpg)
2. ???
![Page 17: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/17.jpg)
2500 KB => 125 KB
3. Profit!!!
![Page 18: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/18.jpg)
module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-imagemin' grunt.initConfig imagemin: files: expand: true cwd: 'originals/' src: '*.{jpg,png,gif}' dest: 'optimized/'
Gruntfile.coffee
![Page 19: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/19.jpg)
module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-svg2png' grunt.initConfig svg2png: files: src: ‘originals/*.svg' dest: 'images/'
Gruntfile.coffee
![Page 20: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/20.jpg)
module.exports = (grunt) -> grunt.loadNpmTasks ‘grunt-responsive-images' grunt.initConfig responsive_images: options: sizes: [{width: 320}, {width: 640},{width: 1024}] files: expand: true cwd: 'originals/' src: '*.jpg' dest: 'images/'
Gruntfile.coffee
![Page 21: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/21.jpg)
module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-spritesmith' grunt.initConfig sprite: src: 'originals/icons/*.png', destImg: 'build/sprites.png', destCSS: 'build/sprites.css'
Gruntfile.coffee
![Page 22: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/22.jpg)
Buildovanie
![Page 23: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/23.jpg)
module.exports = (grunt) ->
...
grunt.initConfig watch: files: 'coffee/*.coffee' tasks: ['coffee', 'concat', 'uglify']
1. Pomalý watch
![Page 24: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/24.jpg)
2. ???
![Page 25: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/25.jpg)
module.exports = (grunt) ->
...
grunt.initConfig watch: files: 'coffee/*.coffee' tasks: ['coffee']
grunt.registerTask 'build', ['coffee', 'concat', 'uglify']
3. Profit!!!
![Page 26: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/26.jpg)
![Page 27: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/27.jpg)
Každý si postavil devstack.
Kdo říká, že ne, staví ho dodneška.
— Martin Malý
![Page 28: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/28.jpg)
GIT SUBMODULE
NOT EVEN ONCE
![Page 29: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/29.jpg)
Bower
![Page 30: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/30.jpg)
// shell
bower install bootstrap --save
1. Potrebujem Bootstrap
![Page 31: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/31.jpg)
2. ???
![Page 32: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/32.jpg)
// bower.json
{ "name": "my-project", "version": "0.1.0", "dependencies": { "jquery": "~2.1.1", "bootstrap": "~3.1.1" }}
3. Profit!!!
![Page 33: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/33.jpg)
![Page 34: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/34.jpg)
![Page 35: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/35.jpg)
3.1.4
![Page 36: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/36.jpg)
TEAMWORK, P✱ČO!
![Page 37: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/37.jpg)
⇥ versus ···· versus ····
![Page 38: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/38.jpg)
![Page 39: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/39.jpg)
![Page 40: Riki Fridrich - Grunt, Gulp a spol. - Automatizáciou k maximalizácii lenivosti](https://reader033.fdocuments.net/reader033/viewer/2022050720/53f4b6b18d7f72c80e8b4b3a/html5/thumbnails/40.jpg)
• kód menej náchylný k chybám
• optimalizovaný kód
• znovupoužiteľný komponentový kód
• open-source
• automatické testy
• zvýšená produktivita…
• …celého teamu
Následky automatizácie