Saltar al contenido principal

Concatenar y optimizar css y js con Gulp

Inicio / gulp / 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

 

Quizás te interese …

 

Tutorial de Bower

Tutorial de introducción al formato JSON

Integrar Animate css como dependencia de Bower

Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continúas navegando entendemos que das tu consentimiento y aceptas nuestra Política de cookies. Pulsa en Aceptar para dejar de ver este mensaje

ACEPTAR
Aviso de cookies