riki fridrich - grunt, gulp a spol. - automatizáciou k maximalizácii lenivosti

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