Share
Si está trabajando en un proyecto grande, sin duda tendrá un script de compilación o un montón de scripts de tareas para ayudar con algunas de las partes repetitivas del proceso. Puede usar Ant o Rake, dependiendo del idioma en el que esté escrito el proyecto.
Pero, ¿qué usas si el proyecto es principalmente JavaScript? Ese es el problema que Ben Alman se propuso resolver cuando creó a Grunt..
¿Qué es exactamente Grunt? Bueno, el README en Github dice
Grunt es una herramienta de construcción de línea de comandos basada en tareas para proyectos JavaScript.
Aquí está la idea: cuando trabaje en un proyecto de JavaScript, hay un montón de cosas que querrá hacer regularmente. ¿Como que, te preguntas? Bueno, como concatenar archivos dados, ejecutar JSHint en su código, ejecutar pruebas o minimizar sus scripts. Si está pegando su JavaScript en JSHint en línea, probablemente se dé cuenta de que hay una mejor manera de hacerlo; incluso si estás usando gato para concatenar archivos o un minificador de línea de comandos, sería bueno tener un conjunto de comandos único y unificado para todas esas tareas adicionales, que funcionó para cada proyecto de JavaScript, ¿verdad??
Eso es lo que Grunt pretende ser. Tiene un montón de tareas integradas que lo llevarán bastante lejos, con la capacidad de crear sus propios complementos y scripts que amplían la funcionalidad básica..
Para obtener más información sobre la introducción de Grunt, vea la publicación de Ben en su blog personal y el blog Bocoup.
Grunt se basa en Node.js y está disponible como un paquete a través del administrador de paquetes Node (npm). Querrás instalarlo globalmente, así que usa este comando:
npm instalar -g gruñido
Notarás que instala bastantes dependencias; Hay otros paquetes npm que utiliza Grunt. Una vez hecho esto, estás listo para ir!
Como sabes, Grunt es una herramienta de línea de comandos; por lo tanto, asumiré que tiene una ventana de terminal abierta para el resto de este tutorial.
Comencemos creando un directorio de proyecto de muestra; No vamos a estar construyendo un proyecto aquí, pero veremos cómo funciona Grunt en este directorio. Una vez que esté dentro de ese directorio, ejecute el gruñido comando (según la documentación, si está en Windows, es posible que tenga que ejecutar grunt.cmd). Probablemente veas algo como esto:
No se puede encontrar el archivo de configuración 'grunt.js'. Necesitas alguna ayuda?
Antes de que realmente pueda aprovechar Grunt a su máximo potencial, necesitará un grunt.js Archivo en el directorio del proyecto. Afortunadamente, Grunt puede generar automáticamente un grunt.js archivo y algún otro material de esqueleto del proyecto con la en eso tarea, que se puede ejecutar sin una grunt.js archivo en su lugar. Pero inicio gruñido Aún no es suficiente para iniciar tu proyecto, como verás si lo ejecutas. Necesitas elegir un tipo de proyecto para generar. Corriendo inicio gruñido le dará una lista de tipos de proyectos para elegir:
Accentsconagua
jquery: Un plugin de jQuerynodo: Un módulo de nodocommonjs: Un módulo de CommonJSgruntplugin: Un plugin Gruntgruntfile: Un Gruntfile (grunt.js)Si su proyecto no coincide con ninguno de los primeros cuatro tipos de proyectos, puede usar el final: gruntfile: solo crea un básico grunt.js que puede completar. Entonces, intentémoslo con la plantilla de complemento jQuery. correr inicio ronco: jQuery en tu terminal.
Notarás una gran cantidad de salida inicial. Si se toma el tiempo para leer las notas de la plantilla, verá que tendremos que completar algunos valores, como el nombre del proyecto y el título del proyecto. De hecho, después de esa nota, verás algo como esto:
Responda lo siguiente: [?] Nombre del proyecto (jquery.demo)
Cuando inicie un proyecto, Grunt le hará una serie de preguntas para que pueda completar algunas opciones. Ese valor entre paréntesis? Esa es la sugerencia predeterminada, basada en el tipo de proyecto y el nombre del directorio del proyecto. Si desea cambiarlo, escriba el nombre de su propio proyecto al final de la línea y presione 'enter'; de lo contrario, simplemente presione 'enter' para usar el nombre predeterminado.
Sigue y completa el resto de los campos. Para un proyecto de plugin de jQuery, esto es lo que más necesitará para darle:
Muchos de estos tienen valores por defecto; Si desea utilizar el valor predeterminado, simplemente presione Intro para esa línea; para dejar el campo en blanco, simplemente puede escribir "ninguno". Una vez que haya revisado todas las opciones, verá que Grunt está creando algunos archivos básicos del proyecto. ¿Como que? Me gusta esto:
LICENCIA-GPL LICENCIA-MIT README.md grunt.js libs | - jquery | | - jquery.js | - qunit | - qunit.css | - qunit.js package.json src | - jquery.demo.js prueba | - jquery.demo.html | - jquery.demo_test. js
Como puede ver, esto nos da un buen comienzo: no solo tenemos nuestro archivo de complemento (src / jquery.demo.js), también tenemos pruebas de Qunit (test / jquery.demo_test.js). Y estos tampoco son archivos vacíos. Tienen un contenido inicial, con un plugin jQuery muy básico y pruebas de unidad. Continúa y revisa el contenido de estos archivos, verás lo que quiero decir..
Grunt hace más que configurar el proyecto por ti..
Por supuesto, Grunt hace más que configurar el proyecto por ti. Cabe destacar que nuestro proyecto ahora tiene grunt.js: un archivo de configuración específico del proyecto; Debido a las opciones que establece, ahora podemos utilizar otras tareas integradas de Grunt. Pronto lo abriremos y haremos algunos ajustes, pero por ahora ejecutemos algunas tareas.
Si tu corres gruñido sin opciones ahora, ejecutaremos la tarea predeterminada, si se ha establecido una. En el caso de un proyecto de complemento jQuery, eso es equivalente a ejecutar estos cuatro comandos:
pelusa ronca: comprueba tu JavaScript contra JSHintgruñido qunit: ejecuta tus pruebas de Qunitgruñido concat: concatena los archivos de su proyecto y pone el nuevo archivo en una dist carpetagruñido min: minimiza el archivo concat apagar.Debo anotar algo sobre las pruebas de Qunit aquí: las pruebas de Qunit están diseñadas para ejecutarse en el navegador de forma predeterminada; acaba de abrir tests / jquery.demo.html (o su equivalente) en el navegador. sin embargo, el gruñido qunit test quiere ejecutarlos en el terminal, lo que significa que necesita tener instalado PhantomJS. No es difícil: solo diríjase a phantomjs.org y descargue e instale la última versión. Si Grunt puede encontrar eso en su ruta, podrá ejecutar las pruebas Qunit desde la terminal.
Entonces corriendo gruñido debe dar salida a similar a esto:
Como puede ver, cada una de nuestras cuatro tareas se ha ejecutado. Si alguno de ellos fallara, el resto de las tareas se cancelarían (a menos que llame a Grunt con la --fuerza bandera).
Ya hemos obtenido una gran funcionalidad de Grunt, usándola tal como viene. Sin embargo, vamos a abrir eso grunt.js Archivo y hacer algunas configuraciones.
Dentro grunt.js, Verá que toda la configuración se realiza al pasar un objeto literal a grunt.initConfig (). Veamos algunas de las propiedades de nuestro objeto de configuración..
pkgEsta propiedad apunta a la paquete.json Archivo que Grunt creó en nuestro directorio de proyectos. Teniendo un paquete.json el archivo es parte de la especificación de paquetes de CommonJS; es un lugar único donde se pueden almacenar la mayoría de los metadatos sobre el proyecto (nombre, versión, página de inicio, enlace del repositorio ... muchos de los valores que configura al inicializar el proyecto). Sin embargo, este pkg La propiedad hace más que apuntar al archivo del paquete: observe la sintaxis: '. Esa es una de las directivas integradas de Grunt: en realidad carga el archivo JSON, por lo que Grunt (o usted) puede acceder a todas las propiedades en el archivo package.json desde el pkg propiedad.
metalos meta La propiedad es un objeto con una sola propiedad: un banner. Este banner es el comentario que se encuentra en la parte superior de los archivos de proyectos concatenados o minificados. Como puedes ver, es una cadena con algunas etiquetas de plantilla (<%= %>); en la mayoría de los casos, las etiquetas rodean una llamada a una propiedad en el pkg propiedad, como pkg.title. Sin embargo, también puede ejecutar funciones desde dentro de esas etiquetas: el uso de grunt.template.today () y _.arrancar() nos muestra que.
concat / min / qunit / hilas / reloj He agrupado las siguientes cinco propiedades juntas porque son muy similares. Todos configuran opciones para tareas específicas, las tareas que reciben su nombre. Al configurar estas tareas, es importante tener en cuenta que Grunt distinguió entre dos tipos de tareas: tareas regulares y tareas múltiples. Básicamente, la diferencia es que las tareas regulares solo tienen un único conjunto de opciones de configuración, mientras que las tareas múltiples pueden tener múltiples conjuntos de instrucciones (llamadas objetivos). De las cinco tareas que enumeré en el encabezado de esta sección, la única que no es una multitarea es reloj.
Tenga en cuenta que en nuestro objeto de configuración, el qunit y hilas propiedades son ambos objetos con el archivos propiedad. archivos Es un objetivo único para esta tarea. En ambos casos, son una matriz de archivos que se utilizarán al ejecutar esta tarea. Digamos que quiero poder pelear solo los archivos en src subdirectorio. Podría agregar otro objetivo para que el hilas La propiedad se vería así:
pelusa: archivos: ['grunt.js', 'src / ** / *. js', 'test / ** / *. js'], src: ['src / ** / *. js'],
Ahora, para limar solo los archivos en src, Corro pelusa ronca: src: Paso el nombre del objetivo después de dos puntos. Si corro solo pelusa ronca, ambos objetivos serán ejecutados.
En el caso de la concat y min Tareas, los objetivos son más complicados: son objetos con fuente (src) y destino (destino) propiedades. Por supuesto, esto le dice a Grunt dónde obtener los archivos y dónde colocarlos cuando haya terminado de procesarlos, respectivamente. Si agrega otros archivos a su proyecto, querrá agregarlos en el lugar correcto para asegurarse de que estén concatenados y minimizados correctamente. Por lo tanto, si he añadido un src / utils.js archivo que mi jQuery plugin dependía, me gustaría cambiar concat.dist.src a esto:
