Conjunto de desarrolladores front-end del caballero. Construye front-end en tus dedos usando Gulp Pleasant Frontend Project Build

24 de septiembre. , 2016

Se considerarán preguntas: Trabajar con estilos de SASS utilizando SOURCEMAPS, PENGUILLA Y COMPRESIÓN DE LOS ARTÍCULOS DE JS, AMPLIAMIENTO RECORDJS usando RJS, preprocesamiento de HTML, limpieza y copia de archivos, optimización de imágenes, levantando el servidor web local y el modo de observación - Watch-Tasch. Bienvenido al artículo, ¡habrá mucha interesante!
PD Material material, por lo tanto, el artículo se dividirá en 3 partes: conceptos básicos de montaje y organización de proyectos, solicitudes de prueba de escritura en la columna vertebral + requirt.js y en realidad montaje con Gulp.

¿Por qué necesitas un montaje de una frontend?

Uno de los principios más importantes en el desarrollo es la modularidad. Fracción del código del proyecto en muchas piezas de módulos pequeños, idealmente acoplados. Esto se refiere no solo al código JavaScript. Esto también se aplica a los estilos, y las plantillas HTML, a varias bibliotecas.

Esto puede parecerse a la estructura de una aplicación simple escrita en la columna vertebral +.

Y este es un pequeño proyecto de prueba, en anexo real Los archivos pueden ser cientos y miles. Haga que un navegador de usuarios haga cientos de solicitudes HTTP al menos inhumanas. Debemos proporcionar el máximo carga rápida Servicio escrito. Por lo tanto, una de las tareas más importantes de la herramienta de ensamblaje es un ministerio, una disminución en el número de archivos utilizados en el proyecto, pegándolos en las pandillas. En la salida, debemos tener una estructura más breve, por ejemplo, esto es:

La diferencia es bien notable: en lugar de docenas de archivos, tenemos un índice.html, un archivo CSS, imágenes optimizadas y comprimidas en una carpeta separada, aunque no es visible en la captura de pantalla :-)

Y también lo más interesante: en la carpeta JS, solo recibimos 3 archivos comprimidos.
PD Por qué tres, y no uno, le diré más tarde.
Observo que esta es la estructura real de la aplicación de prueba que pronto escribiremos.

Describí solo una razón para el uso de herramientas de ensamblaje, pero ya es suficiente para comenzar a usar Gulp, Grunt, WebPack o algo similar en sus proyectos. Y no importa si escribimos un gran servicio, un pequeño spa (como en nuestro artículo) o página de destino. Los principios de la asamblea son los mismos para todos los proyectos y difieren solo en una variedad de tareas y enfoques para resolverlos. En nuestro ejemplo, crearemos una estructura que pueda expandirse en el futuro, pero la salida siempre tendrá una pila de archivos limpia, lista para la salida a su producción: un sitio de combate.

Cómo organizar el proyecto correctamente.

El principio de esto: hay una sección con archivos de desarrolladores, se recogen y todo lo demás que este bien sirve. Cree 2 carpetas en la raíz del proyecto: SRC y construir. En el SRC y solo en el SRC, trabajaremos, crearemos nuevos archivos, editarlos y divertirse en general. En la captura de pantalla anterior, donde un par de docenas de archivos, consulta el contenido de la carpeta SRC de nuestro proyecto de prueba. Y justo debajo de algunos archivos ordenados de la carpeta de compilación. Se forma solo automáticamente, las herramientas de montaje, nada que gobernar allí. De todos modos, con cada ensamblaje, su contenido se mantiene mediante nuevos archivos (y en el modo de desarrollo de las carpetas de compilación, se elimina para no corpular los ojos)

Además de SRC y construir, la carpeta Package.json, GulpFile.js, la carpeta de Nodo_Modules y opcional, .gitignore (si está trabajando con GITZ) estará enraizado. Todavía tengo que notar la carpeta de registros: esta es una generación de Apache y una larga hábil de mantener los registros de proyectos en su propia carpeta, por supuesto, eliminándola del repositorio de Gita :-)

Así es como se ve la estructura del proyecto:

Según el contenido de construcción, creo que no hay preguntas, le explicaré en SRC más:

1. HTML - index.html, raíz archivo de índice. Proyecto. ¿Por qué no inmediatamente en la raíz de SRC? Porque se precargará y creará un trago. Cómo, aprender un poco más tarde, cuando está cerca de la asamblea.
2. IMG - Imágenes, no comprimidas, ordinarias.
3. JS - All JavaScript Dogging Project, modelos y presentaciones Backbone
4. LIB - Bibliotecas de terceros, como Background.js, Requery.js, Lodash.js y otros
5. Scripts: scripts JS que se necesitan en un sitio de combate, pero no es necesario en el modo de desarrollo. Significado de códigos para análisis, diversos experimentos y otras piezas de comercialización.
6. Estilos - Archivos SASS con estilos. El archivo CSS recolectado se plegará en la misma carpeta (solo para el modo de desarrollo)
7. TPL - TEMPLATES HTML. Vistas de columna vertebral usadas usando el complemento de texto RETECT.JS

La apariencia de la aplicación de prueba es bastante no recinta. Puedes decir que tal basura está hecha por un par. html filas y código CSS sin un solo archivo JS.
Pero perseguimos el objetivo de no dibujar una imagen hermosa y crear una estructura de proyecto confiable y considerar la mayor cantidad posible de aspectos aspectos. Cuando el proyecto se rompe a cientos de archivos, estaremos listos para este ataque y se las arreglaremos fácilmente con mayores volúmenes. Por lo tanto, a pesar de los pobres y la misión externa de la solicitud de prueba, aprenderemos los principios de la Asamblea para proyectos grandes y complejos.

Qué tareas de ensamblaje resolvemos.

Permítanme recordarle que hemos acordado dos modos de ensamblaje: desarrollo y producción. Escribiremos todas nuestras tareas, recordando estos dos modos. No se necesitamos todas las operaciones durante el proceso de desarrollo, y no todos en la Asamblea para la producción.

Aquí hay una lista de lo que haremos después de escribir una solicitud de prueba:

1. Limpiar archivos y carpetas de los resultados del ensamblaje anterior
2. Ensamblando CSS de archivos SASS, con compresión y sin
3. Conexión de SOURCCAPS a estilos, al mismo tiempo que le mostraré el ejemplo, por qué es necesario
4. Montaje JS-BANDL con RECTOJOS
5. Vinculación y compresión de archivos JS individuales (analistas)
6. PREPRENSIÓN HTML.
7. Optimización y compresión de imágenes.
8. Levante un servidor web local
9. Tareas de observación objetivas al trabajar en modo de desarrollo - Watch-Tasch
10. Colección algunas tareas En un montón - Tastes finales para el ensamblaje de producción y las obras de desarrollo.

Entonces, nos preguntamos por qué es generalmente necesario la frontestante, decidió sobre la estructura del proyecto, se desmantelaron en detalle que nos gustaría de la Asamblea y hablaron sobre la solicitud de prueba. En la siguiente parte del artículo, escribiremos una simple aplicación de backbone en conjunto con Requery.js. Si no está familiarizado con la columna vertebral y / o requiera .JS, no hay nada terrible. En realidad, el columna vertebral-USSOcode en la aplicación no es suficiente. Puede usar fácilmente su biblioteca favorita o simplemente escribir código en JavaScript / Jquery y omitir la sección Configuración de ReimesJS.

En aquellos días, cuando los sitios eran pequeños, no había necesidad de un montaje separado de la frontend. Sin embargo, el volumen y la complejidad de CSS y JS aumentaron, y la vista en la que es conveniente desarrollar, comenzó a diferir mucho de la visión en la que es necesario mostrar el resultado al usuario. Ha habido tales tareas como concatenación (pegado) de archivos, minimizando el código e incluso antes de la compilación. El resultado fue el sistema especializado para ensamblar la frontera, que diremos.

Por supuesto, tan pronto como se notifique la necesidad de un ensamblaje, inmediatamente las herramientas utilizadas por Backend comenzaron a transferirse a la frontend. Su principal problema es la razón por la que actualmente se usan menos para el frente, no se afilan completamente bajo su especificidad, ya que la estructura del proyecto, las tecnologías utilizadas y el ciclo de desarrollo dependen de las tareas del proyecto y pueden diferir significativamente . La misma hormiga, por ejemplo, tiene una sintaxis verbal y no se sabe particularmente cómo hacer las cosas necesarias para el frente: las tareas incorporadas bastante un poco, pero se expande mal. Si hablamos de GNU, es mucho más universal porque opera los comandos de Shell. De las desventajas, debe mencionar una sintaxis especial que debe estudiarse aún más, la necesidad de conocer bien el concha, así como la tendencia hacia la rápida complicación de Makefile con un aumento en los requisitos para la Asamblea.

Veamos el sitio del tamaño mediano con una estructura estándar e intenta enumerar las etapas principales del ensamblaje, que pasa. Para simplificar, supongamos que no se molesta con la creación de diferentes archivos JS para diferentes páginas, pero al mismo tiempo que desea mantener varios archivos pequeños en el entorno de desarrollo para respaldar cualquier modularidad. Por lo general, se parece a algo así:

/ libs / jquery.min.js underscore.min.js / js / common.js carousel.js popups.js ....

El sistema de montaje generalmente hace lo siguiente:

concatase todos los archivos JS a uno (en el orden deseado, no queremos descargar nuestros scripts antes de JQUERY);
verifica el código JS en validez (por ejemplo, usando jshint);
minimiza el código, si es necesario, se describirá (es decir, hace incomprensible);
crea archivos CSS (el pedido aquí también es importante, ya que las propiedades a menudo se redefinidas);
minimiza CSS;
folga los archivos en un directorio separado desde el cual los conecta en su HTML.

A menudo, este esquema simple se complica con requisitos adicionales: se accionan las pruebas, se compilan los preprocesores CSS, las imágenes se optimizan, las plantillas se compilan.

Todas estas tareas, y aún más, son capaces de resolver herramientas de montaje modernas. Consideraremos las soluciones más populares que trabajan en la plataforma node.js. Su ventaja es un lenguaje claro que sabe (o cree que conocen todos los desarrolladores frontends, el enfoque inicial en la solución de las tareas de la frontend, así como un entorno claro de Nodo.js en el que ya puede estar desarrollando su solicitud .

Gruñido.

Grunt es la herramienta más antigua, más importante y popular para el montaje. Casi todo el sistema de ensamblaje en consideración, de una manera u otra se compara con la graca, y algunos han surgido como alternativas más rápidas o simples. A pesar de esto, tiene un par de fallas esenciales.

Primero, como dicen muchos desarrolladores frontend, se elige gruñidos. Para configurar un sistema de ensamblaje simple, necesitará una configuración bajo las cien líneas. Sin embargo, en sí mismo, esta no es una deficiencia de este tipo: la configuración se lee con bastante facilidad, y en virtud de la popularidad de Grunt, generalmente no es posible encontrar una configuración listaizada en la tarea modelo.

En segundo lugar, Grunt se desarrolló como un producto universal, es decir, por su base, es posible resolver casi cualquier tarea asociada con la Asamblea del Proyecto. Es genial, pero la versatilidad tiene que pagar. Ambos mencionan la múltiples resistencia y la velocidad. En comparación con otros sistemas de ensamblaje en el nodo.js, gruñidos notablemente más lentos, y, especialmente desagradables, tienden a disminuir la velocidad a medida que el proyecto crece. Si no entra en los detalles de la arquitectura de Grunt, entonces la razón está en el hecho de que cada vez que necesita recopilar, por ejemplo, el archivo JS, reenventa a todos los archivos JS. Puede intentar acelerar el proceso de montaje, hablando enlaces manualmente necesarios entre los archivos, pero en un proyecto con un árbol de dependencia de archivos complejo puede ser demasiado complejo.

A pesar de todo esto, Grunt tiene un enorme ecosistema: cientos de complementos, miles de proyectos, miles de millones de desarrolladores, eso es todo. Es decir, no es suficiente que Grunt sea universal, también un complemento para su tarea, lo más probable es que se escriba.

Summando, podemos decir que Grunt es una excelente opción para proyectos pequeños y medianos, especialmente si antes no estableció ningún sistema de ensamblaje. Una enorme comunidad, un montón de complementos, documentación comprensible e incluso artículos e informes en ruso para aquellos desafortunados que no pueden sin ella. Y, por supuesto, si en el futuro por alguna razón, deja de dejar de organizarlo, siempre puede ir a otro sistema, privado de sus fallas.

Trago.

Gulp - que se desarrolla actualmente en el sistema de ensamblaje de momento. La base de su arquitectura es el uso de arroyos en NOde.js, que le permite no registrar archivos y carpetas temporales en el disco. Las principales ventajas del triturador: la velocidad y la dificultad de la configuración. Además, si la primera es indudablemente, la brevedad en comparación con la graca se logra simplemente debido a su otra estructura. Si está en la configuración Grunt, usted funciona individualmente con complementos, ajustando cada uno de ellos, luego en la configuración de Gulp, debe describir el proceso que se debe recopilar cada archivo (o un conjunto de archivos). Aquí hay un ejemplo de vida de compilación SASS:

Gulp.Task ("Estilos", Función () ("Estilos / *. SCSS") .Pipe (SASS (SASS (STYLE: "expandido"))). PIPE (Cambiar nombre ((Sufijo: ".min"))). Tubería (Minifycss ()) .Pipe (Gulp.Dest ("Build / Styles / CSS"))));

En la primera línea, registramos la tarea de Gulp con los estilos de nombre. Luego describimos constantemente lo que necesita hacer con cada uno de los archivos adecuados para las máscara de estilos / *. SCSS: compila SASS, ADD.MIN al nombre del archivo, Minimice, colóquelo en el directorio final. Si necesita hacer otra cosa con este archivo, simplemente agregaremos el comando correspondiente, por ejemplo.pipe (agregue un comentario con un unicornio ASCII al inicio del archivo) (espero que esta tarea cotidiana, finalmente, plugin). Me gusta este enfoque para escribir la configuración más: describe mejor lo que realmente sucede con sus archivos.

Por supuesto, mientras que Gulp pierde gruñido por el número de complementos, pero hay tareas de complemento. Lo más probable es que tenga suficientes complementos existentes, y si hay algo muy malo, siempre puede escribir su propio (broma). Por cierto, hay un paquete de Gulp-Grunt que le permite ejecutar tareas de grano de Gulp, si es muy necesario.

Si le gusta un enfoque similar para el ensamblaje, la velocidad es importante y usted no necesita realizar tareas específicas, el complemento para el cual es solo para gruñir, luego el gulbo puede convertirse en una excelente opción. En este momento, Gulp sigue siendo el competidor de grut más grave.

Broccolli.

La más joven de las herramientas de ensamblaje en consideración es ahora, de hecho, en la etapa de desarrollo. Los desarrolladores de Broccolli no ocultan que Gulp se inspiró, pero consideran algunos conceptos subyacentes, erróneos. Por ejemplo, eligieron el almacenamiento en caché de todos los resultados del ensamblaje intermedio (e implementado por cada uno de los complementos) para acelerarlo en lugar de una rebelación parcial de solo los archivos requeridos. Tampoco les gustó que ese Gulp se operara mejor con la transformación de un archivo en una final, es decir, una a una. Para mejorar la ejecución de las operaciones del tipo "mucho a uno", en este momento se está desarrollando Gulp. esquema complicado Con la creación de un sistema de archivos virtuales que los desarrolladores de Broccolli parecen un exceso de complicaciones y la manifestación de la debilidad de los conceptos genuinos de Gulp. Broccolli inicialmente opera los conceptos de árboles en lugar de archivos y solo hace la transformación de árboles a otros árboles (incluso degenerados y de un vértice).

Un enfoque teórico muy razonable para el problema de la Asamblea no elimina los problemas del número de extensiones a Broccolli. Desafortunadamente, son de dos docenas y se cumplen solo las tareas más básicas. Si quieres probar algo nuevo, mira a Broccolli, es bastante rápido, se está desarrollando activamente, pero es probable que sea para su uso en proyectos serios.

Desayuno tardío

El brunch se creó con la misma tarea, para dedicar grano en todos los frentes, pero se acercó completamente al otro lado. Los desarrolladores de Brunch decidieron tomar una buena comprensión del área temática, es decir, hacer una herramienta menos universal que se afilará con precisión en las tareas del Fronténdum, por ejemplo, sin ninguna configuración, entiende que * .js es un archivo Con scripts, * .coffee - Coffeescript y así sucesivamente. El brunch es bastante rápido, mucho más rápido gruñido, pero un poco más lento. Las ventajas incondicionales del brunch también deben incluir una configuración realmente compacta, menos que la de Grunt y Gulp, son a veces. Aquí, por ejemplo, un brunch de configuración simple:

Exports.config \u003d Archivos: Javascripts: JAILLO: "JAVASCRIPTS / APP.JS": / ^ APLICACIÓN / "JAVASCRIPTS / VENDOR.JS": / ^ (BOWER_COMPONENTES | VENDADOR) / STYLESHEETSHEARS: JOINTO: "STYLESSHEETS / app.csss" : Después: ["Vendedor / Estilos / Ayudantes.css"] Plantillas: Junto: "Javascripts / App.js"

Tenga en cuenta que la configuración se puede escribir tanto en Coffeescript (ambos en este caso) como en el JS habitual. Creamos un módulo regular que devuelve JSON con la configuración del ensamblaje.

Preste atención a las llaves de Junto con Junto, Orden. Este es el conocimiento del área temática, que mencioné es, en el nivel de configuración del brunch, sabe que lo más probable es que quiera pegar archivos, y algunos antes del resto. Esto es exactamente lo que le permite reemplazar 400 líneas de la configuración de Grunt en 20-30 líneas de brunch.

Además, el ecosistema de brunch es mucho más pequeño que gruñido e incluso con el trago. Plugins Alrededor de 50 (Compare con 450+ en Gulp, por ejemplo), el desarrollo no es muy rápido, en general, todo está bastante triste aquí.

Summing Up: Si realmente le gustan las configuraciones cortas, la velocidad es importante, pero si no necesita pasos especiales en la etapa de ensamblaje, puede ver el brunch. Confundido, por supuesto no un gran número de Los complementos, pero tal vez la situación cambiará.

Enb.

Bueno, al final es el más dulce. Quiero contarle sobre el sistema de montaje desarrollado en Yandex Marat Dulin, que se llama ENB. Es ella ahora y utilizamos nuestro proyecto. Su enfoque es fundamentalmente diferente de todos los sistemas descritos: inicialmente se creó para trabajar con proyectos utilizando la metodología BEM, aunque, como señala el autor, su plataforma está libre de la ideología de BEM y se puede utilizar para todos los proyectos de una estructura adecuada. .

Brevemente, ¿cuál es la esencia? En la ENB operamos el concepto del objetivo, es decir, el archivo final que se recopilará, o los nodos (carpetas, en el caso general), para las cuales necesita recopilar algunos archivos de archivos. Para recopilar el archivo de destino, utilizamos algunas tecnologías (aproximadamente hablando, los complementos en términos gruñidos, aunque las tecnologías son más pequeñas y se especializan. El primer ENB está determinado por el conjunto de fuentes de archivos que se necesitan para crear objetivos (varias tecnologías básicas están activadas, de forma predeterminada, trabajando con la metodología BEM, es decir, están buscando * .BEMDECL-FILE, en el que la dependencia De este nodo de diferentes bloques se detalla este árbol de dependencia (cuando depende del bloque, en el que depende su página, depende del otro, ambos están conectados en el orden deseado), y luego encuentran los archivos necesarios para cada tecnología registrada. El ENB sigue la secuencia de transformación de archivos descrita en la configuración (aquí puede rastrear una analogía con Gulp). A pesar de algunas diferencias del enfoque del sistema de ensamblaje estándar, aleccionar con conceptos básicos, luego trabajar con ENB es bastante fácil.

Las principales ventajas de la ENB: la tasa de montaje, debido al sistema de almacenamiento en caché flexible y la capacidad de intercambiar datos intermedios entre diferentes tecnologías, paralelización de procesos independientes, y asignación de las tecnologías más severas en subprocesos separados. El ENB es extremadamente fácil de escribir nuevas tecnologías si no le gusta el comportamiento de la norma.

Las desventajas incluyen el hecho de que la configuración ENB es bastante verbosa, ya que es posible administrar absolutamente todas las etapas de montaje. Además, Enb todavía estaba escrito para la metodología BEM, y la sujetarlo al proyecto con una estructura completamente diferente requerirá televisiones innecesarias. Para ENB, no hay tantas tecnologías escritas (alrededor de 60), pero con la mayoría de las tareas de los proyectos BEM, se enfrenta a una explosión.

Summing Up: ENB - la mejor decision Para proyectos basados \u200b\u200ben la metodología BEM, que personalmente considero los más adecuados para sitios medianos y grandes, desde la organización del Código para Bloques Rolls y Bibic. Es muy rápido, recopila docenas de páginas y cientos de archivos para contar segundos, simple en la configuración y agradable de usar. Si su proyecto es grande, está confundido en el código y las reglas de archivos en mil filas, le aconsejo que explore BEM como una forma de organizar la estructura de los proyectos Frontend. Y cuando amas a Bem, te encantará y se enamorará como la herramienta más nativa para reunir proyectos BEM.

¿Quieres marcar más puntos en la velocidad de página de Google? ¿No sabe qué tipo de asamblea de "front-end"? Entonces usted aquí será interesante.

¿Qué es el nodo.js?

Node.js es habitual llamado "Northern Javascript". Esta plataforma le permite escribir programas utilizando la sintaxis de JavaScript.

Hay implementaciones para Windows, Mac OS y Linux.

El kit incluye un administrador de paquetes. Npm.Con el que puedes instalar paquetes.

¿Qué es el gulp?

Gulp es un paquete escrito en nodo.js, que ayuda a los webmasters a construir proyectos en el diseño del diseño.

Para instalar Gulp, debe usar la línea de comandos.

NPM Instale el trago.

Al final de este artículo hay un archivo que ayudará a recopilar un proyecto típico.

En este ejemplo, con Gulp, haremos lo siguiente:

Optimizar automáticamente las imágenes para la web;
Recoger un mínimo de estilos de Precrosores (SASS, SCSS);
Recoge un archivo mínimo con scripts.

¿Cómo recoger un front-end utilizando Gulp?

Para entender cómo funciona todo, examinaremos todo en pasos.

La estructura se puede ver en la captura de pantalla.

Carpeta Activos - Para fuentes de imagen, estilos y guiones;
Carpeta pública: el resultado de la Asamblea del Proyecto se ubicará en ella;
gulpfile.js - un archivo que describe la lógica del trabajo del trabajador;
package.json es un archivo que contiene información sobre programas y complementos utilizados para el funcionamiento correcto de Gulp.

package.json.

Contenido del archivo:

("Nombre": "Gulp_Project", "Versión": "1.0.0", "Descripción": "Ejemplo", "Main": "GulpFile.js", "Scripts": ("Prueba": "Echo \\" Error: No hay prueba especificada \\ "&& SALIR 1"), "Autor": "Dmitriy Ilichev", "Licencia": "ISC", "Devdependences": ("Gulp": "^ 3.9.0", "Gulp-CSSO ":" ^ 1.0.0 "," Gulp-concat ":" ^ 2.6.0 "," Gulp-Uglify ":" ^ 1.2.0 "," Gulp-Imagemin ":" ^ 2.3.0 "," Gulp -Sass ":" ^ 2.1.1 "))

Este archivo está claro de la siguiente manera:

Nombre del proyecto Gulp_Project, versión y descripción;
El archivo principal es GulpFile.js;
El autor del proyecto, la licencia, todo esto no es tan importante y simplemente estos campos pueden estar vacíos;
Un punto interesante son las devdependencias. Describe las dependencias.

Archivo puede ser editado en lo habitual editor de texto. También se puede crear para el nuevo proyecto por el comando NPM INT.

Sobre la base de esto, Node.js entiende que tendremos que trabajar:

Versión de Gulp 3.9.0 y superior para el montaje;
Gulp-CSSO versión 1.0.0 y superior: plugin a ministerizar estilos (CSS);
Gulp-Concat Version 2.6.0 y superior: plugin para pegar múltiples archivos a uno;
Gulp-Uglify versión 1.2.0 y superior - Plugin para minificar JavaScript;
Gulp-Imagemin versión 2.3.0 y superior: plugin para optimizar imágenes;
Gulp-Sass versión 2.1.1 y superior: plugin para obtener CSS de SASS (SCSS).

¡Excelente! Después de eso, necesitas instalarlo todo. Esto esta hecho línea de comando. Mientras que en la carpeta del proyecto necesita para ejecutar el comando:

NPM Install

Todas la información necesaria se tomará de Package.json.

Después de toda esta magia, aparecerá la carpeta de servicio de Nodo_Modules.

gulpfile.js.

Contenido del archivo:

/ * * * Determine las variables * * / var gulp \u003d requieren ("gulp"), // reportó Gulp JS Uglify \u003d Requerir ("Gulp-Uglify"), // MINIFICE JS CONCAT \u003d REQUIERE ("GULP-CONCAT") , // Archivo pegado ImageMin \u003d Requerir ("Gulp-Imagemin"), // Minificación de CSSO \u003d Requerir imágenes ("Gulp-CSSO"), // Minificación CSS SASS \u003d Requerir ("Gulp-Sass"); // Conversión de SASS (SCSS) en CSS / * * * Crear tareas (gustos) * * /// Tarea de SASS. Lanza el comando Gulp Sass Command Gulp.Task ("sass", función () (gulp.src ("./ activos / estilos / style.scssss") // Archivo que procesa.Pipe (SASS (). ON ("ERROR" , SASS.LOGError)) // Convierte a SASS en CSS. Pipe (CSSO ()) // Minifusión CSS, obtenida en el paso anterior. TUBO (GULP.DEST ("./ PUBLIC / CSS /")); Escribimos en la dirección especificada); // Tarea "JS". Lanza el comando Gulp JS Gulp.Task ("JS", Función () (Gulp.SRC (["./sets/javascripts/jquery-2.1.4.min.js", "./assets/javascripts/bootstrap. Min .js "," ./assets/javascripts/script.js "]) // Archivos que proceden. Pipe (concat (" Min.js ")) // pegamento todos los JS .Pipe (Uglify ()) // el resultado "Puerto" miniFízi.com (Gulp.Dest ("./ Public / JS /")) // Resultados Escribimos en la dirección especificada); // problema "Imágenes". Lanza las "imágenes del tritante" por gulp.task ("imágenes", función () (gulp.src (". Activos / imágenes / ** / ** / ** / ** / *") // Tomamos archivos en la carpeta y sus subcarpetas. Tubería ( Imagemin ()) // Optimizamos las imágenes para la web. TUBO (GULP.DEST ("./ PUBLICO / IMÁGEN / IMÁGENES /")) // Resultados Escribimos en la dirección especificada); // Tark "Watch". Se inicia el comando "Gulp Watch" // Monitorea los cambios en los archivos y comienza automáticamente las otras tareas de Gulp.Task ("Watch", Function () (// cuando cambia los archivos * .scss en la carpeta de estilos y las subcarpetas Ejecute la tarea de Gulp de SAS. Mire ("./ Activos / estilos / ** / *. SCSS", ["SASS"]; // Al cambiar la carpeta de archivos * .js "Javascripts" y las subcarpetas ejecutan el Gulp de JS. Tarea de reloj ("./ Activos / Javascripts / ** / *. JS", ["JS"]); // Cuando cambie ningún archivo en la carpeta "Imágenes" y las subcarpetas, inicie las imágenes Gulp.Watch Tark (" ./ Activos / imágenes / ** / * ", [" imágenes "]););

Chip principal - en la tarea mirar.. Después de ejecutarlo una vez, puede trabajar con seguridad con fuentes, y el proyecto se recopilará automáticamente cada vez que guarde los archivos editables.

En la salida, nos preparamos para publicar la plantilla en Internet.

Las tareas se pueden iniciar por separado. Como resultado, en el archivo al final del artículo encontrará lo siguiente:

! Nota Para desempacar este archivo, en primer lugar, deberá ejecutar el comando de instalación de NPM. Esta carpeta contiene una cantidad bastante grande de archivos, y cada vez que los copia / pégalos, una pérdida de tiempo.

En custodia

Hay un conjunto enorme de otros complementos útiles. Por ejemplo, una maravillosa plantilla de jade, que a veces está acelerando la escritura código HTML, Alguien puede necesitar menos y así sucesivamente.

El ejemplo presentado es solo una plataforma y una plantilla de la que es posible comenzar a usar todas estas hermosas fichas sin mucho conocimiento.

EN Últimamente Trago. Ganando gran popularidad, y está claro por qué. Es más rápido, más hermoso y más fácil que Gruñido.. Tuve que trabajar con él a menudo, pero siempre tomo soluciones listas Y no entendió completamente cómo lo hizo todo. En este fin de semana, decidí desmontarlo y cerrar esto. pequeño problema. Toma esto y habla hoy.

¿Qué es el gulp?

Gulp es una herramienta de montaje frontal. Le permite automatizar las tareas de repetición (ensamblaje y minificación de archivos CSS y JS, pruebas de lanzamiento, reiniciar navegador y otros). Por lo tanto, el Gulp acelera y optimiza el proceso de desarrollo web.

Instalación de Gulp.

Instalar el gulp es bastante fácil. Si algo no funciona, escriba en los comentarios o mata su problema. Así que para la instalación necesita hacer 3 pasos:

Instalar Gulp Global
Instale el Gulp como devdependencias (dependencias para el desarrollo)
Crea un archivo gulpfile.js

El primer paso es instalar Gulp a nivel mundial. Abra el terminal y escriba:

nPM Instalar - Gulp GOBOBAL

Después de eso, debe instalar Gulp como devdependencias para su proyecto. Asegúrese de tener un archivo Package.json. Si no lo es, entonces crealo escribiéndolo en la consola de inicio de NPM. Ahora puedes instalar Gulp como devdependencias:

nPM Install - Gulp de Save-Dev

Finalmente, debe crear GulpFile.js en la raíz de su proyecto, que contendrá sus tareas (tareas). Como un paso intermedio, instalaremos el complemento Gulp-UTIL. Para mostrar cómo se instalan los complementos:

nPM Install --Save-Dev Gulp-Util

Ahora ha llegado el momento de escribir nuestra primera tarea. Abra el archivo gulpfile.js recién creado y escríbalo de la siguiente manera:

/ * Archivo: GulpFile.js * / // recoger todos nuestros complementos var gulp \u003d requieren ("gulp"), gutil \u003d requieren ("gulp-util"); // Crear una tarea que se ejecutará por defecto Trago. Tarea ("Predeterminado", Función () (devuelva Gutil. Log ("Gulp se está ejecutando"));

Y ahora tenemos que lanzar Gulp en la terminal y veremos algo similar a él:

\u003e Gulp [12:32:08] usando gulpfile ~ / proyectos / gulp-scotch-io / gulpfile.js [12:32:08] Inicio "Predeterminado" ... [12:32:08] ¡Gulp está funcionando! [12:32:08] Terminado "predeterminado" después de 1 ms

Descripción general

El en sí mismo es muy escamas en las oportunidades. Pero todo lo que tienes que poner en complementos separados. Ellos junto con el gulp están creando milagros.

La API del trámite es muy pequeña, y solo contiene 4 funciones de orden superior:

gulp.Task.
gulp.src.
gulp.dest
gulp.watch

gulp.Task define nuestras tareas. Se llaman los argumentos, la dependencia (matriz) y la función (acciones principales). Las dependencias pueden no ser:

trago. Tarea ("MyTask", Función () (// Hacer algo)); Trago. Tarea ("Dependiente", ["MyTask"], Función () () ( // Hacer algo después de "MyTask" será ejecutado });

gulp.SRC indica los archivos que queremos usar. Usa. Acceso a tuberías a archivos a través de complementos.

gulp.Dest apunta a la carpeta en la que queremos guardar los archivos modificados.

gULP.SRC y GULP.DEST se utiliza para una copia simple de los archivos:

trago. Tarea ("copyhtml", función () ( // Copiar todos los archivos HTML de Fuente / Público / Trago. SRC ("Fuente / *. HTML"). Tubo (Gulp. Dest ("público")); ))

En Gulp, se construye un sistema de respuesta de respuesta a archivos (Gulp.Watch). Puede usar esta tarea para iniciar las otras tareas que necesita cuando cambie los archivos.

Los ranners de tareas y los sistemas de ensamblaje están altamente acelerando el trabajo, automatizando la compilación, las pruebas y otras tareas de rutina. Como en cualquier otra área, hay una fuerte competencia en este mercado. Hasta 2014, la tarea Ranner Grunt dominó entre ellos, pero más tarde, un pequeño equipo se separó del proyecto, que decidió hacer una herramienta alternativa, un conjunto de proyectos orientados a la herramienta.

Para ayudarlo a decidir sobre la selección, en el marco del artículo, considere los principales gerentes de tareas:

gruñido.

y también toque otros medios y construir métodos.

Mirando un poco por delante, digamos que usamos Gulp en Waveaccess. Implementar la herramienta resultó ser muy fácil: en la familia de los productos de JetBrains (Idea, WebStorm, RESHARPER), que hemos estado usando muchos años tienen excelentes complementos para trabajar con Gulp / Grunt y NPM / Nodejs.

Gestor de tareas vs. Sistema de ensamblaje del proyecto: ¿Cuál es la diferencia?

Administrador de tareas - Herramienta para automatizar tareas. En la configuración de Borneers, puede registrar los nombres de estas tareas; la función que los realiza; Los complementos para acelerar las acciones estándar, pero las tareas en sí pueden ser arbitrarias. Por ejemplo:

Tareas de despliegue (Proyecto ZIP, carga del proyecto en servidor remoto etc.)
Tareas de ensamblaje del proyecto (minificación, optimización, código de verificación para validez y TP)
Tareas para la migración de datos, etc.

Ejemplos de tales herramientas - Grunt y Gulp.

Sistema de montaje - Esta es una herramienta que resuelve solo una tarea típica del conjunto del proyecto en el script de Java, que incluye:

concatenación,
código de control de validez,
minificación del código, y TD.

Las herramientas similares incluyen WebPack, brócoli, brunch, navegación y otros.

Todas las tareas frontend similares se pueden realizar automáticamente usando otros medios: por ejemplo, utilizando la ejecución de NPM, que también hablaremos en el artículo.

Ejemplo

Considere un archivo de trámite para ensamblar el proyecto:

Const Gulp \u003d Requerir ('Gulp'); Const Coffee \u003d Requerir ('Gulp-Coffee'); Const concat \u003d requieren ('gulp-concat'); Const Uglify \u003d Requerir ('Gulp-Uglify'); const imagemin \u003d requieren ('gulp-imagemin'); Const SourCemaps \u003d Requerir ('Gulp-SourceMaps'); const del \u003d requiere ('del'); )

Pero la asamblea es un caso especial de una gran tarea típica. Para Gulp, puede escribir otra configuración, por ejemplo, para implementar:

Var gulp \u003d requieren ("gulp"); VAR ZIP \u003d Requerir ("Gulp-Zip"); var del \u003d requiere ("del"); Var install \u003d Requerir ("Gulp-Install"); var carrernce \u003d requieren ("Secuencia de ejecución"); Var awslambda \u003d requieren ("nodo-aws-lambda"); gulp.task ("limpio", función (CB) (DEL (["[" DIST "," ./dist.zip "], CB);); gulp.task ("Copiar", función () ("index.js") .pare (Gulp.Dest ("dist /"));); Gulp.task ("nodo-mods", función ("./ PAQUETES.JSON") .PIPE (GULP.DEST ("DIST /")) .PIPE (instalar ((producción: verdadero))))); // Limpiar todos los directorios AWS-SDK de NODE_MODULES. Nosotros, no necesitamos cargarlos, ya que la instancia de Lambda ya estará disponible a nivel mundial. Gulp.Task ("Clean-AWS-SDK", Función (devolución de llamada) (Del (["DIST / NODE_MODULES / ** / AWS-SDK "], devolución de llamada);)); gulp.task (" cremallera ", función () (return gulp.src ([" DIST / ** / * ","! DIST / PAQUETE.JSON "]) .Pipe (ZIP ("Dist.zip"). Pipe (Gulp.Dest ("./"));); gulp.task ("carga", función (devolución de llamada) (awslambda.deploy (". / Dist .zip ", requiera (" ./ lambda-config.js "), devolución de llamada);)); gulp.task (" implementación ", función (devolución de llamada) (devolución de la pista ([" limpia "], [" Copiar "] , ["nodos-mods"], ["Clean-AWS-SDK"], [ZIP "], [" Subir "], devolución de llamada););

A puede ser descrito por nuevas tareas como una combinación de los existentes:

Gulp.task ('implementación', gulp.series ('limpia', 'Copy', 'Nodo-Mods', 'Clean-AWS-SDK', 'ZIP', 'Subir'));

Esta es la diferencia. Ahora considere las herramientas básicas.

gulp vs. Gruñido.

Entonces, frente a nosotros son dos tareas Ranner: Gulp y Grunt. Ambos son utilizados por NODE.JS y NPM, y ponen las tareas utilizando JavaScript.

Sin embargo, a primera vista, son similares, sin embargo, Gulp tiene algo que lo hace más conveniente para ensamblar: la habilidad es paralela a las tareas de proceso y una configuración compacta, la API Lacónica. Veamos más cerca de su principio de trabajo.

Datos de subprocesos

Tenemos un archivo de subvención que hace que el ensamblaje y el procesamiento de CSS.

Puede verse de ella que gruñe al iniciar cada proceso:

abre el archivo;

lanza proceso;

ahorra cambios;

cierra el archivo procesado para evitar el siguiente proceso;

registra el archivo a la carpeta final.

Es decir, la cadena incluye crear múltiples carpetas temporales y guardar archivos intermedios:

Los complementos escriben diferentes autores. Para cada complemento puede funcionar con archivos, pasar por alto, los archivos deben enviarse como objetos. En Gulp, esta tarea es realizada por el sistema de archivos virtuales Vinyl-FS. Y Gulp inmediatamente envía el archivo al siguiente proceso sin crear archivos temporales y sin guardar en el disco.

La misma configuración para Gulp ya es más compacta:

Su mecanismo de trabajo general: transmite archivos sin escribir en el disco:

Secuencia de ejecución de tareas

Hay otra diferencia: el trago de forma predeterminada realiza las cosas de forma asíncrona. Hay ventajas en esto, y contras. En el mismo archivo de configuración, leemos el comando para contar los archivos del directorio DEV / * SCSS y enviarlos a SASS.

Los arroyos envían el resultado de V.Pipe. Método. La tubería le permite recopilar el resultado en el búfer en partes, y cuando está lleno, envíe inmediatamente información a la secuencia para leer, sin terminar la recepción del contenido del directorio.

La ejecución de tareas secuenciales hace que el tragape sea rápido y poderoso, pero ocasionalmente la necesidad de desempeñar las tareas sincrónicamente como en gruñido. El problema se puede resolver a través de la devolución de llamada, la devolución de la corriente o la promesa. La tarea de Habré es desmantelada con más detalle. Hay una alternativa en el sitio npm.js

Si usa Grut, pero se siente atraído por los datos de transmisión: se puede usar el mismo módulo Vinyl-FS para implementarlo en Grunt.

El Gulp Laconic API tiene solo 5 métodos:

Tarea (nombre, fn). Registra una característica nombrada. Puede especificar la dependencia de otras tareas si necesita ejecutarlas primero.

Correr (tareas ...). Realiza tareas.

Reloj (Glob, FN). Realiza una función si el archivo en el lugar del globo cambia.

SRC (Glob). Como parámetro toma la máscara de archivos y devuelve el hilo que representa estos archivos. Luego, el flujo se puede transferir al complemento de entrada.

DEST (carpeta). Guarda archivos a la carpeta especificada.

Me gustaría especialmente observar la presencia de .WATCH () en la API del proyecto "nativo", ya que el seguimiento de los cambios constantes en los archivos es el componente más importante del ensamblaje. El resumen de la API permite concentrarse en su tarea principal para reunir proyectos.

Alternativas tragador y gruñido

A pesar de la popularidad de Gulp (más de 130 para descargas por día) y Grunt (más de 86 para descargas por día, según NPMJS.com), los desarrolladores ven en estos sistemas y sus inconvenientes: por ejemplo, la dependencia de los complementos, incompleto Documentación, depuración incómoda. Alternativamente, puede considerar los sistemas de ensamblaje del proyecto (como el brócoli y la mochila) o los scripts de NPM.

Sistemas de ensamblaje del proyecto

Considerar varios soluciones alternativas en la plataforma node.js. Para ensamblar el proyecto, pueden reemplazar el trago y el gruñido.

Este sistema, como el triturador, surgió como una tarea competidora, un gruñido temprano, pero los desarrolladores inicialmente lo concibieron precisamente como asistente de construir con todas las ventajas y desventajas. No "entenderá" sin ajustes, ese * .js es un archivo con scripts, * .coffee es Coffeescript; Su configuración es más compacta. Sin embargo, cualquier acción arbitraria en la etapa de ensamblaje, no podrá comprometerse.

Aquí está el brunch del archivo de configuración. Está escrito en Coffeescript (también puede escribir en JS):

Aquí quiero prestar atención a los operadores conjuntos y pedidos. En el nivel de configuración del brunch, parece que tiene que recopilar archivos en el pedido deseado. Como resultado, la configuración toma 20-30 líneas.

Brócoli.

Indi-herramienta, que está en desarrollo. Sus desarrolladores querían crear competencia ya gulp.

En comparación con el trago, la herramienta de brócoli usa otros principios:

Asamblea de aceleración. Cada complemento implementa un almacenamiento en caché intermedio de los resultados del ensamblaje en lugar de rebelarse parcial solo los archivos necesarios.

Árboles en lugar de archivos. Gulp es mejor transformar un archivo en una final. El broccolli predeterminado usa solo árboles, no archivos, y los transforman en otros árboles (degeneran de un vértice).

En este momento, la herramienta se está desarrollando activamente, aparecen nuevos complementos, pero para proyectos serios es demasiado temprano: los complementos no son suficientes.

WEBPACK - FLEXIBLE sistema modular montaje. Tiene una sintaxis inusual, pero a sí misma adopta las sintaxis de cualquier módulo.

Entendiendo que tiene que competir con los gigantes como Gulp, los creadores decidieron facilitar nuestra vida en el desarrollo de grandes proyectos. Y agregado a la utilidad:

La capacidad de construir automáticamente dependencias y recursos de madera.

Herramientas cómodas para la implementación de la carga dinámica.

Compatible con prácticamente cualquier módulo (AMD, UMD, ES 2015, JS comunes, módulos de terceros basado en ellos).

Compatibilidad con preprocesadores (SASS, BABEL, CAFÉ Script, Script tipo, etc.).

Reload en vivo (tecnología de arranque asíncrona, en la que el navegador actualiza no las páginas completas, sino las aplicaciones separadas).

La capacidad de compartir el código y generar muchos archivos de los paquetes, evitando la creación de un grupo pesado.js.

Capacidad para optimizar el código.

Por separado, puede notar un enfoque flexible para las dependencias. El módulo puede ser el archivo JS, CSS y HTML, e incluso JPEG con PNG. Puede usar Requerir ("myjsfile.js") y requieren ("mycssfile.css"), compartir y usar partes del artefacto nuevamente.

Lea más sobre las posibilidades, las configuraciones de herramientas, los complementos se pueden encontrar en GitHub, en la presentación con Fronttalks: inmersión profunda en WebPack.

scripts npm

Las tareas de montaje se pueden resolver mediante scripts de NPM. Muchos asustan esta idea: pocas capacidades, los scripts no son lo suficientemente rápidos en comparación con el Gulp o WebPack. Sin embargo, estas deficiencias son exageradas.

Capacidades de script de NPM

Los scripts de NPM resuelven bastante muchas tareas. Por ejemplo, puede implementar los scripts de la trampa:

("NOMBRE": "NPM-Scripts-Ejemplo", "Versión": "1.0.0", "Descripción": "Ejemplo de scripts de NPM", "Scripts": ("Prebuild": "Echo I Corrido antes de construir el script" , "Build": "Cross-Env Node_Env \u003d Production WebPack" "Postbuild": "echo i corro después del script de compilación"))

Los scripts se cargarán de acuerdo con los prefijos: prebuild, por ejemplo, comienza antes de la construcción, ya que tiene prefijo pre. En consecuencia, el postbuild será cargado por última vez. El equipo de compilación de NPM RUN lo lanzará en el orden deseado.

Puede llamar a un script desde el otro para descomponer las tareas complejas. Por ejemplo, aquí la tarea de Prebuild llama a la tarea limpia.

("Nombre": "NPM-Scripts-Ejemplo", "Versión": "1.0.0", "Descripción": "Ejemplo de scripts de NPM", "Scripts": ("Limpio": "RIMRAF ./DIST && MKDIR DIST "," Prebuild ":" NPM RUN CLEAN "," BUILT ":" Cross-Env Node_Env \u003d Producción WEBPACK "))

Si la tarea se vuelve demasiado complicada, siempre puedes llamar archivo separado.:

("Nombre": "NPM-Scripts-Ejemplo", "Versión": "1.0.0", "Descripción": "Ejemplo de scripts de NPM", "Scripts": ("Build": "Nodo Build.js"))))

Debido a la transmisión del truco para las tareas de montaje, se ha vuelto mucho más conveniente que Grunt. Pero se puede implementar a través de NPM. En Windows y Unix, la transmisión se realiza de forma predeterminada, sin guardar archivos intermedios.

Por ejemplo, en UNIX puede hacer contenidos de archivos GREP y enviarlo a un nuevo archivo:

GREP 'MI NOMBRE' BIGFILE.TXT\u003e LINESTHATHAVEMYNAME.TXT

Redirigir (\u003e) envía las cadenas deseadas al archivo de destino. La tarea se realiza sin guardar archivos intermedios.

Pero hay inconvenientes: no puedes dejar comentarios en Package.json. La salida puede ser la creación de scripts cortos con nombres comprensibles dirigidos a una pequeña tarea. En más detalle, la cuestión de reemplazar la tarea Borneders NPM Scripts está bien iluminada en el artículo de habla inglesa, por qué dejé el triturador y el gruñido para los scripts de NPM.

Salir

En el mercado hay una gran competencia herramientas para automatizar las tareas de rutina (por ejemplo, gulp y grunt), así como herramientas para automatizar el conjunto del proyecto (WEBPACK, Broccoli, Medusa, Navegación, etc.).

Si observa los ranners de la tarea, entonces el trago en comparación con Gruñido es más simple, entendido y producido: gana ahorrando en operaciones de disco. Pero Grunt tiene más complementos (por ejemplo, hay un complemento de prueba). Debido a esto, sigue siendo muchos fanáticos.

Si solo hablamos de la Asamblea, entonces Gulp tiene todas las ventajas sobre Grunt:

La arquitectura de la corriente para la transferencia de archivos sobre la cadena proporcionada por el módulo Vinyl-FS.

Por defecto, la ejecución de tareas asíncrona.

La API Lacónica es solo 5 funciones.

Al mismo tiempo, la versión de WebPack es una herramienta igualmente interesante. Proporciona tecnología de recarga en vivo que acelera la renovación del navegador. Esta es una gran ventaja: la tecnología ahorra tiempo para presionar el botón Actualizar que los desarrolladores deben presionar constantemente. Gulp también tiene una recarga en vivo, pero WEBPACK es difícil de comparar con el triturador o el gruñido, ya que está "afilado" solo debajo de la construcción y no "sabe cómo resolver tareas arbitrarias.

Todas estas soluciones están perfectamente integradas con la familia de productos de JetBrains, sin embargo, en Waveaccess prefirieron Grunt para amplios oportunidades Y para los versos, y para los especialistas del frontend.

Si tiene alguna pregunta y necesita desarrollar un proyecto web, escríbanos a [Correo electrónico protegido]

Interfaz
Gruñido.
Trago.
Corredores de tareas.