Share
Cuando es nuevo en el desarrollo de aplicaciones para usuario y comienza a dominar HTML5, CSS y JavaScript, el siguiente paso obvio es poner sus manos en herramientasque la mayoría de los desarrolladores utilizan para mantenerse sanos en este espacio complejo. Usted también merece tener más flexibilidad y características al escribir sus hojas CSS usando Menos. Tú también mereces optimizar el ancho de banda al reducir tu código JS. Tú también mereces poder verificar automáticamente que tu código JS es bueno al usar JSHint.
Te mereces todas estas cosas buenas.
Entonces, empiezas a usar todas estas grandes herramientas a mano, ejecutando cada vez más líneas de comando manualmente. A veces, se olvida de ejecutar el compilador Less ... A veces se olvida de ejecutar JSHint y se envía un error ...
Y de repente te encuentras preguntándote: ¿hay alguna solución para automatizar todas estas herramientas? ¿Cómo puede crear un flujo de trabajo repetible para evitar que cometa errores??
Obviamente existe una solución, y dos herramientas en particular están esperando que comiences: Gruñido y Trago.
Como novato en el uso de estas herramientas, se pregunta cómo funcionan y cuál usar, ¿no es así? Bien, perfecto entonces, estás leyendo el artículo correcto.!
Te daré la base para usar Grunt y Gulp usando un ejemplo realmente simple que puedes descargar desde GitHub.
Es un sitio web simple compuesto por tres archivos:
Styles.less define la hoja CSS de una manera más rica de lo que es posible utilizando un archivo CSS estándar. Al final usamos el compilador Less para crear un estilos.css expediente. Usando Less, por ejemplo, podemos usar variables en el archivo CSS:
Obtenga más información sobre Menos en esta guía de introducción..
El código JavaScript y HTML son realmente simples. La página debería verse así:
Primero debe comprender cómo funciona Node.js Package Manager (npm).
Npm es la herramienta provista con Node.JS. Se utiliza para obtener herramientas y marcos al tiempo que resuelve automáticamente sus dependencias.
Por ejemplo, para usar Menos y compilarlo en un archivo CSS utilizable en la web, primero debe instalar Menos usando este comando:
npm instalar -g menos
Nota: para obtener la línea de comandos npm, debe instalar Node.js desde el sitio web de Node.
Una vez hecho esto, puede ejecutar este comando para compilar archivos .less en .css:
lessc styles.less> styles.css
Npm usa un archivo que crea y almacena en la carpeta local en la que está trabajando: paquete.json. Este archivo utiliza el formato de notación de objetos de JavaScript (JSON) para que npm sepa qué herramienta y versión está instalada y los marcos utilizados por la versión actual. proyecto (que está representado por la carpeta actual).
Este archivo es importante para Grunt y Gulp porque contendrá la lista de complementos que se han descargado y se pueden usar en su flujo de trabajo de automatización.
Para crear un archivo package.json vacío puede usar el siguiente comando npm:
npm init
Pasará por algunas preguntas que puede responder usando la opción predeterminada, y luego estará listo para comenzar.
En este archivo tendrás dos tipos de dependencias:
Npm básicamente te da tres formas de instalar paquetes:
Accentsconagua
-sol o -global opción--save-dev opciónEl tercero creará un Dependencias sección / propiedad dentro del archivo package.json.
Grunt es un pionero en el área de flujo de trabajo de automatización de JavaScript. Hay muchos usuarios conocidos de Grunt como Twitter, jQuery y Modernizr.
El principio básico para Grunt es darnos una forma fácil de ejecutar Tareas. Una tarea es un conjunto de archivos de código y archivos de configuración ya creados para usted. Puede obtener nuevas tareas instalando complementos de Grunt que obtendrá usando npm. Puede encontrar un complemento para casi todas las herramientas que pueda usar, como Less y JSHint.
Para ejecutar Grunt, debe crear un Gruntfile en el que especifique qué tareas desea ejecutar y la configuración para cada una de ellas. Una vez hecho esto, solo tienes que ejecutar el gruñido línea de comandos que especifica la tarea que desea ejecutar (por defecto o una específica) y lo hará automáticamente.
Ahora veamos una guía paso a paso para configurar todo esto..
Use npm para iniciar el archivo:
npm init
Tendrá que responder algunas preguntas como el nombre del proyecto y cuál es el archivo .js predeterminado. También puede elegir crear el archivo manualmente y establecer su contenido en:
"name": "project-name", "devDependencies": , "dependencies":
Necesita instalar Grunt globalmente para obtener la línea de comandos y localmente para inicializar todo lo necesario para el proyecto.
Correr:
npm instalar -g gruñido
Luego ejecútalo localmente:
npm install grunt --save-dev
Nota: No olvides la -dev parte para que se especifique como uno de los Dependencias en el paquete.json expediente.
Grunt funciona utilizando un archivo llamado gruntFile.js. Este archivo contiene todo lo que necesita Grunt, es decir:
Grunt espera que el archivo exporte una sola función que tome un parámetro llamado "grunt". Utilizará este objeto para realizar todas las acciones relativas Grunt.
Aquí hay un archivo de archivo mínimo que solo lee el archivo package.json y crea un defecto tarea que no ejecuta nada.
Nota: coloque el archivo en la carpeta del proyecto, lado a lado con el archivo package.json.
module.exports = function (grunt) // Configuración del proyecto. grunt.initConfig (pkg: grunt.file.readJSON ('package.json'),); // Tarea (s) predeterminada (s). grunt.registerTask ('predeterminado', []); ; Puedes ejecutarlo para asegurarte de que todo está configurado correctamente..
Para hacerlo, abra un símbolo del sistema en la carpeta del proyecto y ejecute:
gruñido
Debería ver algo como esto:
Ahora que su Gruntfile está listo, el siguiente paso es agregar un complemento y usarlo. Todos los complementos se pueden encontrar en el listado en el sitio web de Grunt. Una de las tareas comunes que se realizan en un Gruntfile es verificar si la sintaxis de JavaScript es correcta. Para hacer eso, usualmente usamos JSHint..
Vamos a añadir esto a su flujo de trabajo gruñido.
Si busca JSHint en la página de complementos de grunt, encontrará grunt-contrib-jshint, que corresponde a lo que necesitamos!
En la carpeta del proyecto, ejecute:
npm install grunt-contrib-jshint --save-dev
Una vez hecho esto, debe agregarlo en su archivo Gruntfile.js. Hay dos pasos simples para eso:
Para cargar el plugin, use el loadNpmTasks función:
// Cargar el complemento que proporciona la tarea "jshint" grunt.loadNpmTasks ('grunt-contrib-jshint');La configuración se realiza en el initConfigFunción en la que tiene que agregar una nueva propiedad al objeto dado en el parámetro. Este tiene que ser el nombre de la tarea que desea agregar y está relacionado con el complemento que utiliza. La mejor manera de saber ese nombre y la lista de opciones disponibles para la tarea es echar un vistazo a la documentación del complemento. Siempre encontrarás una muestra bien documentada..
Por ejemplo, en nuestro ejemplo queremos comprobar todos los archivos JavaScript, excepto gruntfile.js. También queremos activar un conjunto de reglas para registrar los archivos JavaScript como eqeqeq para asegurarnos de que usamos triples iguales cuando sea necesario.
Aquí está el initConfig función modificada:
Puede ejecutar su tarea utilizando la siguiente línea de comando (donde especifica el nombre de la tarea como un parámetro para gruñido):
gruñido jshint
El resultado está aquí:
Solo tienes que ejecutar ese comando y automáticamente te preguntará por cualquier error que encuentre.
Enhorabuena, ahora tiene una tarea automatizada en su flujo de trabajo gruñido!
Su tarea JSHint funciona bien, pero está un poco sola en el flujo de trabajo. Usualmente, usamos herramientas como Grunt para ejecutar más de una tarea.
Es muy fácil agregar más, ya que solo tienes que seguir los mismos pasos. Digamos que ahora desea agregar la compilación para su archivo menos dentro del proceso automatizado. Si busca en los complementos de Grunt, encontrará un gruñido-contrib-menos plugin que puedes instalar en tu carpeta de proyectos:
npm install grunt-contrib-less --save-dev
Al igual que con la tarea JSHint, debe agregar la configuración:
Luego, carga la tarea:
Ahora puede ejecutar Grunt y especificar el Menos tarea: esto lanzará solo menos. Eso está bien, pero quieres ejecutar todas las tareas, ¿verdad? Ese es el papel de la defectotarea.
Cuando solo corres gruñido Sin especificar ninguna tarea, buscará un defecto Tarea y ejecuta todas las tareas especificadas en su matriz. Puedes modificarlo para que se ejecute. Menos y jshint. Tenga en cuenta que para agregar un grupo de tareas como defecto, necesitas llamar al registro de tareasfunción:
A partir de ahora, cuando corres. gruñido, se ejecutará jshint, y entonces Menos:
Puede agregar cualquier tarea que desee y también puede especificar otro grupo de tareas como defecto y llámalos pasando su nombre como un argumento a la gruñido línea de comando.
Fácil a la derecha?
Ahora, eres un desarrollador feliz. Todas sus tareas repetitivas están automatizadas dentro de un flujo de trabajo ronco, y usted solo tiene que ejecutarlas para ejecutarlas. Pero se puede hacer incluso más fácilmente. Se puede hacer automáticamente..
Para hacer eso, puedes agregar una tarea específica llamada reloj. Esta tarea inspeccionará constantemente su carpeta de trabajo y, según las reglas, cuando se modifique un archivo, grunt ejecutará una tarea asociada.
Primero, instale reloj en la carpeta de su proyecto:
npm instala grunt-contrib-watch --save-dev
Cárguelo como todas las demás tareas usando el loadNpmTasks Funciona, y configúralo. La parte de configuración es un poco diferente aquí porque necesita especificar una configuración para cada tarea que desea cubrir usando reloj.
Para más información, puede leer la documentación completa para esta tarea..
Cuando quieras activar reloj, solo tienes que ejecutar el siguiente comando:
reloj gruñido
Y ejecutará tareas cada vez que se cambie un archivo y este se encuentre dentro del alcance de los archivos observados para la tarea específica..
¡Y eso es! Ahora sabes todo para crear un flujo de trabajo automatizado usando grunt.
Gulp es una alternativa al gruñido. Es un poco más reciente y tiene la reputación de ser más flexible que el gruñido. Antes de elegir cuál usarás, veamos cómo funciona trago.
Gulp es una herramienta de automatización de flujo de trabajo. Como grunt, funciona usando npm y el archivo package.json. Todos los complementos disponibles también se descargarán usando npm y se agregarán como Dependencias en el archivo package.json.
Una de las principales diferencias es que Gulp usa streams. Una secuencia es un conjunto de funciones a través de las cuales un archivo irá y será modificado en memoria. El archivo se escribirá en el disco solo al final del proceso, por lo que es más eficiente. Las tareas duras, por otro lado, funcionan como silos y no se pueden encadenar.
Echemos un vistazo rápido a cómo funciona Gulp siguiendo unos sencillos pasos.
Similar a Grunt, primero tienes que crear el archivo package.json. Puede usar exactamente la misma técnica que usó para la muestra de gruñido.
Una vez que se crea el archivo package.json, instale gulp global y localmente usando:
npm instalar -g trago
y
npm install gulp --save-dev
Esto instalará la línea de comandos gulp y todo lo necesario para ejecutar un flujo de trabajo truculento.
Luego tienes que instalar gulp utils, que contiene funciones comunes compartidas por otros complementos:
npm instala gulp-util --save-dev
Finalmente, crea el archivo de trago mínimo, que se verá así:
Como puede ver, es un poco diferente de la sintaxis de gruñido. En trago, los complementos se cargan utilizando el exigir la sintaxis como podría estar acostumbrado si usted es un desarrollador de Node.js. También hay una defecto tarea definida usando el gulp.task función.
Si ejecuta el tragola línea de comandos utilizando un indicador de comandos en la carpeta del proyecto, debería ver un resultado como este:
Para usar un plugin en trago, usa la misma función que la que usamos para crear el defecto tarea. Esto se debe a que no tiene que usar un nombre específico para crear una tarea. Solo llamas gulp.task, configura el nombre que desees y dale una función de JavaScript como segundo parámetro. Cuando gulp ejecuta la tarea, ejecutará esta función..
Para usar un complemento, debe llamarlo usando el nombre que eligió cuando lo requiera. Por lo general, lo llama como parte de un flujo de trabajo de transmisión que generalmente comienza con una selección de archivos. Esto se hace con la gulp.src función. Seleccionará un montón de archivos y devolverá una secuencia que puede ser utilizada por otra función usando tubo. Así es como puede encadenar múltiples acciones sin escribirlas en el disco. Solo pasas la transmisión de un plugin a otro.
Aquí hay una muestra básica por menos:
Nosotros primero requiere ('trago menos') para cargar el Menos plugin para gulp. (Lo tenemos usando npm instalar gulp-less --save-dev).
Entonces gulp.src seleccionará todos los .Menos archivos, lo 'canalizamos' a la Menos()función y finalmente es 'canalizado' a gulp.destlo que indica dónde escribir el resultado. Como gulp.src puede seleccionar más de un archivo, gulp.dest especifica una carpeta.
Una vez que entienda el modelo de tubería, puede obtener fácilmente el mismo resultado que el que obtuvimos usando grunt.
El poder de Gulp es que puede crear tareas personalizadas en las que invoca más de un complemento y donde puede asociarlas de la forma que desee..
Nota: obviamente hay también una trago plugin que puede utilizar para automatizar el inicio de su flujo de trabajo!
Espero que ahora tenga una comprensión más clara de por qué necesita un flujo de trabajo de automatización y cómo puede utilizar Grunt o Gulp para obtenerlo..
Elegir uno de ellos está más relacionado con la tarea que desea lograr.
Grunt es fácil de usar. No tiene que entender el sistema de tuberías, y lograr tareas simples será más sencillo. Es una herramienta realmente madura, utilizada por muchos editores y desarrolladores conocidos, y hay muchos complementos disponibles.
Dicho esto, la forma en que está diseñado Gulp puede darte mucha flexibilidad. Ya existe desde hace bastante tiempo, e incluso si no encuentras tantos complementos como lo harás con Grunt, todos los clásicos están disponibles para Gulp..
Si está utilizando un flujo de trabajo realmente estándar con pasos comunes como JSHint, uglifying, CSS validating, etc., Grunt es una buena opción. Si estás preparado para tareas más complicadas, Gulp será un buen alero..
Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de código abierto de JavaScript, y tenemos la misión de crear mucho más con Microsoft Edge. Aquí hay algunos para ver:
Y algunas herramientas gratuitas para comenzar: Visual Studio Code, Azure Trial y herramientas de prueba en varios navegadores, todas disponibles para Mac, Linux o Windows.
Este artículo es parte de la serie web dev tech de Microsoft. Estamos muy contentos de compartir Microsoft Edge y lo nuevo Motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o realice pruebas a distancia en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
