Tutoriales En Linea Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • Panel opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Panel Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
  • Torrent
  • Webmasters
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook Twitter YouTube Instagram Linkedin
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Tutoriales En Linea Tutoriales En Linea
  • Secciones
    1. Algebra
    2. Android
    3. Adobe
    4. Bricolaje
    5. Bachillerato
    6. Cursos
    7. Criptomonedas
    1. Criptografia
    2. Diseño Web
    3. Encuestas
    4. Empleo
    5. Electricidad
    6. Electronica
    7. Forex
    1. Fisica
    2. Google
    3. Hardware
    4. Herramientas Ofimaticas
    5. Herramientas
    6. Internet
    7. Idiomas
    1. Lenguajes De Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Webmasters
    7. Ver todas las categorias
  • Smartphone
    ¿Cómo saber quién te esta llamando?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    Smartphone vivo V25 Pro en busca del equilibrio

    Smartphone vivo V25 Pro en busca del equilibrio

    ¿Qué es un rastreador de teléfono y cómo usarlo?

    ¿Qué es un rastreador de teléfono y cómo usarlo?

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    ¿Cómo saber quién te esta llamando?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    Smartphone vivo V25 Pro en busca del equilibrio

    Smartphone vivo V25 Pro en busca del equilibrio

    Guía Completa De Icloud Drive

    Guía Completa De Icloud Drive

    Consejos para mejorar el rendimiento de la PC en Windows - Archivo de intercambio

    Consejos para mejorar el rendimiento de la PC en Windows - Archivo de intercambio

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Kerish Doctor 2022 - Licencia gratis

    Kerish Doctor 2022 - Licencia gratis

    GNU/linux

    GNU/linux

    TrueCrypt

    TrueCrypt

    Guía Completa De Icloud Drive

    Guía Completa De Icloud Drive

    Google Chrome comenzará a bloquear la carga de la página a través del protocolo HTTP inseguro

    Google Chrome comenzará a bloquear la carga de la página a través del protocolo HTTP inseguro

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Colaboración entre Sony INZONE y EXCEL Esports

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    TrueCrypt

    TrueCrypt

    El ABC de la detección y prevención del phishing

    El ABC de la detección y prevención del phishing

    Protocolos de seguridad en redes inalambricas

    Protocolos de seguridad en redes inalambricas

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Colaboración entre Sony INZONE y EXCEL Esports

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    Descubre los beneficios y funciones de la suplementación deportiva

    Descubre los beneficios y funciones de la suplementación deportiva

    Razones por las que los ejercicios HIIT son los más efectivos

    Razones por las que los ejercicios HIIT son los más efectivos

    Alimentos que mejorarán tu desempeño en el gimnasio

    Alimentos que mejorarán tu desempeño en el gimnasio

    Actividades en pareja para salir de la rutina

    Actividades en pareja para salir de la rutina

    Consejos efectivos para tratar las ojeras

    Consejos efectivos para tratar las ojeras

    Cuidado de la piel saludable para adolescentes

    Cuidado de la piel saludable para adolescentes

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Nunca estás demasiado joven para pensar en un envejecimiento saludable

    Nunca estás demasiado joven para pensar en un envejecimiento saludable

    Top 5 por las que estas realmente ansioso por el chocolate

    Top 5 por las que estas realmente ansioso por el chocolate

    Aumento de peso por retención de agua

    Aumento de peso por retención de agua

    Aprende a perder peso de manera eficiente y correcta

    Aprende a perder peso de manera eficiente y correcta

    Maneras de preparar ensaladas con aspecto atractivo

    Maneras de preparar ensaladas con aspecto atractivo

    Cómo llevar un vestido largo todo el año

    Cómo llevar un vestido largo todo el año

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Ideas para tu boda del sueño

    Ideas para tu boda del sueño

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Cómo remover las uñas de acrílico en casa

    Cómo remover las uñas de acrílico en casa

    Voluminizadores de Labios naturales para hacerlos tu misma

    Voluminizadores de Labios naturales para hacerlos tu misma

    Beneficios del Té de manzanilla

    Beneficios del Té de manzanilla

    La grasa corporal y la salud del corazón: una reflexión de su estilo de vida

    La grasa corporal y la salud del corazón: una reflexión de su estilo de vida

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    El progreso del Yoga antes y ahora

    El progreso del Yoga antes y ahora

    Top 10 de posturas de yoga

    Top 10 de posturas de yoga

    Tendencia en 2023 es el cabello largo

    Tendencia en 2023 es el cabello largo

  • Marketing
    Herramienta de analisis de tus problemas de SEO

    Herramienta de analisis de tus problemas de SEO

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramienta online de generador de datos estructurados

    Herramienta online de generador de datos estructurados

    Reescritor de Articulos - herramienta de paráfrasis

    Reescritor de Articulos - herramienta de paráfrasis

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

  • Juegos
    Juegos - HTML5 Canvas

    Juegos - HTML5 Canvas

    Como jugar online y resolver un sudoku

    Como jugar online y resolver un sudoku

    Cómo jugar Ajedrez Online TL

    Cómo jugar Ajedrez Online TL

    Como se juega al ajedrez

    Como se juega al ajedrez

    Tetris en JavaScript – Open source

    Tetris en JavaScript – Open source

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK Facebook

o con Email

¿Has olvidado tu contraseña?
Búsqueda extendida

Escriba arriba y presione Enter para buscar.


Tutoriales En Linea » javascript » Como comenzar a utilizar Gulp

Como comenzar a utilizar Gulp


Por Tutoriales En Linea - En: javascript, Software, cmd, Noticias, Tutorial 0 01-10-19

1.2К
VISTO
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
Compartir
Facebook Twitter LinkedIn Pinterest Email
Como comenzar a utilizar GulpEste tutorial supondrá que nunca antes ha usado una herramienta de compilación o una interfaz de línea de comandos y explicará todos los pasos necesarios para comenzar a utilizar Gulp.

¡La buena noticia es que en realidad es bastante simple! Travis Maynard Ha creado cinco pasos básicos que lo guían a través de todas las cosas intimidantes y le presentan las ideas centrales que necesitará saber para comenzar a usar Gulp. ¡Empecemos!

Paso uno - Instalar node


Primero, necesitamos nuestro requisito más importante, Nodo. Para instalar Node, simplemente visite nodejs.org y luego haga clic en el gran botón verde "Instalar". Una vez que se complete la descarga, ejecute esa aplicación y debería estar listo para comenzar. El instalador de Node también incluye npm, al que volveremos más adelante.

Paso dos: conozca su línea de comando


Ahora, puede que no esté muy familiarizado con su interfaz de línea de comandos (Terminal para OSX, Símbolo del sistema para Windows), ¡pero debería estarlo! Puede parecer intimidante al principio, pero una vez que lo domine, tendrá la capacidad de ejecutar muchas aplicaciones de línea de comandos diferentes, como Sass , Yeoman y Git . ¡Todas estas son herramientas muy útiles de las que su flujo de trabajo podría beneficiarse!

Si está familiarizado con su interfaz de línea de comandos, no dude en pasar al paso cuatro.

Como ejemplo rápido, abra su línea de comando y le lanzaremos un par de comandos para asegurarnos de que Node esté instalado correctamente.
node -v
Escriba eso y luego presione enter y debería obtener una respuesta en la siguiente línea con el número de versión del Nodo que ha instalado. Ahora, hagamos lo mismo para npm.
npm -v
Nuevamente, esto debería devolver el número de versión en la siguiente línea.

Si no recibió una respuesta, puede significar que Node no se instaló correctamente o puede que necesite reiniciar su aplicación de línea de comando. Si esto todavía no funciona después de reiniciar, simplemente salta hacia arriba y prueba el primer paso nuevamente.

Paso tres: navegue a su directorio de proyectos


Ahora que conocemos nuestra interfaz de línea de comandos y sabemos cómo comunicarnos con ella, nuestro siguiente paso será navegarla. Afortunadamente, solo se necesitan dos comandos para cambiar los directorios y ver qué hay dentro de ellos. Estos comandos son ls (o dir , para Windows) para enumerar lo que hay en un directorio y cd para cambiar los directorios.

Te sugiero que pases un tiempo jugando con estos comandos. Acostúmbrese a su sistema de archivos y sepa dónde se encuentra todo. No se apresure con esto, ¡le ahorrará mucho dolor de cabeza más tarde!

Una vez que se sienta cómodo con los comandos ls y cd , debemos navegar a nuestra carpeta de proyectos. Es probable que esto sea diferente para cada persona, pero como ejemplo, esto es lo que escribiría para navegar a mi proyecto local:
cd /Applications/XAMPP/xamppfiles/htdocs/my-project
Es importante tener en cuenta que estoy trabajando en OS X. El sistema de archivos en Windows es muy diferente, por lo que, aunque este ejemplo puede ser similar, no se traducirá directamente a Windows.


Una vez que haya llegado al directorio de su proyecto, ejecutemos un comando npm rápido para inicializar nuestro package.json.
npm init
Esto nos llevará a responder algunas preguntas sobre nuestro proyecto. Una vez completado, creará un archivo en el directorio raíz del proyecto llamado package.json con que proporcionará información sobre el proyecto y sus dependencias. Ahora, estamos listos para instalar gulp.

Paso cuatro: instalación de Gulp


Has conocido tu línea de comandos y sabes cómo hablar con ella, incluso conoces tu sistema de archivos. ¡Ahora, conozcamos a npm e instalemos gulp!

npm es un administrador de paquetes para Node que le permitirá instalar módulos adicionales para usar en sus proyectos desde la línea de comandos. Para obtener más información sobre npm, tómese un momento y visite el sitio web de npm para navegar y buscar en todos los paquetes disponibles. Como un pequeño ejercicio, busque Gulp y eche un vistazo.

Cuando esté listo para instalar gulp, regrese a su aplicación de línea de comandos y escriba:
npm install -g gulp
Tomemos un momento para analizar esto.

  1. npm es la aplicación que estamos utilizando para instalar nuestro paquete.
  2. Estamos ejecutando el comando de instalación en esa aplicación.
  3. El -g es un indicador opcional que se usa para indicar que queremos instalar este paquete global mente para que cualquier proyecto pueda usarlo.
  4. Y finalmente, gulp es el nombre del paquete que nos gustaría instalar.
Si EACCES recibe errores al instalar módulos, no tiene permiso para escribir en el directorio que npm está utilizando para almacenarlos. Puede anteponer esos comandos con sudo, pero no se recomienda ya que puede conducir a problemas más problemáticos más adelante. Para obtener más información sobre cómo resolver esto, consulte Corrección de permisos npm.
Una vez que se haya completado, verifique su línea de comandos para asegurarse de que no haya mensajes de error. Si no hay ninguno para ver, ¡felicidades! ¡Acabas de instalar Gulp! Solo para verificar dos veces, volvamos a los comandos de versiones que utilizamos anteriormente para Node y npm.
gulp -v
Al igual que antes, esto debería devolver el número de versión en la siguiente línea de su línea de comandos.

A continuación, también necesitamos instalar gulp localmente.
npm install --save-dev gulp
Lo único diferente aquí es que usamos el indicador --save-dev que indica a npm que agregue la dependencia a nuestra lista devDependencies en nuestro archivo package.json que creamos anteriormente.

Las dependencias nos ayudan a organizar qué paquetes son necesarios en nuestros entornos de desarrollo y producción a medida que otros contribuyen o utilizan nuestro proyecto. Si desea leer más sobre las dependencias, asegúrese de consultar la documentación de package.json.

Ahora que Gulp está instalado, el siguiente paso es configurar nuestro archivo Gulp. ¡Ya casi hemos terminado!

Paso cinco: configurar nuestro archivo Gulp y ejecutar Gulp


Una vez que se instala gulp, tenemos que darle algunas instrucciones para que sepa qué tareas realizar para nosotros. Pero, primero, debemos determinar exactamente qué tareas debemos ejecutar en nuestro proyecto. Tiempo para ... un ESCENARIO .

En nuestro emocionante escenario no genérico del mundo real® , nuestro jefe nos ha asignado las siguientes tareas:

  • Lint nuestro jаvascript. (En serio. Hazlo)
  • Compila nuestros archivos Sass. (Los navegadores no pueden leer esas cosas ...)
  • Concatena nuestro jаvascript. (¡Reduzca las solicitudes HTTP!)
  • Minificar y renombrar archivos concatenados. (¡Cada poquito cuenta!)
Me estoy imaginando a nuestro supervisor como el tipo impaciente y un tanto aterrador que come internos cuando no hacen lo que el jefe quiere. Entonces, vamos a hacerlo antes de que coman a nuestro compañero de almuerzo.

Instalar complementos necesarios

npm install jshint gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
Esto instalará todos los complementos que necesitaremos y los agregará a nuestras devDependencies en nuestro archivo package.json como lo hicimos cuando instalamos gulp. Vale la pena señalar que, además de los complementos de Gulp, también estamos instalando el paquete jshint . Solo estamos instalando esto porque es una dependencia requerida para el complemento gulp-jshint .

Si obtiene errores de permisos al instalar estos complementos, es posible que tenga algunos problemas con los permisos en su directorio de proyecto local. Puede anteponer esos comandos con sudo , pero ** no se recomienda ** ya que puede conducir a problemas más problemáticos más adelante. El mejor curso de acción es garantizar que los permisos de sus directorios estén configurados correctamente.

Cree nuestro archivo de Gulp


Ahora que nuestros complementos están disponibles para que los usemos, podemos comenzar a escribir nuestro archivo e indicarle a Gulp que realice las tareas que nuestro jefe nos asignó.

Antes de comenzar con el código, creo que es muy importante mencionar que Gulp solo tiene 5 métodos . Estos métodos son los siguientes: task , run , watch , src y dest . Esto es todo lo que necesitará para escribir sus tareas.

En el directorio raíz de su proyecto, cree un nuevo archivo y asígnele un nombre gulpfile.js y pegue el siguiente código dentro.
// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
Ahora, analicemos esto y repasemos qué hace cada parte.

Core y complementos

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
Esto incluye el núcleo de Gulp y los complementos asociados con las tareas que realizaremos. A continuación, configuramos cada una de nuestras tareas separadas. Estas tareas son lint , sass , scripts y por defecto .

Tarea de pelusa

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
Nuestra tarea de pelusa verifica cualquier archivo jаvascript en nuestro js/directorio y se asegura de que no haya errores en nuestro código.

Tarea Sass

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});
La tarea sass compila cualquiera de nuestros archivos Sass en nuestro scss/directorio en CSS y guarda el archivo CSS compilado en nuestro dist/cssdirectorio.

Tarea de secuencias de comandos - Scripts

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
La tarea de secuencias de comandos concatena todos los archivos jаvascript en nuestro js/directorio y guarda la salida en nuestro dist/jsdirectorio. Luego, gulp toma ese archivo concatenado, lo minimiza, lo renombra y lo guarda en el dist/jsdirectorio junto con el archivo concatenado.

Ver tarea

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('scss/*.scss', ['sass']);
});
La tarea de observación se utiliza para ejecutar tareas a medida que realizamos cambios en nuestros archivos. A medida que escribe código y modifica sus archivos, el gulp.watch()método escuchará los cambios y ejecutará automáticamente nuestras tareas nuevamente para que no tengamos que saltar continuamente a nuestra línea de comandos y ejecutar el comando gulp cada vez.

Tarea predeterminada

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
Finalmente, tenemos nuestra tarea predeterminada que se utiliza como referencia agrupada para nuestras otras tareas. Esta será la tarea que se ejecuta al ingresar gulp en la línea de comando sin ningún parámetro adicional.

Ahora, todo lo que nos queda por hacer es correr Gulp. Vuelva a su línea de comando y escriba:
gulp
Esto llamará a Gulp y ejecutará todo lo que hemos definido en nuestra tarea predeterminada . En otras palabras, es lo mismo que correr:
gulp default
Además, no tenemos que ejecutar la tarea predeterminada. Podríamos ejecutar cualquiera de las tareas que definimos en cualquier momento. Simplemente llame a Gulp y luego especifique la tarea que le gustaría ejecutar directamente después. Por ejemplo, podemos ejecutar nuestra tarea sass manualmente en cualquier momento así:
gulp sass
Muy bien, ¿eh?

Terminando


Bueno, lo hemos logrado. Hemos sobrevivido a nuestro jefe temperamental y comedor interno y hemos salvado heroicamente a nuestro compañero de almuerzo. Tómate un momento para darte palmaditas en la espalda. Como resumen rápido, repasemos lo que hemos aprendido.

  1. Aprendimos a instalar Node y npm.
  2. Aprendimos sobre la línea de comandos y cómo usarla.
  3. Aprendimos a usar npm para instalar gulp y varios complementos.
  4. Aprendimos a escribir un Gulp y ejecutar tareas.
Espero que esta introducción haya hecho que la comprensión de las herramientas de construcción sea mucho más fácil y que pueda ver el valor real que Gulp agrega a su proyecto y su flujo de trabajo de desarrollo. Si tiene más preguntas, asegúrese de publicarlas en los comentarios.

Lectura adicional
Como siempre, es genial tener algunos recursos adicionales, especialmente en lo que no pudimos cubrir en detalle con este artículo. Entonces, aquí hay algunos recursos para llevarlo más allá del alcance de este artículo si decide ir allí.

  • Gulp en la web
  • Gulp Plugin Search
  • Gulp en GitHub
  • npm package.json Documentation
Muchas gracias a @contrahacks y @BlaineBublitz por revisar este artículo y asegurarse de que los ejemplos de código no exploten.
Compartir Facebook Twitter Pinterest Tumblr WhatsApp VKontakte
Síguenos en Síguenos en Google News
Articulo anterior ¿Cómo puedo hacer que Cloudflar...
Articulo siguiente Como crear un menu para tu sitio...
¿Te gusto la informacion?

Si te gustó la publicación, apóyanos compartiendo en tus redes sociales o dejanos tu comentario.

  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
Tutoriales En Linea
Tutoriales En Linea
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: CEO de Tutoriales En Linea:
https://tutorialesenlinea.es
Fundador y CEO deTutoriales En Linea...Leer mas...

Post Relacionados

Conocer Ransom32: La primera ransomware JavaScript

Conocer Ransom32: La primera ransomware JavaScript

Como utilizar cookies en JavaScript

Como utilizar cookies en JavaScript

Cookies y JavaScript y otros seguimientos de navegador

Cookies y JavaScript y otros seguimientos de navegador

Vulnerabilidades Javascript y eliminación de metadatos personales desde archivos

Vulnerabilidades Javascript y eliminación de metadatos personales desde archivos

Como crear una aplicación React con create-react-app

Como crear una aplicación React con create-react-app

Ofuscador de JavaScript

Ofuscador de JavaScript


Comentarios



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Cómo crear un USB de arranque para instalar Windows 10

Cómo crear un USB de arranque para instalar Windows 10

12-Octubre
Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

10-Octubre
Herramienta de analisis de tus problemas de SEO

Herramienta de analisis de tus problemas de SEO

18-Mayo
Como activar Windows 10 con KMSAuto

Como activar Windows 10 con KMSAuto

14-Junio

Últimas publicaciones

Anunciate Aqui

Anunciate Aqui

Por Tutoriales En Linea 31-01-23135 562
México: Maneras más simples de pagar Netflix con tarjeta de debito o credito

México: Maneras más simples de pagar Netflix con tarjeta de debito o credito

Por Tutoriales En Linea 31-01-2379
Prototipo de pantalla de 27 pulgadas para realidad espacial

Prototipo de pantalla de 27 pulgadas para realidad espacial

Por Tutoriales En Linea 30-01-2381

Etiquetas

GulpTutoriales En LineaArticuloscmdlínea de comandosMenuHerramientasCompiladorcompilacionComandosNode.jssassJavascriptNodescript





Sobre nosotros

Tutoriales En Linea

Es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad. Leer mas...

Tiene una pregunta? Contactar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • DMCA
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • Contactar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.