Hoy me tocó trabajar sobre esto, ya que tengo una serie de ficheros javascript que debo minificar, y en Grunt debo listarlos tanto para minificarlos como para observar cambios en ellos y ejecutar la tarea de minificación.
La resolución es bastante sencilla, pero vale la pena dejarlo apuntado.
Tarea a realizar
Debo minificar los archivos file.js y file2.js usando Grunt. También hay que tener en cuenta que debemos observar estos ficheros constantemente y detectar cualquier cambio en los mismos para automatizar la minificación.
Las herramientas que necesitamos son: GruntJS y los plugins de Uglify y Watch. Damos por hecho de que sabemos cómo instalar Grunt y plugins para su uso.
Estructura de ficheros inicial
Una posible aproximación es la siguiente, totalmente funcional (recordemos que esto es un ejemplo):
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
minify: {
files: {
'output.js': '['file.js','file2.js']'
}
}
},
watch: {
scripts: {
files: ['file.js','file2.js'],
tasks: ['uglify']
}
}
});
};La solución parece bastante apropiada, pero en caso de que aparezcan más archivos a minificar. O simplemente que sea una carpeta entera la que haya que modificar, entonces tendremos que ir a los dos sitios a modificar el mismo contenido. Si sumamos que pueden aparecer otros plugins de Grunt tales como JSHINT, deberíamos replicar esto tantas veces como lo usemos.
Esta aproximación no es la mejor de todas, lo ideal es separar el listado de ficheros en otra variable para no crear dependencia hacía ellos.
Estructura de ficheros apropiada
Separando los archivos dentro de una variable podemos obtener un mejor resultado, como el siguiente:
module.exports = function(grunt) {
var filesToMinify = ['file.js','file2.js']; grunt.initConfig({
filesToMinify: filesToMinify,
uglify: {
minify: {
files: {
'output.js': <%= filesToMinify %>
}
}
},
watch: {
scripts: {
files: <%= filesToMinify %>,
tasks: ['uglify']
}
}
});
};
Tan simple como separar los arrays en una variable.
Ahora tan solo con escribir grunt uglify o grunt watch en la consola podemos tener nuestros ficheros minificados y alerta por si deben sufrir nuevas minificaciones.
Conclusiones
Lo que hemos hecho es bastante sencillo pero es muy útil para seguir con buenas prácticas y saber que Grunt es una herramienta muy potente para automatizar nuestras tareas.