Gulp es una herramienta de construcción de código basada en flujo en el proceso de desarrollo front-end. Es un ejecutor de tareas automático basado en Nodejs. No solo puede optimizar los recursos del sitio web, sino que también puede completar automáticamente las pruebas, la inspección, la fusión, la compresión y el formateo. del código de front-end, actualiza automáticamente el navegador, genera archivos de implementación y monitorea los archivos para repetir los pasos especificados después de los cambios. Al usarlo, no solo podemos escribir código felizmente, sino también mejorar en gran medida la eficiencia de nuestro trabajo.
El entorno operativo de este tutorial: sistema Windows 7, nodejs versión 16, computadora DELL G3.
1. ¿Qué es el trago?
Gulp es una herramienta de construcción de código basada en flujo en el proceso de desarrollo front-end. Es una herramienta para crear proyectos automatizados. No solo puede optimizar los recursos del sitio web, sino que también puede completar automáticamente muchas tareas repetitivas durante el proceso de desarrollo. herramientas; úselo, no solo puede escribir código felizmente, sino que también mejora en gran medida la eficiencia de nuestro trabajo.
Gulp es un ejecutor de tareas automático basado en Nodejs. Puede completar automáticamente las pruebas, la inspección, la fusión, la compresión, el formateo del código de front-end, la actualización automática del navegador, la generación de archivos de implementación y monitorear archivos para repetir los pasos especificados después de los cambios.
2. ¿Qué es el flujo?
Fluya, fluya, compare archivos con ríos, luego un río fluye y otro río entra. Así es como gulp opera en flujos de archivos. La salida de una operación se utiliza como entrada de otra operación, así.
Esta operación es algo similar a la operación en cadena de jQuery: $("").html("gg").css({}).parent().find("a")....... Cuando se utilizan secuencias , gulp elimina los archivos intermedios y solo escribe el resultado final en el disco, lo que hace que todo el proceso sea más rápido.
3. Instalación de trago
Gulp se basa en el entorno del nodo. Primero asegúrese de que el nodo esté instalado.
Después de instalar el nodo, npm [(administrador de paquetes de nodo) administrador de paquetes nodejs, utilizado para la administración de complementos de nodo (incluida la instalación, desinstalación, administración de dependencias, etc.)] también se instala automáticamente.
Debido a que el complemento de instalación de npm se descarga desde un servidor externo, la red lo afecta en gran medida y puede causar anomalías, por lo que es mejor utilizar cnpm proporcionado por Taobao para instalar el complemento de nodo.
Instale cnpm: http://npm.taobao.org/
Después de la instalación, verifique la versión de cnpm para asegurarse de que la instalación se haya realizado correctamente
A continuación, puede instalar gulp. Primero instale gulp globalmente: cnpm install -g gulp.
Luego vaya a la demostración del escritorio/bbs2.0/src, ingrese al entorno bash y use cnpm install gulp para instalar gulp en el directorio actual.
Después de una instalación exitosa, aparecerá la carpeta node_modules y luego creará package.json a través de cnpm init (archivo de configuración del proyecto de nodo: debido a que el paquete del complemento de nodo es relativamente grande, la administración de versiones no está incluida. Escriba la información de configuración en el paquete .json y agregarlo a la administración de versiones y otros desarrolladores pueden descargarlo en consecuencia)
Ingrese hasta el final y el archivo package.json se generará en la carpeta actual. En este momento, si intenta usar gulp para iniciar gulp, encontrará que se informará un error.
Según el mensaje de error, necesitamos crear un archivo gulpfile.js
Entonces corre trago
Verá que el "ok" que necesitamos está impreso y gulp básicamente puede funcionar normalmente aquí.
4. Uso de complementos de uso común en gulp
1) Comprimir archivos combinados
Crear un nuevo archivo index.html
Cree dos nuevos archivos js en el directorio js
Edite el archivo gulpfile. como sigue:
Dado que utilizamos dos complementos, gulp-uglify y gulp-concat, primero debemos instalar estos dos complementos en el directorio actual.
Al instalar el complemento, use --save-dev para agregarlo a package.json. Podemos verificar si el archivo se escribió correctamente en package.json.
Bien, sí, luego continúe instalando gulp-concat en el directorio. Una vez completada la instalación, hacemos clic en node_modules y descubriremos que el complemento se instaló correctamente. Ahora comencemos con gulp.
Bien, si no se informa ningún error, significa que fue exitoso. Luego, verifique el archivo y descubra que hay todos los archivos.min.js en src que queremos comprimir y fusionar.
2) trago-descarado
Para instalar sass primero debes instalar ruby y entrar al tutorial de sass
Haga clic en Instalar y se le darán instrucciones sobre cómo instalar sass y ruby.
Después de que Ruby se haya instalado correctamente, verifique la versión de Ruby.
Después del éxito, instale sass a través de gem
Si necesita usar Compass (la relación entre Compass y Sass es equivalente a jQuery y js), por cierto, instale Compass.
Lo que hay que tener en cuenta aquí es que hay un problema con la fuente de la gema, lo que hará que la instalación falle: se informará un error: SSL_connect devuelto = 1 error = 0 estado = SSLv3 leer el certificado del servidor B: verificación del certificado fallida . Puede cambiar la fuente de la gema a https://ruby.taobao.org/. Si aún no funciona, cámbiela a http://gems.ruby-china.org/. una cuestión de carácter.
A continuación, use Compass Create para crear un proyecto atrevido.
Después de una creación exitosa, se generarán automáticamente tres archivos: sass, hojas de estilo y config.rb.
Abre cualquier archivo en sass y edítalo
Luego edite el archivo gulp
Luego instale gulp-sass y gulp-compass en el directorio actual
Después de iniciar Gulp, verifique los archivos correspondientes en las hojas de estilo.
Ok, sass se ha compilado exitosamente en css
3) Comprimir CSS mediante gulp-minify-css
Después de comenzar a tragar
4) Utilice gulp-load-plugins para ayudarnos a cargar complementos
El complemento gulp-load-plugins puede cargar automáticamente los complementos gulp en el archivo package.json.
Solo necesitamos requerir('gulp-load-plugins')(); en gulpfile.
Simplemente use el complemento.** a continuación (varias palabras se nombran en mayúsculas y minúsculas)
5) gulp-imagemin e imagemin-pngquant comprimir imágenes
6) gulp-livereload para actualizar automáticamente las páginas web
Primero instale gulp-livereload: cnpm instale gulp gulp-livereload, aquí las columnas son HTML comprimido y sass compilado y comprimido.
Luego en el archivo gulp
Para lograr con éxito no actualizar
1. También necesitas el soporte del complemento cromado livereload, así que pasa por encima de la pared.
2. Abra la página web en el entorno del servidor.