Continuemos nuestros gruñidos.
Como hicimos en la segunda parte del ejercicio de scripts de NPM,
en esta segunda parte de ese ejercicio de gruñido,
vamos a configurar exactamente las mismas tareas.
Vamos a hacer la limpieza de la carpeta de distribución,
copiando las fuentes en la carpeta de distribución,
luego también haremos la minificación de nuestras imágenes usando imagemin,
y luego usaremos la tarea usemin para construir y preparar nuestra carpeta de distribución.
Continuando con nuestro ejercicio,
instalaré un par de módulos gruñidos.
Entonces, instalemos NPM, install-grunt-contrib-copy.
Esto se utiliza para copiar los archivos y luego grunt-contrib-clean,
y menos save-dev.
Y una vez que estos dos estén instalados,
seguiremos adelante y configuraremos las tareas correspondientes. Al
ir a su archivo gruñido,
vamos a agregar en la configuración tanto para la copia como para las tareas de limpieza.
Entonces, comenzando con la coma,
siempre recuerde no olvidar la coma.
Volverá a morderte en los momentos equivocados si haces eso.
Así que vamos a configurar la tarea de copia.
Para la copia, usemin espera que también mantengamos
nuestros archivos HTML copiados en la carpeta de distribución para
que pueda manipular eso.
Por lo tanto, en este caso,
vamos a copiar primero
los archivos HTML de nuestra carpeta de proyecto a la carpeta de distribución.
Entonces, para hacer la copia,
voy a configurar la parte HTML de ella.
Por lo tanto, aquí es donde vamos a utilizar parte de
la sintaxis gruñido para especificar los archivos que necesitan ser copiados.
Entonces, digo archivos y también especifico las
llaves derecha, izquierda y derecha allí, así que dentro de esto,
necesito especificar ahora cierta configuración.
Entonces, yo diría, expanda true y dot true, luego CWD,
el directorio de trabajo actual es dot slash,
y luego, después de eso,
configuraremos el siguiente que es SRC, los archivos fuente,
y luego los archivos fuente son star.html,
todos los archivos HTML,
y luego vamos a copiarlos a la carpeta dist.
Entonces, es por eso que el destino se establece en la carpeta de distribución aquí.
Entonces, con esta configuración,
mi tarea de copia copiará todos los archivos HTML a la carpeta de distribución.
Ahora, junto con eso, también necesitamos copiar las fuentes.
Por lo tanto, configuraré el segundo para las fuentes.
Por lo tanto, especifico fuentes y luego aquí también necesito especificar
los archivos que deben copiarse y así decimos archivos,
y luego estos son
algunos parámetros de configuración que necesita configurar para la tarea de copia.
Ahora, si necesita entender,
luego leyendo la documentación para el complemento gruñido correspondiente,
podrá resolver esto y así o
simplemente puede seguir el ejemplo que estoy dando aquí.
Entonces, punto verdadero, y luego CWD,
el directorio de trabajo actual es módulos de nodo y fuente impresionante.
Entonces de ahí es donde voy a copiar los archivos,
y luego el origen de los archivos es el fontsstar.star,
esos son los archivos que necesito copiar,
y el destino es la carpeta de distribución.
Entonces, con esto, he configurado mi tarea de copia para copiar
los archivos HTML y los archivos de fuentes en mi carpeta de distribución.
Ahora, la siguiente tarea que voy a configurar es la tarea limpia.
Por lo tanto, permítanme configurar la tarea limpia.
Para la tarea limpia, configuraré la compilación,
y luego diré que la fuente es la carpeta de distribución.
Por lo tanto, esencialmente especificando que la carpeta de distribución debe limpiarse.
Por lo tanto, ahora hemos configurado la copia y las tareas de limpieza, así que vamos a guardar los cambios.
La siguiente tarea que voy a configurar es la tarea imagemin.
Esto es lo que usaremos para comprimir y copiar las imágenes en la carpeta de distribución.
Para comenzar con la tarea imagemin, el primer paso,
instale el complemento gruñido correspondiente.
Entonces, gruño-contrib-imagemin, menos save.dev.
Y una vez instalado,
entonces vamos a seguir adelante y configurar la tarea de imagemin correspondiente.
Ir a nuestro archivo gruñido después de la configuración para la tarea limpia,
voy a configurar la tarea imagemin.
Entonces, diré imagemin,
y luego justo allí,
especificaré dinámico,
y dentro de allí especificaré los archivos para que pueda
ver que la especificación del archivo sería similar.
Diría, expanda verdadero,
entonces CWD es el directorio actual.
Entonces la fuente de los archivos es imagestar.
y luego entre corchetes, entre llaves,
especifico PNG, GIF y JPG.
Entonces, esencialmente, puede ver el patrón global del archivo aquí.
Así que dice cualquier
archivo PNG, GIF o JPG que coincida con este patrón y luego
comienza punto que significa todos los archivos de ese patrón,
y la fuente, y el destino,
configuré como la carpeta de distribución.
Así que con esto, hemos configurado nuestra
tarea de copia, limpieza e imagemin.
Vamos a configurar una tarea aquí llamada compilación.
Por lo tanto, yo diría, registrar tarea,
gruñir tarea y luego nombraré la tarea como compilación,
y luego dentro de esto,
especificaremos los pasos de configuración que debe realizar la tarea de compilación.
Así que, justo ahí, punto y coma y luego ahí dentro,
especificaré las tres tareas en la secuencia que deben realizarse.
Primero, diré, limpio.
Por lo tanto, limpiaremos la carpeta de distribución
y luego comenzaremos a reconstruir la carpeta de distribución.
Limpio, entonces la siguiente tarea sería
copiar y luego después de eso lo haría, imagemin.
Así que estas tres tareas se configuran aquí.
Así que con esto, déjame guardar los cambios.
Veamos cómo funciona esta cosa.
Ahora, yendo al indicador si escribo,
gruñendo y compilando, verá que primero hará la limpieza,
luego hacer la copia y hacer la tarea imagemin.
Entonces, hace todos estos tres y luego vería inmediatamente que
la carpeta de distribución está construida en mi carpeta de proyecto aquí.
Y dentro de la carpeta de distribución se puede ver que las fuentes se han copiado,
las imágenes se han copiado y
los tres archivos HTML se han copiado en la carpeta de distribución.
Sólo estás a mitad de camino.
Ahora, tenemos que ser capaces de procesar estos archivos usando el plugin usemin.
Entonces, vayamos a eso siguiente.
Ahora, voy a instalar algunos módulos NPM
que son útiles para construir la carpeta de distribución.
Entonces, para hacer eso, diría instalar NPM.
Puedo especificar un conjunto de módulos aquí así que,
diría, grunt-contrib-concat.
Entonces, esto se usa para concatenar archivos, luego grunt-contrib-cssmin,
grunt-contrib-htmlmin, luego decir, grunt-contrib-uglify.
Entonces gruño-filerev.
Verá la razón para usar filerev en poco tiempo,
y luego grunt-usemin, y guardará def y luego
instalará todos estos módulos gruñidos.
Una vez que todos ellos han sido instalados,
el siguiente paso es ir y configurar,
tarea usemin que también utiliza
las tareas cssmin Uglify Concat para llevar a cabo la construcción de la carpeta de distribución.
Ahora, vamos a continuar configurando la tarea usemin.
Así que volviendo al archivo gruñido después de imagemin,
voy a agregar en la siguiente tarea para que usemin trabaje con el gruñido.
La primera tarea que necesito configurar se llama UseMinPrepare.
Esta tarea UseMinPrepare preparará los archivos y luego también configurará
los plugins conCache CSS min y Uglify y ref de archivo,
para que puedan hacer su trabajo correctamente.
Por lo tanto, esa es la razón de USEminPrepare.
Por lo tanto, así es como se ha diseñado el plugin de concesión usemin.
Algo diferente de la forma en que el usemin que usamos con los scripts finales del juego wooks.
Entonces, en USEminPrepare,
solo algún nombre aleatorio que voy a usar y luego decir que el destino es dist.
Y luego especificaría la fuente como todos los archivos html aquí.
Así que diría contactus.html
, aboutus.html y index.html.
Por lo tanto, todos estos tres archivos deben ser procesados.
La siguiente parte de esta configuración de usemin, la configuración
UseMinPrepare es donde especifico las opciones.
Esto es algo que he descubierto por prueba y error.
Sólo tienes que seguir los pasos.
Así que necesito configurar
algunas cosas aquí dentro donde necesito configurar algo llamado Flow.
Y luego dentro de allí necesito configurar otra parte llamada Pasos,
y luego aquí especifico los pasos aquí y luego digo cssmin,
y luego diré que js es uglify.
Entonces, esto es algo que necesito especificar aquí y luego después de esto digo post,
y aquí puedo permitir que esto proporcione
algunas opciones para sus tareas específicas que he configurado.
Por lo tanto, estoy proporcionando algunas opciones adicionales para css.
Por lo tanto, eso se suministra dentro de la publicación aquí.
Ahora, de nuevo, así es como se tiene que hacer la configuración.
Por lo tanto, acabamos de aprender mirando la documentación allí.
Entonces, aquí dentro de la publicación css,
especificaría un nombre como cssmin.
Hasta ahora, esto aquí es una tarea cssmin.
Yo diría createConfig:
bloque de contexto de función, y luego dentro de esa función
tengo que proporcionar ciertos parámetros.
Por lo tanto, diría que
generador de opciones de contexto generadas por var.
Entonces, esta es una variable de JavaScript que necesito
especificar allí, objeto JavaScript esencialmente.
Por lo tanto, este objeto contiene esta propiedad llamada opciones,
donde puedo especificar algunas opciones que se pasan
a la tarea mínima CSS asignada por la tarea de preparación usemin.
Entonces, allí, mantenga
comentarios especiales y luego, la
rebase es falsa.
Aparentemente, necesito proporcionar esto para que mi tarea cssmin maneje actualmente
la impresionante modificación e inclusión de la fuente en el archivo concatenado.
Si no hago esto,
parece romper la fuente impresionante y esto es algo que descubrí,
haciendo un poco de
investigación sobre el desbordamiento de la pila y algunos de estos lugares y descubrí
que su problema que está siendo causado con la fuente impresionante se puede
arreglar incluyendo esto en mi configuración gruñido.
Por lo tanto, de nuevo acabo de buscar
las sugerencias de algunas personas que han intentado y solucionar el problema.
Por lo tanto, si te encuentras con problemas como este,
esta es una forma de resolver los problemas que podrían surgir cuando
trabajas con estas diversas herramientas.
Permítanme añadir la siguiente tarea para Concat.
Voy a especificar algunas cosas aquí y opciones.
Especifiqué este punto y coma,
por lo que esto es algo que necesito especificar para Concat,
y luego también después de
las opciones especifico dist como vacío.
Ahora estas opciones de Concat serán configuradas por el USEminPrepare que se ejecuta anteriormente.
Así que podemos dejar la mayor parte en blanco allí,
y luego eso sería reconfigurado por UseMinPrepare.
El siguiente es feo.
Dentro uglify también solo necesito especificar este dist como vacío.
Si no especifico estos,
entonces la tarea usemin no funciona correctamente.
Entonces, es por eso que necesito especificar todas estas cosas explícitamente.
Entonces, para cssmin también diría dist empty.
Y luego, la siguiente tarea que voy a configurar se llama filerev.
Entonces, me viste instalando el plugin filerev para Grunt.
¿ Qué hace este filerev?
Lo que hace el filerev es cuando usemin prepara el archivo main.css y main.js,
lo que filerev hace es agregar una extensión adicional a ese nombre principal, de
modo que cuando prepare una nueva versión de su sitio web y lo suba a la página web,
en caso de que alguien haya visto su sitio web antes,
entonces su navegador podría haber cobrado los archivos main.css y main.js.
Si no adjunta este filerev lo que sucede es que,
el navegador debajo descarga la nueva versión de su página web.
Puede que no descargue los archivos main.js y main.css
porque los encuentra ya en su caché local.
Por lo tanto, es posible que su página web no se renderice correctamente.
Por lo tanto, para lidiar con el problema,
lo que hacemos es cada vez que preparamos una nueva carpeta de distribución,
agregaremos una revisión de archivo.
Eso es lo que significa el filerev,
el número de revisión del archivo,
como una extensión adicional al nombre de esos archivos css y js.
El main.ss y main.js archivan el pre-preparado.
Así que eso es lo que hace el filerev.
Ahora, ¿cómo puede este filerev calcular este valor?
Toma el contenido de estos archivos y luego hace algún procesamiento y luego genera
un número md5 comprimido de 20 caracteres que se adjuntará al archivo principal.
Así que voy a configurar esa parte aquí.
Entonces, en las opciones,
especifico aquí diciendo cómo se supone que debe calcular este número allí.
Entonces, digo codificación utf8,
y luego digo algoritmo que usó para calcular este hash,
lo que llamamos como hash es md5.
Ahora, será más claro cuando ejecutemos
la tarea usemin y luego veamos lo que hace, longitud 20.
Entonces, volveré y explicaré qué
hace esto cuando ejecutemos la tarea usemin.
Así que, déjame terminar las opciones aquí y luego diría liberación.
Por lo tanto, necesito configurar algunas cosas más aquí y luego liberar,
y luego necesito especificar los archivos para los que mi filerev debería actuar.
Por lo tanto, yo diría archivos filerev.
Así que, dentro de aquí archivo.
Por lo tanto, está empezando a ver un patrón en la forma en que las cosas se especifican aquí.
Entonces, cuando especifique los archivos aquí,
dirá la fuente,
y luego allí especificará dist CSS
y luego estrella punto CSS,
y luego el siguiente dist js*.js.
Entonces, con esto, ha configurado el filerev.
Entonces, la parte filerev está configurada.
Y finalmente, tenemos que configurar la tarea usemin.
Entonces, para configurar la tarea usemin,
voy aquí abajo y digo usemin,
y aquí me permito especificar algunas opciones para la tarea usemin.
Entonces, aquí especifico html.
Entonces, aquí estoy especificando qué archivos necesita cambiar,
necesita actualizar.
Por lo tanto, los archivos que se han copiado en la carpeta de distribución.
Y el último es «dist/index.html».
Entonces estos son los tres archivos que se supone que debe procesar,
y luego algunas opciones para esto aquí.
Por lo tanto, las opciones que especificaré «AssetsDirs.»
Entonces, aquí es donde existen todos los activos que estoy usando.
Por lo tanto, existen los archivos CSS y JavaScript.
Entonces, especificaré «dist/css» y «dist/js».
Con esto, ha completado la configuración de la tarea «usemin».
A continuación, configuramos la tarea «htmlmin».
Para la tarea «htmlmin»,
especificamos el destino que es «dist», la carpeta de distribución
y el «htmlmin» a realizar en
todos los archivos HTML que están en esa carpeta de distribución.
Las opciones que especificamos para este estado que, diremos,
«CollapsedWhiteSpace: True» significa que
todo el espacio en blanco de los archivos HTML se colapsaría, de
tal manera que el [inaudible] contiene sólo el código HTML mínimo allí.
La modificación esencialmente elimina
todos los caracteres extraños de los archivos «htmlmin».
Ahora, también especificamos ese diccionario de archivos,
aquellos archivos que necesitan ser configurados.
Esto se especifica como destino, dos puntos, origen.
Por lo tanto, especificamos «dist/index.html»: «dist/index.html»,
lo que significa que el «index.html» en la carpeta de distribución
será [inaudible] y luego volverá a colocarlo en el archivo «index.html»,
también en la carpeta de distribución.
Del mismo modo, el «contactus.html» especificado allí y luego el
«aboutus.html» también especificado como se muestra en esa lista de archivos.
La razón por la que realizamos «htmlmin» después de terminar «usemin»
es porque «usemin» reemplazará todos los scripts
con el archivo principal «.js» y también todo ese
código CSS concatenado y combinado y reemplazado por el archivo principal «.css».
Por lo tanto, el «htmlmin» se realizará en
los archivos HTML resultantes después de que «usemin» haya completado su trabajo.
Así es como funciona esto en Grunt.
Por lo tanto, el Grunt «htmlmin» debe aplicarse después de que el «usemin» haya completado su trabajo.
Así que una vez que todos estos están configurados,
entonces un pequeño paso que tengo que hacer es volver aquí,
y luego donde especificamos para el «jit-gruñido»,
necesitamos especificar que este «jit-gruñido»,
recuerdas que introdujimos algo llamado
«USEminPrepare» [inaudible] por lo que necesita informar al «jit-grunt»
diciendo que la configuración «UseMinPrepare» que introdujimos va a ser
manejada por ese plugin «grunt-usemin» en sí.
Así que necesito especificar explícitamente, de
lo contrario, «jit-grunt» buscará un plugin Grunt «UseMinPrepare».
Entonces, para especificar eso,
diría «UseMinPrepare» y diría «gruñido usemin»,
esencialmente informando «jit-gruñido» diciendo que «UseMinPrepare» va a ser
manejado por el plugin «gruño-usemin» allí.
Finalmente, reconfiguremos la tarea de «compilación» en la parte inferior.
Bajando a esa tarea de «compilación» después de «imagemin».
Así que hicimos «limpiar», «copiar», «imagemin»,
luego la siguiente tarea que debería ejecutar es «UseMinPrepare» y luego después de
«UseMinPrepare» ejecutar «contacto», luego ejecuto «cssmin»,
luego ejecuto «uglify».
Así que ven que tenemos que hacerlo en un cierto conjunto de pasos.
Una vez que los «cssmin» y «uglify» se ejecuten, se
crearán los archivos principales «.css» y los archivos principales «.js».
Así que en este punto, voy a ejecutar el
«filerev» y luego finalmente ejecuto la tarea «usemin».
Así que ves los secretos: «limpia», «copia»,
«imagemin», «usemPrepara», «concat», «cssmin», «uglify».
En este punto, los archivos «.css» y «.js»,
los archivos principales «.css» y «.js» están listos.
Puedo hacer el «filerev» en ellos y luego finalmente ejecutar el «usemin».
Pero esto, guardemos los cambios y luego veamos
cómo la tarea de «compilación» realmente prepara la distribución.
[ inaudible] Al ir a nuestra terminal,
en el indicador escribo «grunt build» y luego espero a que se ejecuten todas las tareas.
Entonces vería que se ejecutará a través de todo el conjunto de tareas,
y luego, finalmente, cuando esté hecho,
simplemente especificará que todas las tareas están hechas.
Así que si desea volver atrás y mirar la secuencia de las tareas que se han completado,
puede simplemente desplazarse hacia atrás y ver lo que hace.
Primero limpia,
luego copia los archivos HTML,
luego copia los archivos de fuentes,
luego hace la tarea «imagemin»,
luego hace la «USeminPrepare»,
luego hace el «concat»,
luego hace el «cssmin»,
tanto la distribución como generado,
y luego hace el» uglify»,
luego «uglify» tarea, luego ejecuta la «filerev» y luego la tarea «usemin».
Y entonces nuestra carpeta de distribución debería estar lista.
Ir a nuestro editor,
ahora ve que la carpeta de distribución se ha preparado.
Veamos específicamente los principales archivos «.css» y «.js».
Anote los nombres de estos archivos.
Observe que después de main,
hay un punto y luego hay
un hash de 20 caracteres que ha sido agregado por «filerev» aquí.
Entonces, lo que sucede es que si preparo una nueva carpeta de distribución,
cada vez que preparo la nueva carpeta de distribución, este hash cambia,
lo que significa que cada vez que implemento una nueva versión de mi sitio web,
si algún navegador ha visto previamente mi sitio web, entonces sus entradas de caché,
donde podría haber almacenado en caché el principal «.css» y principal «.js» se ha
invalidado porque tenemos una nueva versión del principal «.css» y principal «.js».
Entonces el navegador volverá a descargar estas cosas.
No mostré el «filerev» con los scripts de NPM,
pero acabo de agregarlo aquí solo para mostrarle cómo se hace con el Grunt.
Así que con esto, completamos este ejercicio.
Echemos un vistazo rápido al sitio en nuestro navegador. Al
ir a su navegador,
puede ver que ahora estoy cargando en «dist/index.html».
Así que esto es de la carpeta de distribución,
así que estoy comprobando y se ve bien.
El «aboutus.html» también se ve bien, al igual que antes.
Y la página de contacto también se ve bien preparada para la implementación.
Así que con esto, completamos este ejercicio.
Después de todos los gruñidos,
estoy seguro de que necesitas recuperar el aliento.
Antes de hacer eso, asegúrese de hacer un buen comentario con el mensaje «Gruñido segunda parte».