Cursos Empresas Blog Live Conf Precios

Configurando nuestras tareas en Gulp: Servidor, Procesamiento de CSS y Watch

Clase 4 de 21 • Diseño web con PostCSS, el futuro de CSS

Luis Alfredo Locon Peña

student•

Hola a mi no me funcionaba el comando

$ gulp

Hay que instalar el CLI de gulp con

$npm install --global gulp-cli

Oscar Daniel Piñeros Hernández

student•

Gracias. Yo tampoco conseguía hacerlo funcionar.

Jose Navas

student•

Gracias por el dato

Julen Lizaso

student•

Hola Carlos,

Como siempre un places asistir a tus clases.

Añadiría un primer comando antes de empezar a instalar los paquetes con npm. Primeramente ejecutaría "npm init" para crear el package.json o lo crearía manualmente ya que si no es creado, todos los paquetes instalados con los flags "--save" o "--save-dev" no se guardarán en ningún archivo (minuto 2:00 del video).

Gracias.

Un saludo.

Yefri Oscar Laura Chavez Laura Chavez

student•

Tienes que hacer el "npm init" si quieres utilizar módulos, se le habrá pasado a Carlos. Y es "En primer lugar".

Francisco Fernández

student•

Comenzando con el primer problema... yo trato de comenzar con los pasos y al intentar hacer (npm install --save-dev gulp gulp-postcss browser-sync) me salen varios Warning y Errores y en vez de crear la carpeta que se debe me crea un archivo (npm-debug.log)

Ya yo tenia instalado node.js de cursos anteriores ( no se si es por esto)

Me pueden ayudar...

Víctor Arnau Gómez

student•

Solución problema generación del css.

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var browserSync = require('browser-sync').create();


// Servidor de desarrollo
gulp.task('serve', function() {
   browserSync.init({
      server: {
         baseDir: './dist'
      }
   })
})

// Tarea ara procesar el CSS
gulp.task('css', function() {

   var processors = [];

   return gulp.src('src/*.css')
      .pipe(postcss(processors))
      .pipe(gulp.dest('dist/css'))
      .pipe(browserSync.stream())
})


// Tarea para vigilar los cambios
gulp.task('watch', function() {
   gulp.watch('./src/*.css', ['css'])
   gulp.watch('./dist/*.html').on('change', browserSync.reload)
})


gulp.task('default', ['watch', 'serve'])

Alejandro Ortegano

student•

gracias por tu aporte ya conegui mi error gracias a ti xD

Jorge Hernandez Rozo

student•

Excelente ahora me funciona el css de src y cambia el de dist

Juan Castro

teacher•

QUE GENIAL! Browser sync es como livereload pero se corre desde gulp! GENIAAAL!

.

student•

Yei :D

Julio Cesar Mitac Quispe Mitac Quispe

student•

es una buena alternativa, también podrías usar gulp-connect, también es livereload, saludos ! =D

Jesus Sandrea

student•

Hola, tengo un problema al conectarme al local host todo bien pero cuando realizo un cambio en el css no me lo carga la pagina en tiempo real, tengo que recargarla, pero lo raro es que me dice en chrome browser sync connected.

Diego Forero

Team Platzi•

Creaste la carpeta dist/css y el archivo css se crea de manera correcta?

Jesus Sandrea

student•

si ya lo logre solucionar, gracias

Ledis Zamora

student•

Hola a todos, para mi caso estoy utilizando xampp para previsulaizar mis proyectos PHP como podría utilizar esta configuración para que al modificar mis ficheros .php se recargue mi página en xampp?

Javier Sain Osorno Aguirre

student•

Hola Presento dificultad para realizar la comprobación de las tareas programadas en el gulpfile.js al ejecutar el comando gulp en el terminal me aparece que no se reconoce como un comando interno o externo me parece extraño pues he realizado la instalación dos veces, he revisado el código, he seguido el paso a paso y hasta actualice node.js pero aun no idéntico que no me permite avanzar. alguien que me ayude por favor llevo analizando qué ocurre muchas horas 😕 Gracias!!

Jonathan Araujo

student•

Un pequeño dato, Pueden abreviar:

"--save-dev" tan solo poniendo "-D"

Erick Neftalí Sarmiento Cortes

student•

Al darle npm init me pide que le asigne el nombre, cual debo poner?
Me ayudan por favor?

Diego Forero

Team Platzi•

Es el nombre de tu proyecto, es el que quieras ponerle.

Erick Neftalí Sarmiento Cortes

student•

Muchas gracias

Víctor de Jesús Pacheco Padilla

student•

Se saltaron algunos pasos, lo que hay que hacer desde CERO para que funcione, es lo siguiente:

1. Instalar npm (desde la página de Node.js) https://nodejs.org/en/
2. Abrir la terminar, moverse a la carpeta de trabajo
3. Ejecutar npm install gulp
4. Ejecutar npm install --global gulp-cli
5. Ejecutar el siguiente comando: npm install --save-dev gul gulp-postcss browser-sync
	* --save-dev Sirve para guardar como dependencia de desarrollo y no como final.
	* browser-sync Sirve para que se refresque automáticamente el contenido del navegador.

6. Con eso los paquetes estarán en la carpeta node_modules y pueden ser referenciados desde el gulp file.
7. Instalar una libreria de forma global con el comando npm install -g postcss
8. Escribir el código de gulpfile.js
9. Ejecutar el comando gulp en la terminal

Nota: Al unir todas las tareas es importante que en la última línea se añada ‘css’.

gulp.task('default', ['watch', 'serve', 'css'])

Miguel Angel Goda Molina

student•

gracias por el aporte, pero al momento de instalar gulp tuve problemas lo solucione instalandolo globalmente que seria al momento de instalar gulp aumentar -g

npm install -g gulp

Luis Alejandro Cortes Chacón

student•

No me funciona el comando gulp me sale este error:

λ gulp
module.js:491
    throw err;
    ^

Error: Cannot find module 'gulp-postcss'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.Module._load (module.js:439:25)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\Escritorio\Platzi\post css\gulpfile.js:2:15)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)

Alguien me ayuda por favor

Diego Forero

Team Platzi•

Cannot find module 'gulp-postcss'

No instalaste gulp-postcss

npm install --save-dev gulp-postcss

Luis Alejandro Cortes Chacón

student•

Ya lo tenía instalado, de todas formas para estar seguros lo volví a hacer y aún me sigue saliendo el mismo error. Esto me salió al instalarlo

λ npm install --save-dev gulp-postcss
npm WARN registry Using stale data from https://registry.npmjs.org/ because the host is inaccessible -- are you offline?
npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
npm WARN Invalid version: "1"
npm WARN post css No description
npm WARN post css No repository field.
npm WARN post css No README data
npm WARN post css No license field.

+ gulp-postcss@7.0.1
added 37 packages in 12.628s

Juan Diego Silva Garcia

student•

Lo que quieran seguir este curso con Gulp V4

const { series, parallel, src, dest, watch } = require('gulp')
var postcss = require('gulp-postcss')
var browsersync = require('browser-sync').create()

//server stactic
function browserSync(done) {
  browsersync.init({
    server: {
      baseDir: './dist'
    },
    port: 3000
  })
  done()
}

// BrowserSync Reload
function browserSyncReload(done) {
  browsersync.reload();
  done();
}

// Tarea para procesar el css
function css() {
  var processors = []
  return src('src/*.css')
    .pipe(postcss(processors))
    .pipe(dest('dist/css'))
    .pipe(browsersync.stream())
}

//Vigilar cambios
function watchFiles() {
  watch('./src/*.css', css)
  watch('./dist/*.html').on('change', browserSyncReload)
}

//unificar las tareas
const watcher = parallel(watchFiles, browserSync)

//exportar cambios
exports.default = series(css, watcher)

Oswaldo Trejo

student•

Me has salvado la clase tio.

Verónica Frías

student•

Hola, He instalado el Post css correctamente, pero a la hora de ejecutar el gulp, me sale el siguiente error

‘gulp’ is not recognized as an internal or external command,
operable program or batch file.

Por favor, que alguien me ayude!!!

Franklin Lugo

student•

quizás te falta instalar gulp de manera global

npm install -g gulp

Nicolas Ticona Valdivia

student•

Hola, Me podrian ayudar tengo este problemilla
A la hora que abro el localhost:3000
En vez de aparecerme el index.html, me Parece esto
Cannot GET /
Nada mas…

No se a que se deba, revise el codigo y no halle nada que este mal…

Franklin Lugo

student•

corrige la ruta en el basedir del gulpfile.js

Ezequiel Piñero

student•

Al realizar cambios en el CSS no me actualiza automaticamente el navegador, tengo que hacerlo yo manualmente. ¿A alguien lo pasó lo mismo?

Este es mi código del archivo gulpfile.js.

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var browserSync = require('browser-sync').create()

//Servidor de desarrollo
gulp.task('serve', function () {
   browserSync.init({
       server: {
           baseDir: './dist'
        }
   })
})

//Tarea para procesar el CSS
gulp.task('css', function () {
    var processors = []
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dist/css'))
        .pipe(browserSync.stream())
})

// Tarea para vigilar los cambios
gulp.task('watch', function () {
    gulp.watch('./src/*.css', ['css'])
    gulp.watch('./dist/*.html').on('change', browserSync.reload)
})

gulp.task('default', ['watch' , 'serve'] )```

Diego Forero

Team Platzi•

El código lo veo bien, al ejecutar gulp aparece la salida en la terminal similar a la que le sale al profesor?

Estas usando el puerto 3000 para navegar en el proyecto, recuerda este es el puerto que funciona para BrowserSync

Jesus Sandrea

student•

siii a mi también me pasa lo mismo.

Manuel Arredondo

student•

porque al intentar abrir el servidor me aparece Cannot GET /

Rafnix Gabriel Guzmán Garcia

student•

posiblemente no tienes archivos .html en la raiz del proyecto “dist”

Matias Martinucci Martinucci

student•

Gente, tengo este error. Pueden darme una mano?

 ➜ invie-postcss git:(master) ✗ npm install -g postcss

npm ERR! Darwin 15.5.0

npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "postcss"

npm ERR! node v4.5.0

npm ERR! npm  v2.15.9

npm ERR! path /usr/local/lib/node_modules/postcss

npm ERR! code EACCES

npm ERR! errno -13

npm ERR! syscall rmdir

npm ERR! Error: EACCES: permission denied, rmdir '/usr/local/lib/node_modules/postcss'

npm ERR!  at Error (native)

npm ERR! { [Error: EACCES: permission denied, rmdir '/usr/local/lib/node_modules/postcss']

npm ERR!  errno: -13,

npm ERR!  code: 'EACCES',

npm ERR!  syscall: 'rmdir',

npm ERR!  path: '/usr/local/lib/node_modules/postcss' }

npm ERR!

npm ERR! Please try running this command again as root/Administrator.

npm ERR! error rolling back Error: EACCES: permission denied, rmdir '/usr/local/lib/node_modules/postcss'

npm ERR! error rolling back  at Error (native)

npm ERR! error rolling back { [Error: EACCES: permission denied, rmdir '/usr/local/lib/node_modules/postcss']

npm ERR! error rolling back  errno: -13,

npm ERR! error rolling back  code: 'EACCES',

npm ERR! error rolling back  syscall: 'rmdir',

npm ERR! error rolling back  path: '/usr/local/lib/node_modules/postcss' }

npm ERR! Please include the following file with any support request:

npm ERR!  /Users/matiasmartinucci/Desktop/invie-postcss/npm-debug.log

Miguel Arturo Pujol Ochoa

student•

Necesitas acceso root:

sudo npm install -g postcss

Matias Martinucci Martinucci

student•

Gracias, ya lo solucioné hace tiempo. Saludos.

Nicolas Alejandro Herrera

student•

Esta pregunta no tiene nada que ver con el curso.

Quiero instalar ubuntu, dual con windows 10. Cuando intento reducir el volumen del disco, para reducir a 200gb (con 235gb libres), solo me deja reducir 80gb, hago la desfragmentacion, y ahora solo me deja a 30gb!!!

Alguien sabe porque sucede esto y como solucionarlo?

Byron

student•

No te puedo decir porqué exactamente pasa eso pero si te puedo decir como solucionarlo, en mi caso personal utilizo acronis para realizar la fragmentación en el tamaño que yo quiera. ¡¡Ojo hay dos tipos de acronis!!, uno booteable por CD, y otro que se instala en windows, yo utilizo la segunda opción (exactamente Acronis Disk Director Suite v.10), este te permite redimensionar las particiones como lo desees, tiene un entorno gráfico sencillo.

IMPORTANTE:

Un problema que tuve para instalar windows 10 y ubuntu 16.04, fue que al bootear por CD de Ubuntu, no me reconocía la partición de windows 10, pero al pasar el instalador de ubuntu a una memoria usb booteable, me reconoció la partición con Windows 10 y pude instalar sin problema alguno.

Espero que te sirva.

Chris Espina

student•

A ver si alguien me puede ayudar; llevo dos días intentando hacer que el server funcione pero no logro hacerlo. Me da errores y cada vez y no encuentro la solución.

Tengo la última versión estable de node y la versión de gulp es 3.9.1 estos son los errores:

[12:37:02] Using gulpfile ~/Escritoriu/invie-postcss/gulpfile.js

[12:37:02] Starting 'watch'...

[12:37:02] 'watch' errored after 15 ms

[12:37:02] Error: watch /home/chrismilleresp/Escritoriu/invie-postcss/dist/ ENOSPC

    at exports._errnoException (util.js:870:11)

    at FSWatcher.start (fs.js:1234:19)

    at Object.fs.watch (fs.js:1262:11)

    at Gaze._watchDir (/home/chrismilleresp/Escritoriu/invie-postcss/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:289:30)

    at /home/chrismilleresp/Escritoriu/invie-postcss/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:358:10

    at iterate (/home/chrismilleresp/Escritoriu/invie-postcss/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:52:5)

    at Object.forEachSeries (/home/chrismilleresp/Escritoriu/invie-postcss/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:66:3)

    at Gaze._initWatched (/home/chrismilleresp/Escritoriu/invie-postcss/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:354:10)

    at Gaze.add (/home/chrismilleresp/Escritoriu/invie-postcss/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:177:8)

    at new Gaze (/home/chrismilleresp/Escritoriu/invie-postcss/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:74:10)

Espero que alguien me pueda ayudar por que veo que no voy a poder seguir el curso.

Silvia Juliana Torres Gaona

company_admin•

cuando trabajo desde local todo me funciona perfectamente pero cuando empiezo a desarrollar remotamente no se inyecta el css aunque en consola me dice que el archivo si se esta cambiando, ayuda por favor