Maqueta más rápido utilizando GulpJS y PHP2HTML

Una de las tareas que más tediosas a la hora de maquetar un template estático son los componentes repetitivos de un sitio, un ejemplo es el header o el footer que por lo general mantienen su diseño, es decir que en las páginas internas de nuestro sitio siempre se ven igual.

Esto es por que cuando deseamos hacer un cambio tenemos que replicar ese cambio en todas las páginas en las que se encuentran estos componentes, esto se puede resolver fácilmente utilizando alguna función include con PHP pero entonces no tendíamos un documento HTML, esto significa que sin un servidor local no nadie podría visualizar nuestra maqueta y para convertir el PHP a HTML estaríamos ante el mismo problema del principio. GulpJS utilizando la dependencia php2html nos puede ayudar a resolver este problema siguiendo estos pasos.

Gulp.js es un build system(sistema de construcción) que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más como la de convertir PHP en HTML.

Además utilizaremos Sass para escribir nuestro css de forma más ordenada y estructurada.

Antes de empezar primero tenemos que instalar GulpJS de forma global en nuestro equipo, crear una carpeta para nuestro proyecto con el archivo Gulpfile.js y la estructura descrita en el siguiente recuadro.

proyecto

│ Gulpfile.js

│ package.json

│

└───assets

│ └───css

│ └───fonts

│ └───images

│ └───js

│ └───scss

│ │└───partials

│ │ │ style.scss

└───src

│ └───partials

│

También necesitaremos crear nuestro archivo package.json

Este archivo se utiliza para dar información a npm que le permite identificar el proyecto, así como manejar las dependencias del proyecto. También puede contener otros metadatos, como la descripción del proyecto, la versión del proyecto en una distribución particular, información de licencia, incluso datos de configuración, todo lo cual puede ser vital tanto para npm como para los usuarios finales del paquete.

El archivo package.json normalmente se encuentra en el directorio raíz de un proyecto Node.js.

En este caso nuestras dependencias serán

{
  "name": "Nombre del proyecto",
  "version": "0.1",
  "description": "Descripción del proyecto",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Test\" && exit 1"
  },
  "author": "@jarc100",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.14.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cssmin": "^0.1.7",
    "gulp-php2html": "^0.3.2",
    "gulp-sass": "^2.3.2"
  }
}

Gulpfile.js

var gulp = require('gulp'),

sass = require('gulp-sass');

php2html = require("gulp-php2html");

cssmin = require('gulp-cssmin');

rename = require('gulp-rename');

autoprefixer = require('gulp-autoprefixer');

browserSync = require('browser-sync').create();

rsync = require('gulp-rsync');
// Static Server + watching scss/html files

gulp.task('serve', ['sass'], function() {
browserSync.init({

proxy: "http://localhost/mi-proyecto/"

});
gulp.watch("assets/scss/*.scss", ['sass']);

gulp.watch("*.css").on('change', browserSync.reload);

gulp.watch("*.html").on('change', browserSync.reload);

});
gulp.task('php2html', function() {
gulp.src("src/*.php")

.pipe(php2html())

.pipe(gulp.dest("./"));
});
gulp.task('sass', function () {

return gulp.src('assets/scss/**/*.scss')

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('./assets/css'))

.pipe(browserSync.stream());

});
gulp.task('autoprefixer', ['sass'], function() {

return gulp.src('assets/css/*.css')

.pipe(autoprefixer({

browsers: ['last 2 versions','ie 8','ie 9','android 2.3','android 4','opera 12'],

cascade: false

}))

.pipe(gulp.dest('assets/css/'))

});
gulp.task('cssmin', function() {

return gulp.src('assets/css/*.css')

.pipe(cssmin())

.pipe(rename({suffix: '.min'}))

.pipe(gulp.dest(''));

});
// configure which files to watch and what tasks to use on file changes

gulp.task('watch', function() {

gulp.watch('src/**/*.php', ['php2html']);

gulp.watch('assets/scss/**/*.scss', ['sass']);

gulp.watch('assets/css/*.css', ['autoprefixer']);

gulp.watch('assets/css/*.css', ['cssmin']);

});
// define the default task and add the watch task to it

gulp.task('default', ['watch','serve']);