Gulp como un servidor web de desarrollo

El corredor de tareas Gulp.js se está volviendo más y más popular últimamente. Puede usarse para muchas cosas, como concatenar archivos de JavaScript o minimizar imágenes. Si eres nuevo en Gulp.js, te recomiendo que comiences a administrar tus tareas de compilación con Gulp.js. 

En este tutorial, aprenderá a usar Gulp.js para ejecutar un servidor web local con una función integrada., carga de hígado apoyo.

El viejo camino

Supongamos que queremos desarrollar una aplicación de una sola página. El punto de entrada para esta aplicación es un simple index.html expediente. Nuestro objetivo es acceder a este archivo a través del navegador, yendo a localhost. En el pasado, quizás tú. configurar un servidor Apache o Nginx. Bueno, eso ya no es necesario..

Una mejor manera

Hoy en día, existe una implementación en JavaScript para casi todo, incluso para un servidor web. El más popular se llama Connect. Lo utilizaremos, utilizando un plugin Gulp.js llamado gulp-connect. 

En las siguientes secciones, configuraremos un servidor web local para una aplicación de una sola página, así que asumiré que ya ha configurado los archivos básicos, como el gulpfile.js expediente.

Configuración inicial

Comenzamos instalando el complemento Connect con el siguiente comando. Todo lo que necesitamos se instalará con este único comando..

npm install --save-dev gulp-connect

Propina: npm instalar --save-dev se puede abreviar con npm i -D.

Ahora, vamos a definir una tarea para el servidor web. Nuestro gulpfile.js Entonces debería verse así:

var gulp = require ('gulp'), connect = require ('gulp-connect'); gulp.task ('servidor web', función () connect.server ();); gulp.task ('predeterminado', ['servidor web']);

Ahora podemos iniciar el servidor web simplemente ejecutando trago en la terminal Podemos abrir localhost: 8080 En nuestro navegador, donde deberíamos ver. index.html. El servidor web monta la estructura de archivos de la carpeta, donde el gulpfile.js vive en la raíz de localhost: 8080. El servidor se ejecutará hasta que detenga la tarea presionando Ctrl + c en tu teclado Genial!

Puede encontrar el código fuente de este y todos los siguientes ejemplos en Github. Cada ejemplo contiene todos los archivos necesarios para reproducir una configuración de trabajo. Solo necesitas correr npm instalar en el directorio respectivo.

Añadiendo carga de hígado Apoyo

Configurar el servidor web básico fue fácil, ¿verdad? Así que sigamos obteniendo carga de hígado corriendo. Necesitamos hacer dos cosas: primero diga al servidor web que comience con carga de hígado Apoyo y en segundo lugar, contamos. carga de hígado Cuándo actualizar la página con nuevo contenido..

El primer paso es simple. Solo establece el carga de hígado propiedad a cierto. los Servidor web La tarea se ve así:

gulp.task ('webserver', function () connect.server (livereload: true););

El segundo paso depende de tu caso de uso. En este ejemplo, configuraremos la compilación automática de archivos LESS en una hoja de estilo CSS y la inyectaremos en el navegador. Vamos a desglosar este ejemplo en sus partes. Necesitamos un "observador", que verifica si se modificaron algunos archivos de MENOS. Este observador debe activar el compilador MENOS, que genera un archivo CSS. Este archivo CSS debe ser inyectado a través de carga de hígado.

Para este ejemplo, usaremos el plugin truculento. Puedes instalarlo ejecutando npm instalar --save-dev gulp-less. El vigilante ya viene con Gulp.js. Nuestra estructura de archivos de aplicaciones debería tener este aspecto:

. ├── node_modules │ └──… ├── estilos │ └── main.less ├── gulpfile.js ├── index.html └── package.json

En el reloj tarea, Gulp.js escucha los cambios en todos *.Menos archivos en el estilos carpeta y activa el Menos tarea. Aquí el main.less archivo es el punto de entrada para MENOS. Después de cada paso de compilación, el resultado se inyectará automáticamente en el navegador. El código para el gulpfile.js Se parece a lo siguiente, siéntete libre de copiar y pegar a tu proyecto.

var gulp = require ('gulp'), connect = require ('gulp-connect'), less = require ('gulp-less'); gulp.task ('webserver', function () connect.server (livereload: true);); gulp.task ('less', function () gulp.src ('styles / main.less') .pipe (less ()) .pipe (gulp.dest ('styles')) .pipe (connect.reload ( ));); gulp.task ('watch', function () gulp.watch ('styles / *. less', ['less']);) gulp.task ('default', ['less', 'webserver', 'reloj']);

Vamos a volver a ejecutar trago En la terminal y abrir de nuevo. localhost: 8080 en el navegador Ahora podemos hacer algunos cambios a un archivo MENOS en el estilos carpeta. Se compilará instantáneamente y se actualizará en el navegador. Tenga en cuenta que no necesitas ninguna extensión de navegador. carga de hígado trabaja fuera de la caja.

Unos pocos ajustes

Por favor, tenga en cuenta que el anterior gulpfile.js es solo una demostración mínima de cómo usar Gulp.js como servidor web con carga de hígado. Recomiendo encarecidamente jugar con algunos otros complementos. También debe intentar reorganizar la estructura de la tarea y usar el complemento no incorporado Gulp-Watch, que le permite procesar solo los archivos modificados. Esto es importante si está trabajando con una base de código más grande. Más adelante en este tutorial, veremos cómo sería una estructura de tarea alternativa.

Cambiar el nombre de host y el puerto

los gulp-connect El complemento en sí tiene muchas opciones de configuración. Por ejemplo, puede modificar el puerto del servidor web o el nombre de host. Incluso puedes usar un nombre de host personalizado con puerto 80 (por defecto es localhost: 8080).

connect.server (puerto: 80, host: 'gulp.dev');

Para que esto funcione, necesitamos tener gulp.dev en nuestro archivo hosts y ejecute el comando sudo trago. Se necesitan derechos de administrador para usar el puerto 80.

Algunas características avanzadas

Puede ir aún más lejos utilizando el complemento de conexión para generar múltiples servidores web al mismo tiempo. Esto resulta útil, por ejemplo, si desea ejecutar un servidor web de desarrollo y ejecutar pruebas de integración, simultaneamente.

gulp-connect También ofrece la posibilidad de utilizar varios directorios como carpeta raíz. Por ejemplo, cuando utiliza CoffeeScript y desea guardar los archivos de JavaScript compilados en una carpeta temporal, puede montar esta carpeta sin contaminar su carpeta de origen..

Para más ejemplos, por favor revisa el repositorio de GitHub.

Refactorizando nuestro código

En el ejemplo anterior configuramos un mínimo gulpfile.js para compilar archivos LESS en CSS e inyectarlos inmediatamente en el navegador. Funcionó, pero podemos hacerlo mejor. Puede ser problemático que mezclemos el compilar y carga de hígado pasos en una tarea. Entonces, dividámoslos y observemos los cambios en los archivos generados. Para eso, utilizaremos lo anteriormente mencionado. trago enchufar.

Vayamos incluso un paso más allá y agreguemos un paso de compilación de CoffeeScript. Con este paso adicional, la nueva estructura debería ser más clara. Instalamos los nuevos complementos en un lote a través de:

npm install --save-dev gulp-watch gulp-coffee 

Y exigir ellos en la parte superior de nuestra gulpfile.js. En la siguiente configuración, asumo que ya tienes algunos .café archivos en un directorio llamado guiones. Para una configuración de ejemplo, por favor revisa este repositorio. El refactored gulpfile.js Podría parecerse a la siguiente. Pasaremos por los cambios, paso a paso..

var gulp = require ('gulp'), connect = require ('gulp-connect'), watch = require ('gulp-watch'), less = require ('gulp-less'), coffee = require ('gulp- café'); gulp.task ('webserver', function () connect.server (livereload: true, root: ['.', '.tmp']);); gulp.task ('livereload', function () gulp.src (['. tmp / styles / *. css', '.tmp / scripts / *. js']) .pipe (watch ()) .pipe ( connect.reload ());); gulp.task ('less', function () gulp.src ('styles / main.less') .pipe (less ()) .pipe (gulp.dest ('. tmp / styles'));); gulp.task ('coffee', function () gulp.src ('scripts / *. coffee') .pipe (coffee ()) .pipe (gulp.dest ('. tmp / scripts'));); gulp.task ('watch', function () gulp.watch ('styles / *. less', ['less']); gulp.watch ('scripts / *. coffee', ['coffee']); ) gulp.task ('default', ['less', 'coffee', 'webserver', 'livereload', 'watch']);

El mayor cambio que vemos es el adicional carga de hígado tarea. Esta tarea simplemente observa (a través de la trago plugin) para cambios en los archivos compilados y los actualiza en el navegador. La costumbre reloj() La función nos permite simplemente recargar los archivos modificados, mientras que la función integrada gulp.watch () comando recargaría todos los archivos y no solo los modificados.

Debido a esta tarea adicional única, no necesitamos un .pipe (connect.reload ()) comando después de cada paso de compilación. Así que separamos las tareas por sus preocupaciones, lo que siempre es una buena idea en el desarrollo de software..

También notamos que los archivos compilados ya no se guardan en sus respectivas carpetas de origen. Ahora están almacenados en una carpeta temporal llamada .tmp. El contenido de esta carpeta solo son archivos generados y no contaminarán estilos o guiones directorios más tiempo. También se recomienda excluir esta carpeta de su sistema de control de revisiones. Todo lo que tenemos que hacer para que esto funcione, es también montar .tmp como una carpeta raíz, que se realiza por

raíz: ['.', '.tmp']

Esta configuración refactorizada debería funcionar como la anterior. Pero es mucho más limpio y fácil de extender..

Conclusión

Acabas de aprender a usar Gulp.js como servidor web.. 

Puede combinar esta técnica con muchos otros casos de uso, como probar o crear su aplicación de una sola página. Tenga en cuenta que este servidor web solo está destinado para el desarrollo local. Para fines de producción, debe utilizar una solución más eficaz como Nginx o CDN.. 

Tenga en cuenta que todas las características presentadas también son posibles con Grunt o proyectos similares. Gulp.js sólo proporciona una muy sencillo y elegante forma de hacer las cosas.