Workflow twig, bower y gulp

Optimiza tu frontend workflow con Twig,

Bower y Gulp

Manel López TorrentIngeniero en informática

Web Developer@mloptor

[email protected]

Jonás TalaveraIngeniero t. en

informáticaWeb Developer

@[email protected]

Motorde plantillas

Gestor depaquetes

TaskRunner

Frontend

+

FrontEnd Optimizado !!!!

¿Cómo creábamos nuestros sitios html?

<?php include("header.php"); ?> <p>Hello world! This is HTML5 Boilerplate.</p><?php include("footer.php"); ?>

<!doctype html><html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="apple-touch-icon.png"> 

<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.8.3.min.js"></script> </head> <body>

<footer> <p>Footer</p> </fotter> </body></html>

index.php

header.php

footer.php

<?php include("header.php"); ?> <p>This is a contact page.</p><?php include("footer.php"); ?>

contact.php

● Control de flujo

● Escapado automático

● Herencia de plantillas

● Filtros

● i18n support (gettext)

● Macros

● Extensiones

{% extends "base.html" %}{% block navigation %} <ul id="navigation"> {% for item in navigation %} <li> <a href="{{ item.href }}"> {% if 2 == item.level %}

{% endif %} {{ item.caption|upper }} </a> </li> {% endfor %} </ul>{% endblock navigation %}

Twig features

Twig templates HTML Static site?

SCULPINSCULPINhttp://sculpin.io

Twig templates

Markdown files

HTML Static site

HTML files

$ cd project_folder/

$ curl -O https://download.sculpin.io/sculpin.phar

$ chmod +x sculpin.phar

$ sudo mv sculpin.php /usr/bin/sculpin

$ sculpin install

Instalar Sculping

app/└── config ├── sculpin_kernel.yml └── sculpin_site.yml

# The contents of this file are parsed and made available as# via `site.*`. So for example, {{ site.title }} can be used# in a template to get the contents of the `title` key.

title: PHPValencia Demosubtitle: Gulp, Bower and Twig

/app/config/sculpin_site.yml

VariablesGlobales

source/├── _layouts│ └── default.html├── about.md├── css│ └── styles.css├── img│ └── slideshow│ ├── image1.jpg│ ├── image2.jpg│ ├── image3.jpg│ └── image4.jpg├── index.html└── js └── javascript.js

<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>{% block title %}{{ page.title }}{% endblock %}</title> {% block stylesheets %}{% endblock %} <script src="js/javascript.js"></script> <link rel="stylesheet" href="css/styles.css"/></head><body>{% block content_wrapper %}{% block content %}{% endblock %}{% endblock %}{% block javascripts %}{% endblock %}</body></html>

/source/_layouts/default.html

source/├── _layouts│ └── default.html├── about.md├── css│ └── styles.css├── img│ └── slideshow│ ├── image1.jpg│ ├── image2.jpg│ ├── image3.jpg│ └── image4.jpg├── index.html└── js └── javascript.js

---layout: defaulttitle: Home---<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div>

/index.html

---layout: defaulttitle: Home---<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div>

/index.html BlockContent

---layout: defaulttitle: Markdown

---

An h1 header============

Paragraphs are separated by a blank line.

2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized listslook like:

* this one * that one * the other one

Note that --- not considering the asterisk --- the actual textcontent starts at 4-columns in.

/about.md

output_dev/├── about│ └── index.html├── components│ ├── bootstrap│ ├── highlightjs│ ├── jquery│ ├── require-built.js│ ├── require.config.js│ ├── require.css│ └── require.js├── css│ └── styles.css├── img│ └── slideshow├── index.html└── js └── javascript.js

$ sculpin generate --watch --server

http://localhost:8000

BowerGestor de paquetes para la Web

● > 34700 paquetes disponibles (junio 2015).

● Necesita nodejs & npm y git.

● Versionado semántico (Semver).

● Instalación: $ npm install -g bower

Semantic versioning● Formato: MAJOR.MINOR.PATCH:

○ MAJOR: cambios que hacen incompatible la API actual.

○ MINOR: nueva funcionalidad que mantiene la

compatibilidad hacia atrás.

○ PATCH: cambios menores, corrección de bugs.

● Se permiten etiquetas como extensiones del formato

MAJOR.MINOR.PATH. Ej.: 1.0.0-alpha, 2.3.0-beta

● Operadores:

○ <, >, <=, >=, =: operadores de comparación.

■ <2.0.0

■ >=1.8.0

○ hyphen-range: define un conjunto de valores posibles

■ 0.8.0 - 2.0.0 ~= 0.8.0 >= v <= 2.0.0

○ X-range: x, * para modificar uno de los valores de x.y.z

■ * ~= v >= 0.0.0

■ 1.5.x = 1.5.* ~= 1.5.0 <= v < 1.6.0

■ 1.x = 1.x.x ~= 1.0.0 <= v < 2.0.0

● Operadores:

○ ~ (tilde): permite cambios en el valor menor de x.y.z

especificado.

■ ~1.2.3 ~= 1.2.3 <= v < 1.3 (igual a 1.2.x)

■ ~1 ~= 1.0.0 <= v < 2.0.0 (igual a 1.x.x)

○ ^ (caret): permite cambios en el primer valor de versión

desde la izquierda distinto de cero

■ ^1.2.3 ~= 1.2.3 <= v < 2.0.0

■ ^0.2.3 ~= 0.2.3 <= v < 0.3.0

■ ^0.0.3 ~= 0.0.3 <= v < 0.0.4

● Bower API:

○ $ bower init: crea un fichero bower.json de forma

interactiva.

○ $ bower install [--save] <name#version>: instala un

nuevo paquete.

○ $ bower list: lista los paquetes instalados y posibles

actualizaciones.

○ $ bower update [<name>]: actualiza paquetes

instalados o uno específico.

○ $ bower info <name>: muestra info sobre un paquete.

○ $ bower search <name>: busca paquetes.

● bower.json:

GulpAutomatiza tareas comunes

● Basado en streams & pipes.

● Funcionalidad mediante plugins.

● Maximiza la ejecución de tareas

en paralelo.

● Fácil de usar y de aprender.

Gulp vs Grunt

● Código vs configuración.

● Plugins vs tareas predefinidas.

● Streams vs ficheros temporales.

● ~ 1500 plugins vs ~ 4400 plugins

● Gulp API:

○ gulp.src(globs[, options]): devuelve un stream de

lectura que se puede dirigir a un plugin.

● Gulp API:

○ gulp.dest(path[, options]): escribe un flujo de datos en

disco.

● Gulp API:

○ gulp.task(name[, deps], fn): define una tarea.

● Gulp API:

○ gulp.watch(glob[, options], tasks): observa un

conjunto de ficheros y se ejecutan tareas cuando

cambian.

Gracias por asistir!!!

Esperamos que os haya gustado :D

Workflow twig, bower y gulp

Internet

Transcript of Workflow twig, bower y gulp