Concatenar y optimizar css y js con Gulp

El uso de herramientas como Gulp está cada vez más extendido, Gulp es una herramienta para la gestión y automatización de tareas que nos permite entre otras cosas compilar, minificar y concatenar código css y js a diferencia Grunt, Gulp usa streams para la ejecución de tareas y pipes(tuberías) para operar sobre ellas, Gulp está escrito con Javascript y funciona sobre nodejs. Para utilizar esta potente herramienta necesitamos tener instalado nodejs, npm y gulp en nuestro PC.

Workflow

Vamos a crear un pequeño ejemplo, será nuestro primer Workflow ( flujo de trabajo ), por lo que vamos a hacer algo muy básico que podamos entender y ampliar más adelante, en primer lugar crearemos el archivo package.json, dentro de este archivo se definen y manejan características como el nombre de tu proyecto, versión, dependencias, repositorio, autores y la licencia, para este ejemplo básico registraremos gulp, gulp-concat, gulp-minify-css y gulp-uglify.

package.json

{
  "name": "didesweb",
  "version": "1.0.0",
  "description": "gulp concat and minify",
  "main": "w3.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Roque Arnas",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.0"
  },
  "engines": {
    "node": ">= 4.5"
  }
}

A continuación crearemos el archivo gulpfile.js que será el encargado de ejecutar las tareas js que especificaremos en el, la carpeta contenedora de los archivos css y js será la carpeta assets y la carpeta de destino será app.

gulpfile.js

/* Basic gulp concat and minify didesweb.com */
var gulp  = require('gulp'),
concat    = require('gulp-concat'),
uglify    = require('gulp-uglify'),
minifycss = require('gulp-minify-css');
gulp.task('optimiza', ['minify-js', 'minify-css']);
gulp.task('minify-js', function () {
  gulp.src('assets/*.js')
  .pipe(concat('application.js'))
  .pipe(uglify())
  .pipe(gulp.dest('app/'))
});
gulp.task('minify-css', function () {
  gulp.src('assets/*.css')
  .pipe(concat('application.css'))
  .pipe(minifycss())
  .pipe(gulp.dest('app/'))
});

Para terminar solo nos falta crear el index.html, la carpeta assets y los archivos html, css y js dentro de esta.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ejemplo básico de gulp concat y minify por didesweb.com</title>
	<link rel="stylesheet" href="app/styles.css">
	<script src="app/scripts.js"></script>
</head>
<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas provident animi ad alias necessitatibus, quia dolore eius repellendus molestias ducimus amet similique incidunt modi placeat deserunt deleniti illo. Placeat, nulla!</p>
	<p id="demo1"></p>
	<p id="demo2"></p>
	<button type="button" onclick="myFunctiona()">Probar JS</button>
	<button type="button" onclick="myFunctionb()">Probar JS</button>
</body>
</html>

estilos.css

body {
	margin:0;
	padding:0;
}

extras.css

p {
	color:red;
}

funciones.js

function myFunctiona() {
    document.getElementById("demo1").innerHTML = "Paragraph changed.";
}

scripts.js

function myFunctionb() {
    document.getElementById("demo2").innerHTML = "Paragraph changed.";
}

Por último ejecutamos en la carpeta raíz con la terminal npm install.

Una vez se ha creado la carpeta node_modules ejecutamos de nuevo con la terminal gulp optimiza, se creará la carpeta app de forma automática con los archivos css y js compilados.

Puedes descargar el repositorio en mi cuenta de Github

Concatenar y optimizar css y js con Gulp

Cancelar la respuesta

Quizás te interese