Cómo utilizar Grunt para automatizar su flujo de trabajo [Tutoriales]

Soy un gran defensor de la automatización Porque hace la vida mucho más simple. ¿Por qué dedicar tiempo a tareas monótonas y monótonas que le quitan fuerza a la vida cuando tiene una computadora para hacer cosas por usted? Esto es especialmente cierto para el desarrollo web..

Muchas tareas de desarrollo pueden ser una tarea. Mientras desarrolla, es posible que desee compilar código, al presionar una versión de desarrollo puede concatenar y minimizar archivos, eliminar recursos de solo desarrollo, etc. Incluso los relativamente sencillos, como eliminar un montón de archivos o cambiar el nombre de las carpetas puede tomar una gran parte de nuestro tiempo.

En este artículo, le mostraré cómo puede hacer su vida más fácil aprovechando la excelente funcionalidad que ofrece Grunt, un corredor de tareas de Javascript. Te guiaré a través de todo el proceso para que no te preocupes, incluso si no eres un asistente de Javascript!

Más en Hongkiat.com:

• CSSMatic hace CSS fácil para los diseñadores web
• Automatizar tareas en Mac con acciones de carpeta
• Automatiza tus archivos de Dropbox con acciones
• 10 aplicaciones para ayudar a automatizar tareas en tu dispositivo Android
• Cómo hacer una copia de seguridad (automáticamente) de su sitio web en Dropbox

Instalando Grunt

Instalar Grunt es bastante fácil porque usa el administrador de paquetes de nodos. Esto significa que es posible que también tenga que instalar Node. Abra un terminal o un indicador de comando (a partir de ahora llamaré a este terminal) e ingrese nmp -v.

Si ves un número de versión tienes npm instalado, si ve un error de "comando no encontrado", tendrá que instalarlo yendo a la página de descargas de nodos y seleccionando la versión que necesita.

Una vez que Node está instalado, obtener Grunt es una cuestión de un solo comando emitido en el terminal:

npm instalar -g grunt-cli

Uso básico

Utilizará Grunt en una base de proyecto a proyecto ya que cada proyecto tendrá requisitos diferentes. Comencemos un proyecto ahora creando una carpeta y navegando a través de nuestro terminal también.

Dos archivos conforman el corazón de Grunt: paquete.json y Gruntfile.js. El archivo del paquete define todas las dependencias de terceros que utilizará su automatización, el archivo Gruntfile le permite controlar cómo exactamente estos se utilizan. Vamos a crear un archivo de paquete básico ahora con el siguiente contenido:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

El nombre y la versión depende de usted, las dependencias deben contener todos los paquetes que está utilizando. No estamos haciendo nada en este momento, así que solo nos aseguraremos de que Grunt se agregue como una dependencia.

Es posible que se esté preguntando qué hace allí esa línea ondulada (~) llamada tilde..

Se pueden requerir versiones usando las reglas del versionador semántico para npm. En una palabra:

• Usted especifica una versión exacta como 4.5.2
• Puede utilizar mayor que / menor que para indicar la versión mínima o máxima, como > 4.0.3
• Usando la tilde se especifica un bloque de versión. Utilizando ~ 1.2 se considera que es 1.2.x, cualquier versión por encima de 1.2.0 pero por debajo de 1.3

Hay muchas más formas de especificar versiones disponibles, pero esto es suficiente para la mayoría de las necesidades. El siguiente paso es crear un Gruntfile que realizará nuestras automatizaciones..

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('predeterminado', []); ; 

Este es básicamente el esqueleto de un Gruntfile; Hay dos lugares de interés. Una ubicación está dentro de la initConfig () función. Aquí es donde va toda la configuración de su proyecto. Esto incluirá cosas como manejar la compilación LESS / SASS, la reducción de scripts, etc..

La segunda ubicación se encuentra debajo de esa función donde se especifican las tareas. Puedes ver una tarea especificada con nombre “defecto”. Está vacío en este momento, así que no hace nada, pero lo ampliaremos más adelante.. Las tareas esencialmente ponen en cola los bits y piezas de nuestra configuración de proyecto y los ejecutan.

Por ejemplo, una tarea llamada “guiones” puede concatenar todos nuestros scripts, luego minimizar el archivo resultante y luego moverlo a su ubicación final. Estas tres acciones están todas definidas en la configuración del proyecto pero son “juntados” por la tarea. Si esto no está claro todavía, no te preocupes, te mostraré cómo se hace esto..

Nuestra primera tarea

Vamos a crear una tarea que minimice un solo archivo javascript para nosotros.

Hay cuatro cosas que debemos hacer cada vez que deseamos agregar una nueva tarea:

• Instalar un complemento si es necesario
• Requerirlo en el Gruntfile
• Escribe una tarea
• Agregarlo a un grupo de tareas si es necesario

(1) Buscar e instalar el complemento

La forma más fácil de encontrar el complemento que necesita es escribir algo como esto en Google: “minify javascript grunt plugin”. El primer resultado debería llevarlo al complemento grunt-contrib-uglify que es justo lo que necesitamos.

La página de Github te dice todo lo que necesitas saber. La instalación es una sola línea en el terminal, esto es lo que necesita usar:

 npm install grunt-contrib-uglify --save-dev 

Puede que necesite ejecutar esto con privilegios de administrador. Si consigues algo como npm ERR! Por favor, intente ejecutar este comando nuevamente como root / Administrator. en el camino, simplemente escriba sudo antes del comando e ingrese su contraseña cuando se le solicite:

 sudo npm install grunt-contrib-uglify --save-dev 

Este comando realmente analiza tu paquete.json archivo y lo agrega como una dependencia allí, no tendrá que hacerlo manualmente.

(2) Requerido en Gruntfile

El siguiente paso es agregar su Gruntfile como un requisito. Me gusta agregar complementos en la parte superior del archivo, aquí está mi Gruntfile completo después de agregar grunt.loadNpmTasks ('grunt-contrib-uglify');.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('predeterminado', []); ; 

(3) Crear una tarea para minimizar scripts.

Como discutimos, esto debería hacerse dentro de la initConfig () función. La página de Github para el complemento (y la mayoría de los demás complementos) le brinda mucha información y ejemplos. Esto es lo que usé en mi proyecto de prueba.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js' 

Esto es bastante sencillo, especifiqué el scripts.js archivo en el directorio js de mi proyecto y el destino del archivo minimizado. Hay muchas maneras de especificar los archivos de origen, veremos eso más adelante.

Por ahora, echemos un vistazo al Gruntfile completo después de que se haya agregado, para asegurarnos de saber cómo encajan las cosas.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('predeterminado', []); ; 

(4) Agregar esta configuración a un grupo de tareas

Ahora mismo podrías ir a tu terminal y teclear gruñido uglify pero necesitaremos grupos de tareas para ejecutar varias tareas más adelante. Tenemos la tarea predeterminada vacía, solo esperando que se agregue algo, así que vamos a modificarlo a lo siguiente:

 grunt.registerTask ('predeterminado', ['uglify']); 

En esta etapa deberías poder ir a la terminal, escribe gruñido Y ver que la minificación tenga lugar. No te olvides de crear un scripts.js archivo por supuesto!

Eso no tomó mucho tiempo para configurar, ¿verdad? Incluso si eres nuevo en todo esto y te llevó algún tiempo trabajar con los pasos, el tiempo que ahorra superará el tiempo empleado en unos pocos usos..

Concatenando archivos

Echemos un vistazo a los archivos de concatenación y aprender a especificar varios archivos como destino en el camino.

La concatenación es el proceso de combinar el contenido de varios archivos en un solo archivo. Necesitaremos el complemento grunt-contrib-concat. Vamos a trabajar a través de los pasos:

Para instalar el plugin de uso. npm instala grunt-contrib-concat --save-dev en la terminal Una vez hecho esto, asegúrese de agregarlo a su archivo Gruntfile como antes de usar grunt.loadNpmTasks ('grunt-contrib-concat');.

Lo siguiente es la configuración. Combinemos tres archivos específicos, la sintaxis será familiar..

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', , 

El código anterior toma los tres archivos dados como origen y los combina en el archivo dado como destino.

Esto ya es bastante poderoso, pero ¿qué pasa si se agrega un nuevo archivo? ¿Necesitamos volver aquí todo el tiempo? Por supuesto que no, podemos especificar una carpeta completa de archivos para concatenar.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,, 

Ahora, cualquier archivo javascript dentro de la carpeta dev / js se fusionará en un archivo grande: js / scripts.js, mucho mejor!

Ahora es el momento de crear una tarea para que podamos concatenar algunos archivos.

 grunt.registerTask ('mergejs', ['concat']); 

Esta ya no es la tarea predeterminada, por lo que tendremos que escribir su nombre en el terminal cuando emitamos el gruñido mando.

 gruñido mergejs 

Automatizando nuestra automatización

Ya hemos avanzado mucho, pero hay más! Por ahora, cuando desee concatenar o minimizar, debe ir al terminal y escribir el comando apropiado. Ya es hora de que echemos un vistazo a la reloj Comando que hará esto por nosotros. También aprenderemos cómo ejecutar múltiples tareas a la vez, en el camino.

Para seguir adelante, necesitamos agarrar el reloj gru-contrib-contrib. Estoy seguro de que ya puedes instalarlo y agregarlo a Gruntfile en tu cuenta, así que comenzaré mostrándote lo que uso en mi proyecto de prueba.

 watch: scripts: files: ['dev / js / *. js'], tareas: ['concat', 'uglify'],, 

Nombré un conjunto de archivos para ver “guiones”, solo para que se lo que hace Dentro de este objeto he especificado archivos para ver y tareas para ejecutar. En el ejemplo de concatenación anterior, reunimos todos los archivos en el directorio dev / js.

En el ejemplo de minificación hemos reducido este archivo. Tiene sentido ver los cambios en la carpeta dev / js y ejecutar estas tareas siempre que haya.

Como puede ver, se pueden llamar fácilmente a varias tareas separándolas con comas. Se realizarán en secuencia, primero la concatenación, luego la minificación en este caso. Esto también se puede hacer con grupos de tareas, que es la clase de por qué existen.

Ahora podemos modificar nuestra tarea por defecto:

 grunt.registerTask ('default', ['concat', 'uglify']); 

Ahora tenemos dos opciones. Cuando quiera concatenar y minimizar sus scripts, puede cambiar al terminal y escribir gruñido. También puede utilizar el comando watch para iniciar la visualización de sus archivos: reloj gruñido.

Se sentará allí, esperando que modifiques estos archivos. Una vez que lo haga, realizará todas las tareas asignadas a él, adelante, pruébelo..

Eso es mucho mejor, no se necesita entrada de nosotros. Ahora puedes trabajar con tus archivos y todo estará bien hecho para ti.

Visión general

Con ese conocimiento rudimentario de cómo se pueden instalar y usar los complementos y cómo funciona el comando de vigilancia, todo está listo para convertirse en un adicto a la automatización. En Grunt hay mucho más de lo que hablamos, pero nada que no pudieras manejar por tu cuenta..

El uso de comandos para compilar SASS, la optimización de imágenes, la reparación automática y más es solo una cuestión de seguir los pasos que analizamos y de leer la sintaxis que requiere el complemento..

Si conoce algunos usos particularmente buenos para Grunt, háganoslo saber en los comentarios, siempre estamos interesados ​​en saber cómo usa herramientas como Grunt.!