Automate your frontend, bitch! 

EL BACKEND ESCALA Reparte a ~100 usuarios 

Deliver to ~100 users Reparte a ~1m usuarios EL BACKEND ESCALA 

Y TAMBIÉN LO HACE EL FRONTEND Deliver to ~100 users Deliver to ~1m users 

MANERAS DE MEJORAR TU FRONTEND pre-procesadores CSS: LESS, Sass, Stylus… lenguajes compila-a-js: Coffeescript, Typescript, Clojurescript… frameworks en el cliente: AngularJS, Backbone.js, Ember.js… frameworks CSS: Bootstrap, Pure, UIKit, tuktuk… 

Y TODAS ELLAS TIENEN EN COMÚN… 

POR QUÉ UN LANZADOR DE TAREAS? AUTOMATIZACIÓN 

QUÉ TIENE GRUNT DE BUENO? gran ecosistema que crece cada día JAVASCRIPT node.js y npm === gran combinación cientos de plugins enorme flexibilidad 

Manos a la obra 

REQUISITOS node.js >= 0.8.0 y npm Gruntfile.js (.coffee) package.json npm install -g grunt-cli 

PACKAGE.JSON { "name": “bbalm-project", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-uglify": “~0.2.2”, // Todos los demás plugins } } npm install + 

npm init npm install grunt --save-dev PACKAGE.JSON npm install --save-dev 

GRUNTFILE.JS module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); ! grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']); }; función principal configuración carga módulos declara tareas 

module.exports = function(grunt) { grunt.initConfig({ uglify: { build: { src: 'src/bbalm.js', dest: 'build/bbalm.min.js' } }, concat: { dist: { src: ['src/a.js', 'src/b.js'], dest: 'src/bbalm.js' } } }); ! grunt.loadNpmTasks(‘grunt-contrib-uglify'); grunt.loadNpmTasks(‘grunt-contrib-concat’); ! grunt.registerTask('default', [‘uglify']); grunt.registerTask(‘prod’, [‘concat’, ‘uglify:build’]); }; 

grunt-contrib-clean grunt-contrib-coffee PLUGINS MANTENIDOS POR GRUNT grunt-contrib-compass grunt-contrib-compress grunt-contrib-concat grunt-contrib-connect grunt-contrib-copy grunt-contrib-cssmin grunt-contrib-htmlmin grunt-contrib-imgmin grunt-contrib-jasmine grunt-contrib-jshint grunt-contrib-less grunt-contrib-sass grunt-contrib-watch 

GRUNT LESS grunt.initConfig({ less: { dev: { options: {sourceMap: true}, files: { “style/bbalm.css": “src/style/bbalm.less” } }, prod: { options: {cleancss: true}, files: { “style/bbalm.min.css”: “src/style/bbalm.less” } } } }); grunt less / grunt less:dev / grunt less:prod 

GRUNT WATCH grunt.initConfig({ watch: { css: { files: [‘src/style/*.less’], tasks: [‘less:dev’], options: { livereload: 1337, }, }, coffee: { files: [‘src/scripts/*.coffee'], tasks: [‘coffee:src’, ‘coffee:test’, ‘test’], } } }); grunt watch / grunt watch:css / grunt watch:coffee 

GRUNT CONNECT grunt.initConfig({ connect: { server: { options: { port: 9001, hostname: ‘localhost’, base: ‘dist’, open: true, livereload: 1337 // true } } } }); grunt connect / grunt connect:server 

TODO JUNTO grunt.loadNpmTasks(‘grunt-contrib-connect'); grunt.loadNpmTasks(‘grunt-contrib-watch'); grunt.loadNpmTasks(‘grunt-contrib-less'); grunt.loadNpmTasks(‘grunt-contrib-coffee'); ! grunt.registerTask('default', [‘connect’, ‘watch’]); 

No content

SOURCE MAPS //@ sourceMappingURL=/path/to/file.js.map X-SourceMap: /path/to/file.js.map 

MUCHA MÁS AUTOMATIZACIÓN 

MUCHA MÁS AUTOMATIZACIÓN crea la estructura básica de tu proyecto y toda la configuración para empezar viene con toda la configuración y tareas para que montes, pruebes y previsualices manejo de dependencias para el navegador para que no tengas que hacerlo a mano 

REQUISITOS node.js >= 0.8.0 y npm npm install -g yo npm install -g grunt-cli bower npm install -g 

APP DE EJEMPLO $ npm install -g generator-webapp $ yo webapp bbalmapp ! $ cd bbalmapp $ bower install underscore ! # lanza la app en un servidor con livereload $ grunt server ! # prepara la aplicación para producción $ grunt 

YO ANGULAR $ npm install -g generator-angular $ yo angular ! $ bower install angular-ui ! # corre los test unitarios de la app $ grunt test ! # lanza la app en un servidor con livereload $ grunt server ! # prepara la aplicación para producción $ grunt 

AÚN HAY MÁS $ yo angular:controller miControlador $ yo angular:directive miDirectiva $ yo angular:filter miFiltro $ yo angular:service miServicio 

“Deja a Grunt hacer todo el trabajo y céntrate en lo importante!” Dirk Ginader 

No content

¡Gracias! ¿Preguntas? =) 

KUDOS grunt.js: http://gruntjs.com/ grunt connect: https://npmjs.org/package/grunt-contrib-connect grunt watch: https://npmjs.org/package/grunt-contrib-watch yeoman: http://yeoman.io/ bower: http://bower.io/ yo angular: https://github.com/yeoman/generator-angular yo webapp: https://github.com/yeoman/generator-webapp