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.
Tienes que hacer el "npm init" si quieres utilizar módulos, se le habrá pasado a Carlos. Y es "En primer lugar".
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...
Solución problema generación del css.
var gulp =require('gulp');var postcss =require('gulp-postcss');var browserSync =require('browser-sync').create();// Servidor de desarrollogulp.task('serve',function(){ browserSync.init({server:{baseDir:'./dist'}})})// Tarea ara procesar el CSSgulp.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 cambiosgulp.task('watch',function(){ gulp.watch('./src/*.css',['css']) gulp.watch('./dist/*.html').on('change', browserSync.reload)})gulp.task('default',['watch','serve'])
gracias por tu aporte ya conegui mi error gracias a ti xD
Excelente ahora me funciona el css de src y cambia el de dist
QUE GENIAL! Browser sync es como livereload pero se corre desde gulp! GENIAAAL!
Yei :D
es una buena alternativa, también podrías usar gulp-connect, también es livereload, saludos ! =D
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.
Creaste la carpeta dist/css y el archivo css se crea de manera correcta?
si ya lo logre solucionar, gracias
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?
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!!
Un pequeño dato, Pueden abreviar:
"--save-dev" tan solo poniendo "-D"
Al darle npm init me pide que le asigne el nombre, cual debo poner?
Me ayudan por favor?
Es el nombre de tu proyecto, es el que quieras ponerle.
Muchas gracias
Se saltaron algunos pasos, lo que hay que hacer desde CERO para que funcione, es lo siguiente:
1.Instalarnpm(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.js9.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'])
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
No me funciona el comando gulp me sale este error:
λ gulp
module.js:491throw 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
Cannot find module 'gulp-postcss'
No instalaste gulp-postcss
npm install --save-dev gulp-postcss
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 fromhttps://registry.npmjs.org/ because the host is inaccessible -- are you offline?npm WARN registry Using stale package data fromhttps://registry.npmjs.org/ due to a request error during revalidation.npmWARNInvalid version:"1"npm WARN post css No description
npm WARN post css No repository field.npmWARN post css NoREADME data
npm WARN post css No license field.+ gulp-postcss@7.0.1added 37 packages in12.628s
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!!!
quizás te falta instalar gulp de manera global
npm install -g gulp
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…
corrige la ruta en el basedir del gulpfile.js
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 desarrollogulp.task('serve',function(){ browserSync.init({server:{baseDir:'./dist'}})})//Tarea para procesar el CSSgulp.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 cambiosgulp.task('watch',function(){ gulp.watch('./src/*.css',['css']) gulp.watch('./dist/*.html').on('change', browserSync.reload)})gulp.task('default',['watch','serve'])```
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
siii a mi también me pasa lo mismo.
porque al intentar abrir el servidor me aparece Cannot GET /
posiblemente no tienes archivos .html en la raiz del proyecto “dist”
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?
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.
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:
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 newGaze(/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.
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
