Ahora es el momento de pasar a la segunda parte del ejercicio de Gulp.
Seguiremos haciendo pasos similares a los que hicimos en
la segunda parte del ejercicio de script de NPM y en el ejercicio actual.
Por lo tanto, arreglaremos para eliminar la carpeta de distribución y luego copiar las fuentes,
luego también reconstruir la carpeta de distribución,
usando módulos de nodo similares
como los que usamos para Grant y también los scripts NPM.
Nuestro siguiente paso es configurar las tareas para eliminar
la carpeta de distribución y también copiar las fuentes en la carpeta de distribución.
Así que vamos a configurar algunos módulos de nodo.
El primero que vamos a configurar se llama del.
Este modelo de nodo le permite eliminar una carpeta.
Y vamos a seguir adelante y configurar las tareas de Gulp.
Con Gulp, afortunadamente, no necesitamos instalar otro módulo para copiarlo
porque los flujos de Gulp nos permiten hacer la copia de los archivos con poco esfuerzo.
Ir al archivo Gulp,
voy a presentar el módulo mixto Gulp,
que voy a decir, del.
Y luego requiere el módulo del aquí.
Así que una vez que necesitemos el módulo allí,
podemos seguir adelante y configurar las tareas.
Por lo tanto, configuraremos primero la tarea limpia aquí.
Así que justo después de la tarea predeterminada,
voy a configurar la tarea limpia.
Así que voy a decir, Gulp tarea limpia.
Y como puede ver,
esto está configurado como la función allí.
Y dentro de eso diríamos, volver del.
Y luego el parámetro suministrado es la carpeta de distribución aquí.
Así que esto configurará la tarea limpia.
Y una vez que se ejecuta esta tarea,
entonces la carpeta de distribución se va a eliminar.
Nuestra siguiente tarea es copiar las fuentes en su carpeta de distribución.
Por lo tanto, yo diría, copiar fuentes.
Y como puede ver,
configuramos la función allí y luego cerramos la función.
Y luego aquí, simplemente diría,
Gulp fuente y
módulos de nodo, fuente impresionante, fuentes.
Puedes verme usando los patrones de globbing, justo ahí.
Y luego, una vez que seleccionamos todos los archivos fuente,
simplemente los canalizamos en el archivo de destino.
Por lo tanto, usted nota que no necesitamos
un módulo específico para organizar la copia de los archivos.
Simplemente usamos las secuencias de origen y destino de Gulp para poder
canalizar los archivos desde la ubicación de origen a la ubicación de destino.
Por lo tanto, estos dos configurarán la tarea de limpiar y copiar fuentes.
A continuación, vamos a configurar el módulo NPM para la tarea imagemin.
Así que la reducción y la compresión de las imágenes.
Por lo tanto, para hacer eso agregue el mensaje de tipo Gulp imagemin.
Este es el complemento Gulp correspondiente al módulo de nodo imagemin.
Así que instalamos como complemento Gulp,
que también es módulo de nodo.
Así que una vez que la instalación esté completa,
vamos a configurar esa tarea de imagemin. Al
ir a nuestro archivo Gulp,
configuraremos la tarea imagemin aquí.
Así que configuraremos la tarea imagemin como función.
Como puede ver, la estructuración del código para
la definición de tarea Gulp es bastante estándar.
Entonces, dirías fuente Gulp.
Especificamos los archivos fuente allí y los archivos fuente en
la carpeta de imágenes los
archivos JPG, GIF y PNG desde allí.
Y luego canalizarlos a través de la tarea imagemin.
Y luego estableceré algunos parámetros aquí.
Por lo tanto, configuraré
el nivel de optimizaciones a tres, progresivo como verdadero.
Por lo tanto, esto los convertirá en imágenes progresivas y entrelazadas.
Entonces, una vez que esto está configurado,
entonces el siguiente paso es canalizarlos a su destino.
Y el destino aquí como puede ver es la carpeta de imágenes en la carpeta de distribución.
Así que con esto la tarea imagemin ahora está configurada.
Ahora, vamos a construir la tarea de compilación aquí.
Por lo tanto, permítanme configurar la tarea de compilación.
Entonces, para la compilación de la tarea,
lo que le gustaría hacer es
ejecutar primero la tarea limpia antes de que
se ejecuten las tareas restantes
porque queremos limpiar primero la carpeta de distribución.
Y eso tiene que completarse antes de que se realicen las tareas restantes.
Con Gulp, las tareas se ejecutan en paralelo automáticamente.
Por lo tanto, puede suceder que
si ejecuta la tarea limpia en paralelo con
la tarea restante, la tarea limpia podría terminar más tarde y
luego eliminar parte del trabajo realizado por las tareas restantes.
Por lo tanto, es por eso que cuando especifica la tarea Gulp,
si especifica clean como el primero en,
como el segundo parámetro aquí,
entonces eso significa que esa tarea se completará primero.
Y luego se ejecutarán las tareas restantes.
Por lo tanto, yo diría que Gulp empezar.
Con el inicio de Gulp,
todas las tareas que especificamos aquí se van a ejecutar en paralelo.
Por lo tanto, voy a ejecutar la tarea de copiar fuentes y también la tarea imagemin juntos.
Más adelante, configuraremos la tarea usemin y luego
ejecutaremos eso también junto con las fuentes de copia e imagemin.
Una última cosa que necesito agregar antes de continuar y ejecutar
las tareas es subir aquí y luego requerir la imagemin.
Yo diría que la imagemina requiere imagemin de Gulp.
Y luego guarde los cambios.
Ahora sigamos adelante y verifiquemos la tarea de compilación.
En el símbolo del sistema, si su tipo Gulp build,
entonces debe llevar a cabo las tres tareas.
Así que verá que comienza la tarea limpia y la
completa y luego comienza la tarea de compilación real.
Por lo tanto, puede ver que especificando
la limpieza debe completarse antes de que ocurra la compilación real,
luego asegúrese de que primero limpie la carpeta de distribución
luego se
ejecutará la tarea de compilación que comprende las fuentes de copia y la imagemin, todas ellas completadas en paralelo a partir de entonces.
Al ir al editor,
verá que en la carpeta de distribución,
vemos que las fuentes se han copiado y las imágenes se han copiado correctamente.
El último paso es establecer la tarea usemin para construir la carpeta de distribución.
Para configurar su tarea usemin,
voy a instalar algunos plugins Gulp así que diría instalar NPM.
Y luego instalaría el plugin de archivo uglify Gulp,
que obviamente también es un módulo de nodo.
Y luego instalaré el módulo de nodo usemin y luego el módulo de nodo rev.
El módulo de nodo rev Gulp es como el plugin de la beca rev de gráficos de archivos que vimos antes.
Es ligeramente diferente de la versión de archivo que vimos anteriormente,
pero sirve para el mismo propósito.
Entonces, Gulp rev, entonces configuraré Gulp Clean CSS y luego Gulp flatmap.
Verás la razón de esto como nosotros-
Configuramos nuestra tarea usemin, así,
y gulp-html min y seguimos adelante e instalamos estos módulos aquí.
Una vez instalados los módulos,
vamos a seguir adelante y requerir estos módulos en nuestro archivo gulpfile y luego configurar la tarea usemin.
Ir a nuestro archivo gulpfile justo en la parte superior,
voy a requerir los módulos que acabo de instalar.
Por lo tanto, el trago feo uglify.
Entonces, la tarea uglify luego
la tarea usemin trago usemin,
luego después de eso,
la revolucionaria luego, se
olvidó de allí, coma allí.
Tenga mucho cuidado de no perderse estas comas allí.
Así que requiere gulp clean-css, luego flatmap y htmlmin.
Así que estos son los módulos gulp
que instalamos,
así que vamos a guardar los cambios y luego vamos a bajar y configurar la tarea usemin.
Al llegar al fondo del archivo gulpfile,
justo allí configuraré la tarea usemin.
Entonces, ¿qué hace la tarea usemin?
Entonces, la tarea usemin toma
los archivos htmly luego busca los bloques CSS y JavaScript en los archivos
html, combina, concatena y minimiza y nuglifica los archivos y luego
los reemplaza usando el archivo concatenado en la carpeta de distribución.
Entonces, para comenzar,
primero comenzaría especificando la fuente de gulp.
Entonces, ¿dónde están los archivos fuente?
Entonces, los archivos fuente son los archivos htmlen la carpeta actual.
Así que trago. /start.html, entonces voy a
canalizar este gulpfiles a través de este módulo gulp llamado como plano.
¿ Qué hace flatmap?
Flatmap toma estos múltiples archivos htmly luego
inicia canalizaciones paralelas para cada uno de estos archivos html.
Cada uno de ellos pasando por el mismo conjunto de pasos y, finalmente,
convergiendo y copiando en la carpeta de destino.
Entonces, como puede ver en nuestra carpeta actual,
tenemos contactus.html, aboutus.html y index.html.
Los tres deben ser procesados.
Por lo tanto, el plano nos permite procesarlos en paralelo,
iniciando el mismo conjunto de tuberías para cada uno de estos archivos,
por lo que estoy haciendo uso del plano allí.
Entonces, plano, y luego dentro del plano, necesito especificar la función,
los dos parámetros; flujo, archivo.
Entonces, el archivo básicamente toma cada uno de esos archivos fuente que hemos especificado allí,
y luego los trata con el mismo conjunto de funciones aquí,
y luego inicia su secuencia separada para cada una de ellas.
Entonces, devolveré flujo,
y luego canalizaré cada uno de estos
a través de la tarea usemin que en sí,
comprende la
tarea css y uglify JavaScript y html.
Entonces, para el css, voy a realizar la parte de revisión.
Entonces, la parte css obviamente hará la concatenación y la minificación, etc.,
y luego aplica la rev a eso para que actúe
esa cadena de 20 bits en el archivo main.css allí.
Entonces, para css configuré eso,
y luego para html,
porque tengo múltiples archivos html,
necesito especificar esto como una función,
y dentro de esta función diría que devuelve htmlmin.
Y luego dentro de allí le daré el parámetro CollapseWhiteSpace,
y ese parámetro se establecería en true.
Y por lo tanto, esto básicamente completa la parte html de ella.
Y luego la siguiente es la parte js de ella,
la parte de JavaScript,
que necesito hacer el uglify y luego la revisión para ello.
Y luego, si tengo
algún código javascript en línea, entonces necesito aplicar
la tarea uglify para eso,
y luego para el código inlinecss,
usaré la tarea CleanSSS allí con concat como parámetro allí.
Así que con esto, he configurado mi tarea usemin.
Así que servirá para todas estas acciones diferentes en mi nombre.
Y luego, una vez que se hayan hecho finalmente,
los flujos resultantes se
canalizarán a la carpeta de distribución.
Entonces, con esto, la tarea usemin ahora está configurada.
Déjame guardar los cambios.
Y luego bajaré a la tarea de compilación y luego, después de imagemin, también
agregaré usemin como una de las tareas que realizará la tarea de compilación.
Entonces, con estos cambios, por lo tanto,
hemos modificado la tarea de compilación,
vamos a seguir adelante y luego verificar si la carpeta de distribución está construida correctamente o no. Al
ir al indicador, permítanme escribir la
compilación de trago y luego esperar a que gulp construya todas las diferentes tareas.
Tomará un poco de tiempo para que el usemin complete su trabajo,
y cuando termine de completar la transformación,
mi carpeta de distribución ahora debería estar lista para ser vista.
Al ir al editor, ahora puede ver que la carpeta de distribución se ha
preparado aquí y puede ver el índice, contactus y acerca del archivo.html.
Puede ver que al abrir el archivo.htmlindex.exe,
se ha comprimido.
Y el htmlmin se ha hecho,
en particular tenga en cuenta cómo el archivo css se ha reemplazado
con css/main- y luego verá una cadena larga there.css.
Así que esto es igual que el archivo rev que vio en gruñido con el módulo gulp rev,
esto es lo que hace con el nombre del archivo.
Entonces, si miras el css, puedes ver que el nombre del archivo es el guión principal y
luego alguna cadena hay punto css y de manera similar para el archivo javascriptfile.
Entonces, esto es lo que hace el módulo gulp rev,
y luego se preparan todos estos tres archivos.
Echemos un vistazo a estos archivos en el navegador.
Al ir al navegador, puedo ver que hay archivos fuente se están guardando correctamente.
Déjame revisar la carpeta de distribución.
Entonces, en la carpeta de distribución,
el index.html que ha sido preparado por
la tarea de compilación gulp parece estar funcionando correctamente.
Permítanme también echar un vistazo a la página acerca,
y podemos ver que acerca de la página también se construye correctamente,
y también la página de contacto.
Así que ahora puedes ver que nuestra tarea de trago se ha completado.
Así que con esto, completamos este ejercicio.
En este ejercicio, configuramos la limpieza y
la copia de los archivos de fuente en nuestra carpeta de distribución,
hicimos la tarea imagemin y finalmente configuramos
la tarea usemin para construir nuestra carpeta de distribución.
Con esto completamos este ejercicio.
Este puede ser un buen momento para que usted haga un buen comentario con el mensaje Gulp parte dos.