Automatización en el Flujo Front-end – Jade - Stylus - Coffeescript – Gulp.js

View Github Repository Open presentation in a new window

jeanpaul1304

See all presentation from jeanpaul1304

Automatización en el Flujo Front-end – Jade - Stylus - Coffeescript – Gulp.js

0 0

gulpjs-expo

Google I/O extended presentation - Automatización con gulp.js (Jade, Stylus y CoffeeScript)

On Github jeanpaul1304 / gulpjs-expo

Automatización en el Flujo Front-end

Jade - Stylus - Coffeescript

Gulp.js

Jade

Motor de plantillas de alto rendimiento influenciado por HAML

Cleaner version of HTML

Implemented with JS for Node.js Pst! Ahora llamame Pug

Ventajas de usar Jade

  • Escritura simplificada - Adios <> - Hola Tabs
  • Buenas practicas
  • Modularización del HTML
  • Posibilidad de utilizar logica (if, else, for, variables...)
Simple HTML 
							
<div class="ctn-social">
	<h2>Social Networks</h2>
	<ul>
		<li>
			<a href="http://plus.google.com">Google +</a>
		</li>
		<li>
			<a href="http://www.facebook.com">Facebook</a>
		</li>
		<li>
			<a href="http://www.twitter.com">Twitter</a>
		</li>
		<li>
			<a href="http://www.instagram.com">Instagram</a>
		</li>
	</ul>
</div>
Simple Jade 
						
.ctn-social
  h2 Social Networks
  ul
    li
      a(href="http://plus.google.com/") Google +
    li
      a(href="http://www.facebook.com/") Facebook
    li
      a(href="http://www.twitter.com/") Twitter
    li
      a(href="http://www.instagram.com/") Instagram

Texto Plano

							
h1 Titulo

a(href="#") Link

p Este es un parrafo simple

p Este
  | es 
  | un 
  | parrafo simple
							
						
							
<h1>Titulo</h1>

<a href="#">Link</a>

<p>Este es un parrafo simple</p>

<p>Este es un parrafo simple</p>

Comentarios

							
// Comentario html
//- Comentario Jade
							
						
							
<!-- Comentario html -->

HTML en linea

							
div.row
  div.columna
    <a href="#">See more</a>
							
						
							
<div class="row">
  <div class="columna">
    <a href="#">See more</a>
  </div>
</div>

Anidamiento

							
.row
  .column
    p
      a(href="#") Link
    p Sample text


// Anidación continua
.row: .column: p: a(href="#") Link
							
						
							
<div class="row">
  <div class="column">
    <p><a href="#">Link</a></p>
    <p>Sample text</p>
  </div>
</div>

<!-- Anidación continua -->
<div class="row">
  <div class="column">
    <p><a href="#">Link</a></p>
  </div>
</div>

Etiquetas, atributos y contenido

						
// Jade a HTML
.contenedor
  p Parrafo
  //- clases
  p.rojo Parrafo rojo
  //- id
  p#description Parrafo Azul de id description
  //- Atributos
  form(method="POST", action="/", class="nice-form", id="test-form")
    input(type="text" placeholder="Ingrese un texto")
						
						
<!-- Jade a HTML -->
<div class="contenedor">
  <p>Parrafo</p>
  <p class="rojo">Parrafo rojo</p>
  <p id="description">Parrafo Azul de id description</p>
  <form method="POST" action="/" id="test-form" class="nice-form">
    <input type="text" placeholder="Ingrese un texto">
  </form>
</div>

Preparandonos para modularizar

						
html
  head
    title Web Test
  body
    //- Contenido dinamico
    .wrapper
      h1 Mi Lista
      ul
        li Elemento 1
        li Elemento 2
        li Elemento 3
        li Elemento 4
    //- Contenido estatico
    footer
      p Copyright 2016 @ Jean Paul Diaz

Extensión de plantillas

include - extends

						
//- layouts/default.jade
doctype html
html
  head
    title Web test
  body
    block content
    include ../includes/footer.jade
						
					
						
//- includes/footer.jade
footer
  p Copyright 2016 @ Jean Paul Diaz
						
					
						
//- index.jade
extends ./layouts/default.jade
block content
  .wrapper
    h1 Mi Lista
    ul
      li Elemento 1
      li Elemento 2
      li Elemento 3
      li Elemento 4

Ejemplo de estructura de archivos para Jade

						
pre-app
|
|–– includes
|   |–– footer.jade
|   |–– head.jade
|   |–– header.jade
|   |–– navigation.jade
|
|–– layouts
|   |–– default.jade
|   |–– pages.jade
|
|–– index.jade
|–– about.jade
|–– contact.jade
						
					
						
app
|
|–– styles
|   |–– main.css
|   |–– main.min.css
|
|–– scripts
|   |–– scripts.js
|
|–– images
|   |–– logo.jpg
|
|–– index.html
|–– about.html
|–– contact.html

See more!

http://jade-lang.com/reference/ https://github.com/pugjs/

CSS actual

Si, una vez mas el meme de Peter Griffin

CSS needs a hero

body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

How if we could omit braces?

body
  font: 12px Helvetica, Arial, sans-serif;

a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

How about semi-colons?

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

Keep things DRY

DRY = Don't Repeat Yourself 
border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius(5px)

How about transparent mixins?

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius: 5px

Create & Share

@import 'vendor'

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  border-radius: 5px

What if it were all optional?

fonts = helvetica, arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}

Si eso te gusta, mejor usa Stylus!

http://stylus-lang.com/

CoffeeScript

Vista rapida

      # Asigancion:
      number = 42
      opposite = true

      # Condicionales
      number = 1304 if opposite

      # Functions
      cuadrado = (x) -> x * x

      # Arrays
      list = [1, 2, 3, 4, 5]
    
      var number, apposite, cuadrado list;

      number = 42;

      opposite = true;

      if (opposite) {
        number = -42;
      }

      cuadrado = function(x) {
        return x * x;
      }

      list = [1, 2, 3, 4, 5];

Vista rapida

# Objetos
math =
  root: Math.sqrt
  square: square
  cube: (x) -> x * square x

# Existencia
alert "Epa! Coffescript" if elvis?

# Array comprehensions
cubes = (math.cube num for num in list)
    
var math, cubes;
// Objetos
math = {
  root: Math.sqrt,
  square: square,
  cube: function(x){
    return x * square(x)
  }
};

// Existencia
if (typeof elvis !== "undefined" && elvis !== null){
  alert('Epa! Coffescript');
}

// Array comprehensions
cubes = (function() {
  var i, len, results;
  results = [];
  for (i = 0, len = list.length; i < len; i++) {
    num = list[i];
    results.push(math.cube(num));
  }
  return results;
})();

Mas info

http://coffeescript.org/

Util

http://js2.coffee/

Gulp

The streaming build system

Antes de empezar

        $ npm init
  • Instalar modulos con npm
      $ npm install --save-dev gulp
      $ npm install --save-dev gulp-jade

Era pre-gulp - Grunt

Source: Frontendlabs.io

Ahora con gulp

Source: Frontendlabs.io

Como funciona gulp?

  • Selecciona archivos
  • Lo transforma
  • Los repone o re-ubica una copia

Gulp solo tiene 4 comandos!

Sus cuatro fantasticos

Nope!

Gulp task Gulp src Gulp dest Gulp watch

Gulp task

      gulp.task('nombretarea',function(){
        // aqui continuamos
      });

Gulp src

      gulp.task('compilarJade',function(){
        gulp.src('ruta/de/archivo')
        // aun continuamos aqui
      });

Gulp dest

      gulp.task('compilarJade',function(){
        gulp.src('./jade/*.jade')
          .pipe(gulp.dest('ruta/de/destino'));
      });
Tarea simple que mueve un archivo de un lugar a otro

wait! Que es pipe?

Gulp dest

      gulp.task('compilarJade',function(){
        gulp.src('./jade/*.jade')
          .pipe(jade())
          .pipe(gulp.dest('./public/'));
      });
      //continuamos aqui
Tarea para compilar jade

Gulp watch

      // tarea para compilar jade
      gulp.task('compilarJade',function(){
        gulp.src('./jade/*.jade')
          .pipe(jade())
          .pipe(gulp.dest('./public/'));
      });

      // watch
      gulp.watch('./jade/*.jade',['compilarJade']);

Estructura de un archivo de gulp

      
      // variables que contienen los modulos que usamos
      var gulp = require('gulp');
      var jade = require('gulp-jade');

      // tarea para compilar jade
      gulp.task('compilarJade',function(){
        gulp.src('./jade/*.jade')
          .pipe(jade())
          .pipe(gulp.dest('./public/'));
      });

      // watch
      gulp.watch('./jade/*.jade',['compilarJade']);

Listo. Ya sabes gulp.

Front Kick Alpha

Un Flujo de trabajo front end :) https://github.com/jeanpaul1304/front-kick-alpha

Preguntas y comentarios

Gracias!

Github http://github.com/jeanpaul1304 Diapositivas http://jeanpaul1304.github.io/gulpjs-expo Front-kick-alpha https://github.com/jeanpaul1304/front-kick-alpha and as @jeanpaul1304 at all long the web...

‪#isiljsday

Automatización en el Flujo Front-end Jade - Stylus - Coffeescript Gulp.js