GulpGestión de assets en Symfony

PHPSevilla28 Septiembre 2016 Juan Luis García Borrego

Patrocinadores

Sobre mí

Desarrollador Symfony en Innn

Juan Luis García Borrego

@JuanluGarciaBjuanluisgarciaborrego.com

ÍNDICE

Flujo de trabajo

Assets en Symfony

NPM Gulp

Ejemplo práctico

Flujo de trabajo

Assets en Symfony

NPM Gulp

Ejemplo práctico

Flujo de trabajo

Assets en Symfony

NPM Gulp

Ejemplo práctico

Flujo de trabajo

Assets en Symfony

NPM Gulp

Ejemplo práctico

Flujo de trabajo

Assets en Symfony

NPM Gulp

Ejemplo práctico

Flujo de trabajo

El flujo de trabajo de un desarrollador se ha convertido en una tarea un poco “compleja”.

Para una aplicación sencilla como mínimo en el frontend usamos algún framework css (Bootstrap, Materialize, PureCss, Foundation,

otros.), un preprocesador css (Sass, LEES, otros), alguna librería JavaScript (jQuery, Angular, React, Vue, infinitas)

Además, necesito gestionar las versiones, unir todos los css/js en un archivo y minificarlo para que mi web cargue más rápido y lo que surja….

Flujo de trabajo

¿MANUALMENTE?

Al igual que Composer nos facilita la vida gestionando nuestros vendors

Existen numerosas herramientas y automatizadores de tareas FrontEnd que nos facilitan nuestro día a día

Grunt, Bower, Gulp, WebPack

Flujo de trabajo

NPM

NPMIntroducción

Gestor de paquetes FrontEnd y BackEnd [NodeJS]

Busca, gestiona y reutiliza librerías de otros programadores

Viene incluido al instalar Node JS

NPMNode Package Manager

Gestor de paquetes FrontEnd y BackEnd [NodeJS]

Busca, gestiona y reutiliza librerías de otros programadores

Viene incluido al instalar Node JS

Misma funcionalidad que Composer en PHP

NPMNode Package Manager

BACKENDFRONTEND

NPMpackage.json

En este archivo queda reflejado toda la configuración de un “proyecto node” (nombre, autor, licencia, versión, dependencias, etc.)

En nuestro caso informa de las dependencias node utilizadas.

El archivo package.json estará alojado en el directorio raíz del proyecto

NPMpackage.json

BACKENDFRONTEND

package.json composer.json

NPMGuía rápida de uso

$ npm init

NPMInicializar proyecto

Nos pedirá datos de nuestro proyecto y generará el archivo package.json

{ “name”:”ejemplo“, "version": "1.0.0", "description": "Descripción del proyecto", "dependencies": { }, "devDependencies": { }, "keywords": [ "phpsevilla", "gulp" ], "author": "Juan Luis García Borrego", "license": "MIT" }

package.json

$ npm install —save-dev NOMBRE

NPMAñadir dependencias

Instala el paquete NOMBRE (guarda los archivos en el directorio node_modules) y añade la librería al archivo package.json en el apartado de dependencias de desarrollo.

"devDependencies": { },

$ npm remove —save-dev NOMBRE

NPMEliminar dependencias

Elimina el paquete NOMBRE (node_modules/) y borra la librería al archivo package.json en el apartado de dependencias de desarrollo.

"devDependencies": { },

$ npm outdated

NPMChequea si existe nuevas versiones

Para instalar la nueva versión:

$npm install gulp@3.9.1 —save-dev

Package Current Wanted Latest Location gulp 2.7.0 2.7.0 3.9.1 php-sevilla-gulp

Gulp

GulpIntroducción

Una herramienta que nos permite automatizar tareas comunes de desarrollo a través del terminal y gracias su gran cantidad de plugins nos permiten realizar multitud de tareas como:• Unir y mitificar archivos CSS / JavaScript • Procesa los archivos CSS, que utilicen preprocesadores como Sass, Less

u otros.• Reduce el tamaño de las imágenes• http://gulpjs.com/plugins/

GulpIntroducción

GulpInstalación

Instalación global

$ sudo npm install —global gulp

Instalación como dependencia

$ npm install —save-dev gulp

GulpInstalación

Gulpgulpfile.js

En este archivo vamos a indicar cada una de las task a realizar.

El archivo gulpfile.js se tiene que crear en el directorio raíz del proyecto.

Gulpgulpfile.js

var gulp = require('gulp');

gulp.task('default', function(){ console.log("Hola PHP Sevilla"); });

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function(){ console.log("Hola PHP Sevilla"); });

gulpfile.js

➜ phpsevilla gulp [19:23:05] Using gulpfile ~/Sites/lab/phpsevilla/gulpfile.js [19:23:05] Starting 'default'... Hola PHP Sevilla [19:23:05] Finished 'default' after 92 μs ➜ phpsevilla

gulpfile.js

GulpSintaxis

En el archivo de configuración gulpfile.js tenemos que definir todos los plugins utilizados, incluido gulp.

var NombrePlugin1 = require(‘nombrePlugin1’);var NombrePluginN = require(‘nombrePluginN’);

Gulpvar gulp = require(‘gulp’);

Las tareas se definen llamando al método .task().

Como primer parámetro se le pasa el nombre de la tarea, y como se fundo se define una función anónima que contendrá la lógica del mismo.

gulp.task(‘nombreTarea’, function() { //tarea

});

Gulpgulp.task()

Por defecto, gulp tiene una tarea definida llama default.

Al ejecutar en la terminal el comando gulp es la tarea que se ejecuta.

gulp.task('default', ['styles', 'fonts', 'images', ‘scripts’]);Al ejecutar el comando gulp: Se ejecuta la tarea default, que llama a las tareas incluidas en el array

Gulpgulp.task()

El método src() es el encargado de especificar la localización de los ficheros/assets existentes.

gulp.src(‘assets/js/*.js’);Todos los archivos con extensión .js dentro del directorio assets/js

Gulpgulp.src()

El método src() es el encargado de especificar la localización de los ficheros/assets existentes.

gulp.src(‘assets/js/**/*.js’);Todos los archivos con extensión .js que estén dentro de assets/js/ o alguna carpeta que pueda contener js/. (Búsqueda recursiva por directorios)

Gulpgulp.src()

El método gulp.dest(), indica el directorio de destino.

gulp.dest(‘web/js’)

Gulpgulp.dest()

El método pipe, lo inicializa el método src(), y actúa como un tubo o canal, en el que se le van a uniendo funciones/plugins a desempeñar.

gulp.src(‘files’).pipe(‘acción1’).pipe(‘acciónN’).pipe(gulp.dest(‘web/js’))

.pipe()Gulp

Proporciona la utilidad de comprobar automáticamente cambios en un recurso especificado.

No tenemos que estar continuamente escribiendo el comando gulp para procesar cambios. Abrimos un segundo proceso en la consola con: gulp watch

gulp.task(‘watch', function(){ return gulp.watch(‘ficheros’, [‘styles’, ‘js’])});

Gulpgulp.watch()

GulpSintaxis• Ejemplo gráfico de task()

gulp.task(‘mario’, function( ) {

});

gulp.task(‘mario’, function( ) {gulp.src(‘asset/*.scss’)

});

gulp.task(‘mario’, function( ) {gulp.src(‘asset/*.scss’)

.pipe(‘pluginProcesarSass’())

});

gulp.task(‘mario’, function( ) {gulp.src(‘asset/*.scss’)

.pipe(‘pluginProcesarSass’()).pipe(‘pluginMinificar’())

});

gulp.task(‘mario’, function( ) {gulp.src(‘asset/*.scss’)

.pipe(‘pluginProcesarSass’()).pipe(‘pluginMinificar’()).pipe(gulp.dest(‘web/css’));

});

GulpSintaxis• Ejemplo procesando archivos sass y minificado del archivo css

gulpfile.js

var gulp = require('gulp'); var sass = require('gulp-sass'); var cleanCSS = require('gulp-clean-css');

gulp.task('styles', function () { gulp.src('app/assets/sass/*.scss') .pipe(sass()) .pipe(cleanCSS()) .pipe(gulp.dest('web/css')); });

gulp.task('default', ['styles']);

GulpPlugins básicos

gulp-util: Permite añadir un poco de lógica a gulp, incluir mensajes logs mejorados con colores etc. https://github.com/gulpjs/gulp-util

GulpPlugins básicos

npm install —save-dev gulp-util#gulpfile.js

var uglify = require('gulp-util'); gulp.task('status', function() { gutil.log(gutil.colors.yellow('Gulp en modo' + gutil.env.prod ? ' producción' : ' desarrollo')); gutil.log(gutil.colors.blue('Para activar Gulp en producción: gulp --prod')); });

gulp-uglifyjs: Crea un archivo JavaScript a partir de varios y lo minifica https://www.npmjs.com/package/gulp-uglifyjs

GulpPlugins básicos

npm install —save-dev gulp-uglifyjs#gulpfile.js

var uglify = require('gulp-uglifyjs'); gulp.task('uglify', function() { gulp.src('public/js/*.js') .pipe(uglify()) .pipe(gulp.dest('dist/js')) });

gulp-sass: Procesa archivos sass a css. https://www.npmjs.com/package/gulp-sass

GulpPlugins básicos

npm install —save-dev gulp-sass#gulpfile.js

var uglify = require('gulp-uglifyjs'); gulp.task('styles', function() { gulp.src('assets/css/*.scss') .pipe(sass()) .pipe(gulp.dest('web/css')) });

gulp-sass: Procesa archivos sass a css. https://www.npmjs.com/package/gulp-sass

GulpPlugins básicos

npm install —save-dev gulp-sass#gulpfile.js

var uglify = require('gulp-uglifyjs'); gulp.task('styles', function() { gulp.src('assets/css/*.scss') .pipe(sass()) .pipe(gulp.dest('web/css')) });

gulp-clean-css: Minifica archivos csshttps://www.npmjs.com/package/gulp-clean-css

GulpPlugins básicos

npm install —save-dev gulp-clean-css#gulpfile.js

var cleanCSS = require(‘gulp-clean-css'); gulp.task('styles', function() { gulp.src('assets/css/*.scss') .pipe(sass()) .pipe(cleanCSS()) .pipe(gulp.dest('web/css')) });

gulp-sourcemaps: Permite poder ver desde el inspector de código del navegador, el archivo original donde se encuentra el código.https://www.npmjs.com/package/gulp-sourcemaps

GulpPlugins básicos

npm install —save-dev gulp-sourcemaps#gulpfile.js var sourcemaps = require(‘gulp-clean-css’);

gulp.task('styles', function() { gulp.src(‘assets/css/*.scss') .pipe(sourcemaps.init())

.pipe(sass()) .pipe(cleanCSS()) .pipe(sourcemaps.write())

.pipe(gulp.dest('web/css')) });

Assets en Symfony

Desde la versión 2.8, Symfony no incluye por defecto AsseticBundle, aunque podemos seguir utilizándolo instalándonos en bundle

http://symfony.com/doc/current/assetic/asset_management.html

Assets SymfonyAdios a assetic

En Symfony ubicamos nuestros assets en los directorios Resources/public de los bundles o en app/

En el libro de buenas prácticas de Symfony, recomienda almacenar todos los assets en el directorio público web/

Assets SymfonyUbicando nuestros assets

Para no guardar los assets originales en la carpeta publica, los guardamos en app/Resources/assets y a través Gulp (u otras herramientas) se procesan y generan los assets dentro de la carpeta /web

Assets SymfonyUbicando nuestros assets

Assets SymfonyEstructura de un proyectoapp

Resources    assets    public    views

[ . . .] composer.json composer.lock node_modules package.json gulpfile.js src vendor web

Assets SymfonyEstructura de un proyectoapp

Resources    assets       img       js       sass

[ . . .] composer.json composer.lock node_modules package.json gulpfile.js src vendor web

Assets originales

Assets SymfonyEstructura de un proyectoapp

Resources    assets    public    views

[ . . .] composer.json composer.lock node_modules package.json gulpfile.js src vendor web

Gestión de dependencias Frontend

Assets SymfonyEstructura de un proyectoapp

Resources    assets    public    views

[ . . .] composer.json composer.lock node_modules package.json gulpfile.js src vendor web

Gestión de dependencias Frontend Dependencias Frontend

Assets SymfonyEstructura de un proyectoapp

Resources    assets    public    views

[ . . .] composer.json composer.lock node_modules package.json gulpfile.js src vendor web

Configuración Gulp

Assets SymfonyEstructura de un proyectoapp

Resources    assets    public    views

[ . . .] composer.json composer.lock node_modules package.json gulpfile.js src vendor web Assets públicos

¡Usas Git!

.gitignoreRecuerda no incluir:node_modules/web/assets

Ejemplo prácticoSymfony + Gulp

https://github.com/JuanLuisGarciaBorrego/symfony-pack

Gracias@JuanluGarciaBblog.juanluisgarciaborrego.com

FeedBack:

juanluisgarciaborrego@gmail.com