�ݺ�ߣ

Optimiza tu frontend
workflow con Twig,
Bower y Gulp

Manel López Torrent
Ingeniero en informática
Web Developer
@mloptor
malotor@gmail.com
Jonás Talavera
Ingeniero t. en informática
Web Developer
@jonas_tg
jonastg@gmail.com

Motor
de plantillas
Gestor de
paquetes
Task
Runner

¿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=/slideshow/workflow-twig-bower-y-gulp-52334437/52334437/"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
?

SCULPINSCULPIN
http://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 Demo
subtitle: Gulp, Bower and Twig
/app/config/sculpin_site.yml
Variables
Globales

source/
├── _layouts
│ └── default.html
├── about.md
├── css
│ └── styles.css
├── img
│ └── slideshow
│ ├── image1.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=/slideshow/workflow-twig-bower-y-gulp-52334437/52334437/"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

---
layout: default
title: 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>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
/index.html

---
layout: default
title: 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>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
/index.html Block
Content

---
layout: default
title: Markdown
---
An h1 header
============
Paragraphs are separated by a blank line.
2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
look like:
* this one
* that one
* the other one
Note that --- not considering the asterisk --- the actual text
content 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

Bower
Gestor de paquetes
para la Web
● > 34700 paquetes disponibles (junio 2015).
● Necesita nodejs & npm y git.
● Versionado semántico (Semver).

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

● 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.

Gulp
Automatiza tareas
comunes
● Basado en streams & pipes.
● Funcionalidad mediante plugins.
● Maximiza la ejecución de tareas
en paralelo.

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

More Related Content

Workflow twig, bower y gulp

Editor's Notes