Share
Hasta ahora, ha aprendido a hacer cosas como compilar código, auto repararlo, limpiarlo, comprimirlo y minimizarlo con solo escribir algunas palabras. Esto es genial, pero ¿qué sucede si tienes un proyecto que necesita que ejecutes varios de estos comandos, uno tras otro, una y otra vez hasta que completes tu trabajo? Por ejemplo:
Incluso con solo unas pocas palabras por comando, se convertirá rápidamente en una tarea aburrida en el transcurso de un proceso típico de creación de sitios.
Aquí es donde intervienen los "Corredores de tareas" para salvar el día. Con los ejecutores de tareas, puede configurar un solo archivo dentro de su proyecto que defina todas las tareas que necesita ejecutar en su proyecto y el orden en el que deben ejecutarse. En este archivo puede definir comandos personalizados que puede usar para ejecutar todos esos tareas una vez.
Aprenderá a configurar los corredores de tareas de esta manera a través de este tutorial, y en el proceso también verá un ejemplo de cómo traer scripts de paquetes Bower para una implementación eficiente en sus proyectos..
Nota: Este tutorial asume que ha completado todos los tutoriales anteriores en esta serie. Si aún no lo ha hecho, le resultará útil repasarlos antes de comenzar aquí..
En este momento hay varios corredores de tareas disponibles, sin embargo, a los efectos de este tutorial, nos centraremos en los dos que son actualmente más populares: Grunt y Gulp.
Hay varias diferencias técnicas entre los dos proyectos, que no voy a entrar ahora. Tampoco te diré cuál de los dos deberías usar. En su lugar, recomiendo seguir los pasos para usar los dos a continuación y luego decidir por ti mismo cuál prefieres.
Vamos a crear un proyecto que mire y compile automáticamente Stylus y Jade, y optimice CSS y JavaScript. Lo lograremos primero usando Grunt y luego (en el siguiente tutorial) usando Gulp.
Para empezar, necesitaremos configurar un proyecto de ejemplo con algunos archivos dentro de los cuales nuestro operador de tareas pueda operar. Cree una carpeta llamada "Grunt Project", luego agregue una subcarpeta llamada "build" y una subcarpeta llamada "source".
En la carpeta "origen", agregue dos nuevas subcarpetas llamadas "stylus", "jade". Agregue algunos archivos de ejemplo del tipo apropiado a cada carpeta.
Los archivos pueden contener cualquier código que desee, solo para que tenga algo con lo que pueda ver el proceso de compilación en funcionamiento..
Propina: si no está seguro de qué código agregar, intente tomar un código de ejemplo de Codepen: bolígrafos etiquetados con lápiz óptico, bolígrafos etiquetados con jade.
Por ejemplo:
Luego, también aprovecharemos lo que aprendimos sobre Bower en una lección anterior y obtendremos descargas de jQuery y Modernizr, que combinaremos y minimizaremos más adelante..
Ejecutar los comandos:
Bower instalar jquery --save
Bower instalar modernizr --save
Ahora, haga un duplicado de toda la carpeta de su proyecto y cámbiele el nombre a "Proyecto Gulp".
De esta manera, puede seguir los pasos para usar Grunt dentro de su carpeta "Grunt Project", y los pasos para usar Gulp dentro de su carpeta "Gulp Project".
Para que los comandos de Grunt funcionen, deberá instalar su CLI (interfaz de línea de comandos). Instálalo globalmente con:
[sudo] npm install -g grunt-cli
Cada proyecto que use Grunt necesitará un archivo "package.json" en la carpeta raíz.
Cubrimos la configuración de un archivo "package.json" usando el comando npm init en el anterior tutorial de Taming 3rd Party Packages. Si aún no ha completado esa sección, vuelva atrás y sígala ahora.
Instale Grunt en su proyecto y guárdelo como una dependencia de desarrollo con:
npm install grunt --save-dev
Cada proyecto Grunt también necesita tener lo que se llama un Gruntfile en la carpeta raíz.
Un Gruntfile es un archivo llamado "Gruntfile.js", o "Gruntfile.coffee" si prefieres escribir en CoffeeScript. En nuestro caso, trabajaremos con JavaScript, así que agregue un archivo llamado "Gruntfile.js" a su carpeta raíz.
Rellenar su Gruntfile le permitirá determinar qué comandos activarán qué tareas se ejecutarán. Puede comenzar simplemente agregando un shell básico en su Gruntfile. Vamos a configurar su código de configuración real más tarde.
Agregue el siguiente código a su archivo Gruntfile.js:
module.exports = function (grunt) ;
Recordarás que cuando querías usar paquetes con npm o Bower, tenías que buscar en el lugar correcto para obtener las versiones diseñadas para funcionar con cada sistema..
Lo mismo ocurre cuando se usan paquetes con Grunt. A través de Grunt, puede acceder a un ecosistema de complementos, que son esencialmente envoltorios alrededor de paquetes de vainilla npm. Estos complementos aún se entregan a través de npm, pero están especialmente equipados para trabajar con Grunt
Por ejemplo, en lugar del paquete npm UglifyJS, con Grunt puede usar el complemento "grunt-contrib-uglify".
Puede buscar complementos de Grunt en http://gruntjs.com/plugins
Para nuestro proyecto instalaremos estos seis complementos Grunt:
Cada uno se instalará en la subcarpeta "node_modules" de su carpeta de proyecto y se guardará como una dependencia de desarrollo.
Ejecute cada uno de estos comandos, uno a la vez, con su terminal apuntando a su carpeta "Grunt Project":
npm instala grunt-contrib-stylus --save-dev
npm install grunt-autoprefixer --save-dev
npm instala grunt-contrib-cssmin --save-dev
npm instala grunt-contrib-jade --save-dev
npm install grunt-contrib-uglify --save-dev
npm instala grunt-contrib-watch --save-dev
Cuando haya terminado, debería ver estas carpetas dentro de la carpeta "node_modules" de su proyecto:
Ahora vamos a usar el grunt.loadNpmTasks Método para habilitar nuestros plugins..
Dentro de los corchetes de su archivo Gruntfile existente, agregaremos seis líneas, una para habilitar cada complemento de gruñido, así:
Accentsconagua
module.exports = function (grunt) // Cargar complementos grunt. grunt.loadNpmTasks ('grunt-contrib-stylus'); grunt.loadNpmTasks ('grunt-autoprefixer'); grunt.loadNpmTasks ('grunt-contrib-cssmin'); grunt.loadNpmTasks ('grunt-contrib-jade'); grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.loadNpmTasks ('grunt-contrib-watch'); ;Este código registra el nombre de cada complemento como un comando grunt, lo que nos permite usar ese comando para hacer que el complemento ejecute una tarea. Por ejemplo, usaríamos el comando lápiz duro para ejecutar una tarea de lápiz,gruñido autoprefixer para ejecutar una tarea autoprefixer y así sucesivamente.
Nuestros complementos grunt están instalados y los comandos para usarlos están operativos, sin embargo, si los usara ahora mismo, no vería que sucediera nada. La razón es que tenemos que configurar alguna configuración para determinar qué debe hacer realmente cada tarea.
Esto se hace agregando el grunt.initConfig Método a su Gruntfile, y luego pasar información a través de él que dicta cómo desea que se ejecute cada tarea.
Primero, agregaremos el grunt.initConfig Método por encima de las líneas que acaba de agregar para cargar complementos grunt:
grunt.initConfig ();
Ahora haremos algo de espacio para que podamos pasar nuestra información de configuración. Agregue apertura y cierre entre llaves dentro de los soportes regulares, luego agregue una línea vacía entre ellos:
grunt.initConfig ();
Ahora podemos continuar y agregar la configuración para cada uno de los complementos que instalamos.
Cada complemento tiene su propio rango de configuraciones que puede usar, y estas opciones se detallan en las páginas vinculadas en la sección "Instalar complementos de Grunt" arriba.
También puede leer todos los detalles sobre la configuración de tareas Grunt aquí: http://gruntjs.com/configuring-tasks
Vamos a empezar agregando configuración para nuestro aguja tarea.
Entre los corchetes que acaba de agregar, en la línea vacía, agregue el siguiente código:
stylus: compile: options: compress: false, rutas: ['source / stylus'], archivos: 'build / style.css': 'source / stylus / main.styl',
Tu Gruntfile ahora debería verse así:
module.exports = function (grunt) grunt.initConfig (stylus: compile: opciones: comprimir: falso, rutas: ['source / stylus'], archivos: 'build / style.css': ' source / stylus / main.styl ',); // Cargar plugins grunt. grunt.loadNpmTasks ('grunt-contrib-stylus'); grunt.loadNpmTasks ('grunt-autoprefixer'); grunt.loadNpmTasks ('grunt-contrib-cssmin'); grunt.loadNpmTasks ('grunt-contrib-jade'); grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.loadNpmTasks ('grunt-contrib-watch'); ; Revisemos el código que hemos agregado aquí. No desglosaremos todas las tareas, pero al ver esto, debería darle una idea del tipo de sintaxis que se utiliza al armar la configuración de tareas Grunt..
Como se mencionó anteriormente, cada complemento tiene diferentes opciones de configuración, de modo que cuando esté empleando un nuevo complemento, eche un vistazo a las instrucciones de uso que ofrece.
Lo primero que hemos hecho es agregar una entrada en nuestra configuración para nuestra aguja tarea con el código:
lápiz: ,
Dentro de eso hemos añadido una compilar Entrada para controlar lo que sucede durante la compilación:
stylus: compile: ,
Dentro de compilar tarea que hemos creado una opciones zona.
Hemos utilizado esa zona para establecer el comprimir opción a falso, porque vamos a hacer nuestra optimización de código más tarde.
También hemos establecido el caminos opción a ['fuente / stylus'] así que si Stylus ve el @importar mientras compila, la directiva buscará archivos para importar en la carpeta "source / stylus" del proyecto:
stylus: compile: options: compress: false, path: ['source / stylus'],
Luego después de la opciones área que hemos añadido una archivos área para controlar el directorio de salida y el nombre del archivo, así como el directorio de entrada y el nombre del archivo.
Hemos establecido la ubicación de salida de nuestro archivo CSS compilado para que sea 'build / style.css', mientras que el archivo Stylus para procesar es 'source / stylus / main.styl'.
stylus: compile: options: compress: false, rutas: ['source / stylus'], archivos: 'build / style.css': 'source / stylus / main.styl',
Ahora, con su terminal apuntando a su carpeta raíz principal, ejecute el comando:
lápiz duro
Mire dentro de su carpeta de "compilación" y debería ver un archivo "style.css" recién compilado.
Ahora nos moveremos con bastante rapidez a través de la configuración de cada tarea restante. Inserte cada bloque de código de configuración inmediatamente después del que agregó anteriormente.
Añade este código:
autoprefixer: compile: files: 'build / style.css': 'build / style.css',,,
Ejecute la tarea autoprefixer con:
gruñido autoprefixer
Si inspecciona su archivo "build / style.css", ahora debería ver los prefijos agregados donde sea necesario.
Añade este código:
cssmin: clean: files: 'build / style.css': 'build / style.css',
Ejecuta la tarea cssmin con:
gruñido cssmin
Si vuelves a mirar "build / style.css" ahora, verás que ha sido bien limpiado y comprimido para ti.
Añade este código:
jade: compile: files: [expand: true, cwd: "source / jade", src: "* .jade", dest: "build", ext: ".html"],
Ejecutar la tarea de jade con:
jade gruñido
Si mira dentro de su carpeta de "compilación", ahora debería ver un archivo HTML que corresponda con cada archivo de Jade que tenía en su carpeta de "fuente / jade".
Añade este código:
uglify: bower_js_files: files: 'build / output.min.js': ['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js'],
En este ejemplo, verá que estamos haciendo referencia a las ubicaciones de los componentes de Bower que instalamos anteriormente..
Estamos sacando las versiones expandidas completas de jQuery y Modernizr de nuestra carpeta "bower_components", luego las concatenamos y las minimizamos en un nuevo archivo llamado "output.min.js". Esta es una excelente manera de implementar scripts que está administrando con Bower.
Ejecute la tarea uglify con:
gruñido uglify
Ahora debería ver un nuevo archivo "output.min.js" en su carpeta "build".
Hasta ahora puede parecer que simplemente reemplazamos un comando para hacer una tarea determinada con otro comando, pero lo que realmente hemos estado haciendo es sentar las bases para que Grunt realmente comience a brillar..
La clave es la capacidad de Grunt para que una tarea ejecute otra tarea. Así que ahora vamos a configurar una reloj tarea que monitoreará ciertos archivos para cambios, luego ejecute nuestro aguja y jade tareas automáticamente para nosotros.
Añade este código:
watch: stylus: files: ['source / stylus / *. styl'], tareas: ['stylus', 'autoprefixer', 'cssmin'], jade: files: ['source / jade / *. jade '], tareas: [' jade '],
Primero hemos añadido nuestro reloj tarea, y luego dentro que hemos configurado un área para aguja y para jade.
los archivos Opción en cada conjunto qué archivos deben ser observados para detectar cambios. los Tareas la opción establece qué tareas deben ejecutarse cuando ocurren cambios, y en qué orden.
por aguja, hemos configurado la tarea de observación para monitorear todos los archivos ".styl" en la carpeta "source / stylus", y cuando vea los cambios, ejecutará la aguja, autoprefixer y cssmin tareas en ese orden.
Así que ahora, cuando se está ejecutando la tarea de observación, todo lo que tiene que hacer es guardar cualquiera de sus archivos Stylus y automáticamente obtendrá un archivo CSS compilado, reparado automáticamente y optimizado escrito en la carpeta "build" para usted.
Igualmente para jade, hemos configurado todos los archivos ".jade" en la carpeta "source / jade" para que sean monitoreados, y cada vez que se guarda uno jade La tarea se ejecutará automáticamente y compilará el archivo HTML correspondiente en la "compilación" .
Ejecutar la tarea de vigilancia con:
reloj gruñido
Detenlo de nuevo, ya sea por:
En este punto es posible que se esté preguntando, ¿qué pasa con la tarea uglify de JavaScript??
La razón por la que no lo incluimos con el reloj La tarea es que no va a realizar cambios en los archivos jQuery y Modernizr que la tarea de uglify está procesando. Entonces porque el reloj la tarea solo responde a los cambios que nunca se activarán para procesar su JavaScript.
En su lugar, vamos a hacer uso de la defecto Tarea que se puede configurar en su archivo Gruntfile. Esta es la tarea que se ejecutará si utiliza el comando gruñido por sí sola sin nada añadido.
Despues de tu ultima grunt.loadNpmTasks Línea, pero antes del cierre. ; del archivo, agregue esta línea:
grunt.registerTask ('default', ['stylus', 'autoprefixer', 'cssmin', 'jade', 'uglify']); Esto establece el defecto tarea a ejecutar aguja, autoprefixer, cssmin, jade y entonces afear.
Así que ahora si ejecuta el comando gruñido Sin nada después, construirá todo tu proyecto, incluido tu JavaScript..
A continuación, repetiremos el proceso que acabamos de aprender, pero al usar Gulp para manejar nuestra tarea en ejecución en lugar de Grunt.
