Cuando creamos nuevos proyectos, más aún si éstos son grandes, nos juntamos con cantidades indecentes de archivos js y css que debemos cargar en cada página.
En este tutorial vamos a ver cómo podemos utilizar gulp, un gestor de tareas para poder crear dos, una para que junte todos los js en un único archivo y los minifique, y otra para que haga lo mismo con los css.
De esta forma, en lugar de cargar 10 css y 10 js en cada página, cargaremos 1 de cada, con lo cuál la aplicación seguro que será más rápida.
Si te interesa saber más sobre gulp, aquí tienes una entrada sobre livereload.
Lo primero que debemos hacer es crear un proyecto sin nada más, una carpeta css y otra js, dentro de la css creados dos archivos, primer.css y segundo.css, lo mismo con los js y añadimos el siguiente código de ejemplo para cada uno.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/*primer css*/ .line { fill: none; stroke: #cc3d33; stroke-width: 1.5px; } .area { fill: rgba(204, 61, 51, 0.5); stroke: rgba(204, 61, 51, 0.5); stroke-width: 1.5px; } .overlay { fill: none; pointer-events: all; } .focus circle { fill: none; stroke: #cc3d33; } /*segundo css*/ .axis path, .axis line { fill: none; stroke: #5A5A5A; shape-rendering: crispEdges; } .x.axis path, .y.axis path { display: none; } .tick { fill: #5A5A5A; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//primer js var app = angular.module("app", []); app.controller('MainCtrl', function ($scope) { $scope.elements = [ { "a":1, "b":2 }, { "a":3, "b":4 }, { "a":5, "b":6 }, { "a":7, "b":8 } ] $scope.suma = function(a,b) { return a+b; } }); //segundo js $scope.pruebas = function() { console.log("pruebas"); } |
Ahora que ya tenemos los cuatro archivos para el ejemplo, debemos instalar todo lo necesario para utilizar gulp y sus plugins, así que ejecuta los siguientes comandos uno por uno en la terminal situado en el proyecto (necesitas tener instalado nodejs).
|
1 2 3 4 5 6 7 |
npm install gulp -g npm install --save gulp npm install --save gulp-concat-css npm install --save gulp-minify-css npm install --save npm install gulp-concat npm install --save gulp-notify npm install --save gulp-uglify |
Instalamos gulp de forma local y global, lo mismo con uglify el cuál nos minificará el js, gulp-concat-css y gulp-concat nos ayudarán para concatenar varios archivos en uno, notify será el encargado de mostrarnos un mensaje una vez nuestra task haya finalizado.
Para utilizar gulp sólo es necesario crear un archivo en la raíz del proyecto llamado Gulpfile.js, crea el archivo y añade el siguiente código.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var gulp = require('gulp'), minifyCSS = require('gulp-minify-css'), concatCss = require('gulp-concat-css'), concatJs = require('gulp-concat'), notify = require('gulp-notify'), uglify = require('gulp-uglify'); gulp.task('css', function () { gulp.src('css/*.css') .pipe(concatCss("css/todo.css")) .pipe(minifyCSS({keepBreaks:false})) .pipe(gulp.dest('out/css')) .pipe(notify("Ha finalizado la task css!")); }); gulp.task('js', function() { gulp.src('js/*.js') .pipe(concatJs('concat.js')) .pipe(uglify()) .pipe(gulp.dest('out/js')) .pipe(notify("Ha finalizado la task js!")); }); |
Cargamos todos los módulos que hemos descargado y creamos la configuración necesaria.
Creamos las tareas css y js, al método src de la task css le pasamos la ruta de nuestros archivos, en el primer caso le decimos que dentro de css busque cualquier archivo css, si por ejemplo, nuestros archivos estuviesen en otras carpetas, podríamos hacer algo así, css/**/*.css, dentro de css/cualquier carpeta/todos los css, y lo mismo con la tarea js.
Si nuestras rutas son más complejas también tenemos la opción de pasar un array con la ruta completa de cada archivo, así que tenemos opciones.
Finalmente concatenamos, minificamos y le decimos donde queremos que lo guarde, si ahora abrimos la terminal y ejecutamos los siguientes comandos uno por uno, nuestros archivos serán creados.
|
1 2 |
gulp css gulp js |
Uno dentro de out/css y otro dentro de out/js, si los abrimos veremos que tienen el siguiente aspecto.
|
1 |
.line{fill:none;stroke:#cc3d33;stroke-width:1.5px}.area{fill:rgba(204,61,51,.5);stroke:rgba(204,61,51,.5);stroke-width:1.5px}.overlay{fill:none;pointer-events:all}.focus circle{fill:none;stroke:#cc3d33}.axis line,.axis path{fill:none;stroke:#5A5A5A;shape-rendering:crispEdges}.x.axis path,.y.axis path{display:none}.tick{fill:#5A5A5A} |
|
1 |
var app=angular.module("app",[]);app.controller("MainCtrl",function(e){e.tareas=["Item1","Item2","Item3","Item4"],e.nombre="Vicente",e.addTarea=function(){e.tareas.push(e.tarea),e.tarea="",e.nombre=""},e.eliminarTarea=function(a){e.tareas.splice(a,1)},e.elements=[{a:1,b:2},{a:3,b:4},{a:5,b:6},{a:7,b:8}],e.suma=function(e,a){return e+a}});var gulp=require("gulp"),minifyCSS=require("gulp-minify-css"),concatCss=require("gulp-concat-css"),concatJs=require("gulp-concat"),uglify=require("gulp-uglify");gulp.task("css",function(){gulp.src("css/*.css").pipe(concatCss("css/todo.css")).pipe(minifyCSS({keepBreaks:!1})).pipe(gulp.dest("out/"))}),gulp.task("js",function(){gulp.src("js/*.js").pipe(concatJs("concat.js")).pipe(uglify()).pipe(gulp.dest("out/js"))}); |
Espero que te haya gustado, y, si no lo conocías ya tienes una herramienta más para añadir a las que ya tenías.
Saludos.
