riki fridrich - grunt, gulp a spol. - automatizáciou k maximalizácii lenivosti
DESCRIPTION
TRANSCRIPT
Automatizácia vývoja
Kompilácia
class Person
constructor: (@name = 'John Doe') -> greet: -> console.log "Hi! My name is #{@name}"
1. CoffeeScript
2. ???
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!!!
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
Minifikácia kódu
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
2. ???
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!!!
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
Minifikácia obrázkov
1. Obrovský obrázok
2500 KB
2. ???
2500 KB => 125 KB
3. Profit!!!
module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-imagemin' grunt.initConfig imagemin: files: expand: true cwd: 'originals/' src: '*.{jpg,png,gif}' dest: 'optimized/'
Gruntfile.coffee
module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-svg2png' grunt.initConfig svg2png: files: src: ‘originals/*.svg' dest: 'images/'
Gruntfile.coffee
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
module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-spritesmith' grunt.initConfig sprite: src: 'originals/icons/*.png', destImg: 'build/sprites.png', destCSS: 'build/sprites.css'
Gruntfile.coffee
Buildovanie
module.exports = (grunt) ->
...
grunt.initConfig watch: files: 'coffee/*.coffee' tasks: ['coffee', 'concat', 'uglify']
1. Pomalý watch
2. ???
module.exports = (grunt) ->
...
grunt.initConfig watch: files: 'coffee/*.coffee' tasks: ['coffee']
grunt.registerTask 'build', ['coffee', 'concat', 'uglify']
3. Profit!!!
Každý si postavil devstack.
Kdo říká, že ne, staví ho dodneška.
— Martin Malý
GIT SUBMODULE
NOT EVEN ONCE
Bower
// shell
bower install bootstrap --save
1. Potrebujem Bootstrap
2. ???
// bower.json
{ "name": "my-project", "version": "0.1.0", "dependencies": { "jquery": "~2.1.1", "bootstrap": "~3.1.1" }}
3. Profit!!!
3.1.4
TEAMWORK, P✱ČO!
⇥ versus ···· versus ····
• 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
Riki Fridrich, fczbkk.com