Share
En la última lección aprendió cómo compilar todo su proyecto o construirlo con comandos cortos como gruñido, reloj gruñido, trago y trago reloj.
En esta lección aprenderá cómo crear comandos que agreguen una capa adicional de asombrosos a sus proyectos, habilitando la recarga en vivo y la sincronización del navegador.
Si aún no ha completado los otros tutoriales de esta serie, vuelva atrás y complete esos antes de comenzar aquí.
Nota: Para evitar confusiones, hay una aplicación de escritorio y una combinación de Chrome llamada LiveReload que a menudo se usa junto con muchos paquetes npm para manejar la recarga automática. Sin embargo, con la forma en que vamos a configurar, las aplicaciones de escritorio y el complemento del navegador no serán necesarios..
Para permitir que la recarga en vivo funcione, debe haber un host local que pueda actualizarse, es decir, una forma de ver su sitio localmente simulando un host web con un http: // protocolo en lugar de expediente://.
Con su proyecto Grunt, nos encargaremos de habilitar a un host local para que sirva los archivos estáticos de su proyecto y recargar en vivo ese host local, utilizando el complemento grunt-express.
Instala grunt-express en tu proyecto con:
npm instalar grunt-express --save-dev
Luego habilite el complemento en su archivo Gruntfile agregando esto debajo de su actual grunt.loadNpmTasks líneas:
Accentsconagua
grunt.loadNpmTasks ('grunt-express'); Configure la tarea expresa agregando este código:
express: all: options: bases: 'build', livereload: true, abierto: 'http: // localhost: 3000',
Notarás que en nuestro exprimir configuración de tareas tenemos la carga de hígado opción establecida en cierto, así que después de que se inicie nuestra vista previa local, se volverá a cargar automáticamente cada vez que se detecten cambios.
Ahora agregaremos una nueva tarea llamada comienzo. Usaremos esta tarea para activar tanto la exprimir tarea y el reloj tarea a la vez.
Añade esto debajo de tu existente grunt.registerTask línea:
grunt.registerTask ('start', ['express', 'watch']); Ahora ejecuta el comando:
inicio ronco
... y debería ver su navegador predeterminado abrirse con la vista previa de su proyecto mostrada en su interior.
los reloj la tarea ahora se está ejecutando y compilará sus cambios de Stylus y Jade en la carpeta "construir".
Express a su vez está monitoreando la carpeta de "compilación" para detectar cualquier cambio, por lo que si sus archivos HTML, CSS o JS se vuelven a compilar, se volverá a cargar automáticamente su vista previa.
A continuación, continuaremos y lograremos el mismo tipo de vista previa de localhost en su proyecto Gulp. Esta vez vamos a utilizar el plugin gulp-connect en su lugar.
Instala gulp-connect en tu proyecto con este comando:
npm install --save-dev gulp-connect
Hazlo accesible en tu Gulpfile agregando esta línea debajo de las otras líneas donde has usado el exigir() función:
var connect = require ('gulp-connect'); Configurar una nueva tarea llamada conectar agregando este código debajo de su otro código de tarea:
gulp.task ('connect', function () connect.server (root: 'build', livereload: true, open: true););Como hicimos con Grunt, ahora vamos a crear una tarea personalizada llamada comienzo que lanzará nuestra vista previa localhost e iniciará nuestra tarea de vigilancia.
Agregue esta línea al final de su Gulpfile:
gulp.task ('start', ['connect', 'watch']);Para habilitar la recarga de nuestra vista previa de localhost, vamos a conectar otra "tubería" al final de ambos css y html Tareas.
Agregue este disparador de recarga al final de cada uno:
.pipe (connect.reload ())
Haciendo que las tareas se conviertan en:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, rutas: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (rename ('style.css')) .pipe (gulp.dest ('build')) .pipe (connect.reload ()));... y:
gulp.task ('html', function () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')) .pipe (conectar. recargar ()));Ahora ejecuta el comando:
trago de inicio
… Luego vaya a http: // localhost: 8080 y verá la vista previa de su sitio local.
Guarda un cambio en cualquiera de tus archivos de Jade o Stylus y mira la rápida compilación y recarga del rayo!
Ahora que tiene la vista previa de localhost recargando automáticamente, puede dejarlo así y aún tener una configuración de proceso de desarrollo de primera categoría para su proyecto. Sin embargo, cuando se trata de poder realizar pruebas entre navegadores y dispositivos, también vale la pena tener BrowserSync en la imagen..
Con BrowserSync se le proporciona una URL de vista previa que puede conectar a cualquier navegador de su máquina, así como a los navegadores de cualquier otro dispositivo con la misma conexión a Internet.
Todas las vistas previas que se estén ejecutando se volverán a cargar a medida que realice cambios para que pueda ver los resultados en todos los ámbitos, y todas sus interacciones se reflejarán en cada instancia. Si se desplaza o abre un menú en un navegador, verá cómo responden todos los demás navegadores y dispositivos al mismo tiempo..
Para instalar el complemento grunt-browser-sync en su proyecto Grunt, ejecute el siguiente comando:
npm install grunt-browser-sync --save-dev
Comente o elimine la línea que utilizó para habilitar grunt-express:
// grunt.loadNpmTasks ('grunt-express');A continuación, agregue esta línea para habilitar en su lugar a grunt-browser-sync:
grunt.loadNpmTasks ('grunt-browser-sync');Comenta o borra el exprimir tarea que creó anteriormente, y agregue este código de configuración para la tarea browserSync en lugar:
browserSync: bsFiles: src: ['build / *. css', 'build / *. html'], opciones: watchTask: true, server: baseDir: "build",
Encuentra tu comienzo tarea y cambiarlo para que ejecute el browserSync tarea en lugar de la exprimir tarea, desde
grunt.registerTask ('start', ['express', 'watch']);… a:
grunt.registerTask ('start', ['browserSync', 'watch']);Ahora cuando ejecutas el comando:
inicio ronco
… Aún verá una vista previa de localhost abierta, y se volverá a cargar cuando guarde los cambios, pero ahora la diferencia es que la sincronización del navegador está activa, al igual que la capacidad de ver su vista previa en otros dispositivos.
En el terminal después de iniciar su servidor BrowserSync verá esto:
- Local: http: // localhost: 3000 External: http://192.168.1.3:3000 - UI: http: // localhost: 3001 UI External: http://192.168.1.3:3001 -
Toma la dirección etiquetada Local, introdúzcalo en algunos de los otros navegadores de su máquina e ingrese la dirección indicada Externo En cualquier otro dispositivo que tenga compartiendo la misma conexión. Luego observe las respuestas sincronizadas que recibe en todas las instancias a medida que interactúa con cualquiera de ellas.
Para obtener más información sobre BrowserSync a través de Grunt, vaya a: http://www.browsersync.io/docs/grunt/
Ahora configuraremos el mismo proceso, esta vez utilizando el complemento de sincronización del navegador para Gulp.
Instala el plugin en tu proyecto Gulp con:
npm instalar navegador-sync trago --save-dev
Comenta o borra esta línea:
// var connect = require ('gulp-connect');... y reemplazarlo con:
var browserSync = require ('browser-sync');Comenta o elimina el existente conectar tarea y añadir en este nuevo sincronización del navegador tarea en su lugar:
gulp.task ('browser-sync', function () browserSync (server: baseDir: "build"););Al final de las tareas css y html, ubique los dos lugares donde agregó la línea:
.pipe (connect.reload ())
... y reemplazar cada una de esas dos líneas con:
.pipe (browserSync.reload (stream: true))
Y finalmente localizar tu existente. comienzo tarea y editarlo para ejecutar el sincronización del navegador tarea en lugar de la conectar tarea, reemplazando esto:
gulp.task ('start', ['connect', 'watch']);… con este:
gulp.task ('start', ['browser-sync', 'watch']);Ahora cuando ejecutas el comando:
trago de inicio
... se abrirá una ventana del navegador con su vista previa en ella. Al igual que cuando usó BrowserSync a través de Grunt, las URL de la vista previa ahora se sincronizarán en cualquier navegador en cualquier dispositivo que se encuentre sin conexión a Internet.
Para obtener más información sobre BrowserSync a través de Gulp, visite: http://www.browsersync.io/docs/gulp/
Ahora ha pasado por todos los elementos esenciales para configurar sus propios proyectos desde cero para aprovechar la línea de comandos durante el desarrollo. Pero qué pasa cuando no quieres empezar desde cero. ¿Qué pasa cuando desea utilizar marcos existentes de terceros, o simplemente quiere tener una ventaja??
En el siguiente tutorial, aprenderá cómo usar la línea de comandos para organizar proyectos completamente nuevos en solo unos momentos, con todo el código de terceros que necesiten, así como la administración de tareas de Grunt o Gulp, todo listo y listo para usar..
Te veré en el siguiente tutorial.!
