23/01/2023 gulp 4m 52s 0 2391
En el tutorial Workflow con Gulp, Sass, Browser-sync y Uglify vimos como automatizar los procesos de cambio en los archivos de forma ágil y...
Concatenar y optimizar css y js con Gulp
19 de /marzo03 de /2018
3m 44s
gulp
0 comentarios
3380
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 ...
1/11/2019 gulp 5m 29s 0 2469
En el tutorial Automatiza tu Workflow con Browser-Sync vimos como automatizar los procesos de cambio en los archivos de forma secilla y ágil,...
16/03/2019 gulp 3m 56s 0 2838
Uno de las tareas mas tediosas para un programador es tener que volver a cargar el navegador cada vez que realiza algún cambio en los archivos...
Valoraciones
Sé el primero en valorar