Post on 13-Apr-2017
transcript
Optimiza tu frontend workflow con Twig,
Bower y Gulp
Manel López TorrentIngeniero en informática
Web Developer@mloptor
malotor@gmail.com
Jonás TalaveraIngeniero t. en
informáticaWeb Developer
@jonas_tgjonastg@gmail.com
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"> <!-- Place favicon.ico in the root directory -->
<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
Twig
● 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
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
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.
Demo
Gracias por asistir!!!
Esperamos que os haya gustado :D