Problemas al usar Edboilerplate

Saludos, hoy estoy tratando de practicar con Edboilerplate y al descargarlo de Github y correrlo presenta inconsistencia. Habla de haber vulnerabilidades y lo otro es que no Refresca la pagina al hacer cambios.

9:37 p. m. · 23 feb. 2020

Eduardo Tobacia

@eduardotp77

Problemas al usar Edboilerplate

Saludos, hoy estoy tratando de practicar con Edboilerplate y al descargarlo de Github y correrlo presenta inconsistencia. Habla de haber vulnerabilidades y lo otro es que no Refresca la pagina al hacer cambios.

9:37 p. m. · 23 feb. 2020

Eduardo Tobacia

@eduardotp77

Problemas al usar Edboilerplate

Saludos, hoy estoy tratando de practicar con Edboilerplate y al descargarlo de Github y correrlo presenta inconsistencia. Habla de haber vulnerabilidades y lo otro es que no Refresca la pagina al hacer cambios.

9:37 p. m. · 23 feb. 2020

Eduardo Tobacia

@eduardotp77

Problemas al usar Edboilerplate

Saludos, hoy estoy tratando de practicar con Edboilerplate y al descargarlo de Github y correrlo presenta inconsistencia. Habla de haber vulnerabilidades y lo otro es que no Refresca la pagina al hacer cambios.

9:37 p. m. · 23 feb. 2020

LV

Luis Venturi @luisventuri22 mar

Hola, tengo una consulta, estoy teniendo problemas con Gulp, instalo todo, ejecuto Gulp en la terminal y arranca todo, pero, una vez hago los cambios en el scss o pug para empezar el proyecto, este no compila y no me refresca la página. Por favor, necesito ayuda para poder avanzar con el curso.

Este es mi gulpfile.babel.js

import gulp from &#39;gulp&#39;
import plumber from &#39;gulp-plumber&#39;
import pug from &#39;gulp-pug&#39;
import browserSync from &#39;browser-sync&#39;
import sass from &#39;gulp-sass&#39;
import postcss from &#39;gulp-postcss&#39;
import cssnano from &#39;cssnano&#39;
import watch from &#39;gulp-watch&#39;
import browserify from &#39;browserify&#39;
import babelify from &#39;babelify&#39;
import source from &#39;vinyl-source-stream&#39;
import sourcemaps from &#39;gulp-sourcemaps&#39;
import buffer from &#39;vinyl-buffer&#39;
import minify from &#39;gulp-minify&#39;
import imagemin from &#39;gulp-imagemin&#39;
import sitemap from &#39;gulp-sitemap&#39;
import cachebust from &#39;gulp-cache-bust&#39;
import tildeImporter from &#39;node-sass-tilde-importer&#39;
import autoprefixer from &#39;gulp-autoprefixer&#39;

const server = browserSync.create()

const startServer = () =&gt; (
 server.init({
   server: {
     baseDir: &#39;./public&#39;
   }
 })
)

const postcssPlugins = [
 cssnano({
   core: true,
   zindex: false,
   autoprefixer: {
     add: true,
     browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
   }
 })
]


gulp.task(&#39;styles-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(sourcemaps.init({ loadMaps : true}))
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     outputStyle: &#39;expanded&#39;,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(postcssPlugins))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
   .pipe(server.stream({match: &#39;**/*.css&#39;}))
})

gulp.task(&#39;styles-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(
     [
       cssnano({
         core: true,
         zindex: false,
         autoprefixer: {
           add: true,
           browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
         }
       })
     ]
   ))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
})

gulp.task(&#39;pug-dev&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     pretty: true,
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;pug-build&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;scripts-dev&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;-min.js&#39;,
       min: &#39;.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;scripts-build&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;.js&#39;,
       min: &#39;-min.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;images-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(imagemin([
     imagemin.gifsicle({interlaced: true}),
     imagemin.jpegtran({progressive: true}),
     imagemin.optipng({optimizationLevel: 5}),
     imagemin.svgo()
   ]))
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;images-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;sitemap&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;, {
   read: false
 })
   .pipe(sitemap({
     siteUrl: &#39;https://example.com&#39; // remplazar por tu dominio
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})

gulp.task(&#39;default&#39;, gulp.parallel(startServer, gulp.series([&#39;styles-dev&#39;, &#39;pug-dev&#39;, &#39;scripts-dev&#39;, &#39;images-dev&#39;])), () =&gt; {

 watch(&#39;./src/scss/**/**&#39;, () =&gt; gulp.series(&#39;styles-dev&#39;))
 watch(&#39;./src/js/**/**&#39;, () =&gt; gulp.series(&#39;scripts-dev&#39;, server.reload))
 watch(&#39;./src/pug/**/**&#39;, () =&gt; gulp.series(&#39;pug-dev&#39;, server.reload))
 watch(&#39;./src/img/**/**&#39;, () =&gt; gulp.series(&#39;images-dev&#39;))

 return
});

gulp.task(&#39;cache&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;)
   .pipe(cachebust({
     type: &#39;timestamp&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})


gulp.task(&#39;build&#39;, gulp.series(gulp.parallel([&#39;styles-build&#39;, &#39;pug-build&#39;, &#39;scripts-build&#39;, &#39;images-build&#39;, &#39;cache&#39;, &#39;sitemap&#39;])))

En la imagen es lo que me arroja el terminal y así haga cambios se queda ahí.

Eduardo Tobacia

@eduardotp77

Problemas al usar Edboilerplate

Saludos, hoy estoy tratando de practicar con Edboilerplate y al descargarlo de Github y correrlo presenta inconsistencia. Habla de haber vulnerabilidades y lo otro es que no Refresca la pagina al hacer cambios.

9:37 p. m. · 23 feb. 2020

LV

Luis Venturi @luisventuri22 mar

Hola, tengo una consulta, estoy teniendo problemas con Gulp, instalo todo, ejecuto Gulp en la terminal y arranca todo, pero, una vez hago los cambios en el scss o pug para empezar el proyecto, este no compila y no me refresca la página. Por favor, necesito ayuda para poder avanzar con el curso.

Este es mi gulpfile.babel.js

import gulp from &#39;gulp&#39;
import plumber from &#39;gulp-plumber&#39;
import pug from &#39;gulp-pug&#39;
import browserSync from &#39;browser-sync&#39;
import sass from &#39;gulp-sass&#39;
import postcss from &#39;gulp-postcss&#39;
import cssnano from &#39;cssnano&#39;
import watch from &#39;gulp-watch&#39;
import browserify from &#39;browserify&#39;
import babelify from &#39;babelify&#39;
import source from &#39;vinyl-source-stream&#39;
import sourcemaps from &#39;gulp-sourcemaps&#39;
import buffer from &#39;vinyl-buffer&#39;
import minify from &#39;gulp-minify&#39;
import imagemin from &#39;gulp-imagemin&#39;
import sitemap from &#39;gulp-sitemap&#39;
import cachebust from &#39;gulp-cache-bust&#39;
import tildeImporter from &#39;node-sass-tilde-importer&#39;
import autoprefixer from &#39;gulp-autoprefixer&#39;

const server = browserSync.create()

const startServer = () =&gt; (
 server.init({
   server: {
     baseDir: &#39;./public&#39;
   }
 })
)

const postcssPlugins = [
 cssnano({
   core: true,
   zindex: false,
   autoprefixer: {
     add: true,
     browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
   }
 })
]


gulp.task(&#39;styles-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(sourcemaps.init({ loadMaps : true}))
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     outputStyle: &#39;expanded&#39;,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(postcssPlugins))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
   .pipe(server.stream({match: &#39;**/*.css&#39;}))
})

gulp.task(&#39;styles-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(
     [
       cssnano({
         core: true,
         zindex: false,
         autoprefixer: {
           add: true,
           browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
         }
       })
     ]
   ))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
})

gulp.task(&#39;pug-dev&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     pretty: true,
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;pug-build&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;scripts-dev&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;-min.js&#39;,
       min: &#39;.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;scripts-build&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;.js&#39;,
       min: &#39;-min.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;images-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(imagemin([
     imagemin.gifsicle({interlaced: true}),
     imagemin.jpegtran({progressive: true}),
     imagemin.optipng({optimizationLevel: 5}),
     imagemin.svgo()
   ]))
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;images-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;sitemap&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;, {
   read: false
 })
   .pipe(sitemap({
     siteUrl: &#39;https://example.com&#39; // remplazar por tu dominio
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})

gulp.task(&#39;default&#39;, gulp.parallel(startServer, gulp.series([&#39;styles-dev&#39;, &#39;pug-dev&#39;, &#39;scripts-dev&#39;, &#39;images-dev&#39;])), () =&gt; {

 watch(&#39;./src/scss/**/**&#39;, () =&gt; gulp.series(&#39;styles-dev&#39;))
 watch(&#39;./src/js/**/**&#39;, () =&gt; gulp.series(&#39;scripts-dev&#39;, server.reload))
 watch(&#39;./src/pug/**/**&#39;, () =&gt; gulp.series(&#39;pug-dev&#39;, server.reload))
 watch(&#39;./src/img/**/**&#39;, () =&gt; gulp.series(&#39;images-dev&#39;))

 return
});

gulp.task(&#39;cache&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;)
   .pipe(cachebust({
     type: &#39;timestamp&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})


gulp.task(&#39;build&#39;, gulp.series(gulp.parallel([&#39;styles-build&#39;, &#39;pug-build&#39;, &#39;scripts-build&#39;, &#39;images-build&#39;, &#39;cache&#39;, &#39;sitemap&#39;])))

En la imagen es lo que me arroja el terminal y así haga cambios se queda ahí.

Eduardo Tobacia

@eduardotp77

Problemas al usar Edboilerplate

Saludos, hoy estoy tratando de practicar con Edboilerplate y al descargarlo de Github y correrlo presenta inconsistencia. Habla de haber vulnerabilidades y lo otro es que no Refresca la pagina al hacer cambios.

9:37 p. m. · 23 feb. 2020

LV

Luis Venturi @luisventuri22 mar

Hola, tengo una consulta, estoy teniendo problemas con Gulp, instalo todo, ejecuto Gulp en la terminal y arranca todo, pero, una vez hago los cambios en el scss o pug para empezar el proyecto, este no compila y no me refresca la página. Por favor, necesito ayuda para poder avanzar con el curso.

Este es mi gulpfile.babel.js

import gulp from &#39;gulp&#39;
import plumber from &#39;gulp-plumber&#39;
import pug from &#39;gulp-pug&#39;
import browserSync from &#39;browser-sync&#39;
import sass from &#39;gulp-sass&#39;
import postcss from &#39;gulp-postcss&#39;
import cssnano from &#39;cssnano&#39;
import watch from &#39;gulp-watch&#39;
import browserify from &#39;browserify&#39;
import babelify from &#39;babelify&#39;
import source from &#39;vinyl-source-stream&#39;
import sourcemaps from &#39;gulp-sourcemaps&#39;
import buffer from &#39;vinyl-buffer&#39;
import minify from &#39;gulp-minify&#39;
import imagemin from &#39;gulp-imagemin&#39;
import sitemap from &#39;gulp-sitemap&#39;
import cachebust from &#39;gulp-cache-bust&#39;
import tildeImporter from &#39;node-sass-tilde-importer&#39;
import autoprefixer from &#39;gulp-autoprefixer&#39;

const server = browserSync.create()

const startServer = () =&gt; (
 server.init({
   server: {
     baseDir: &#39;./public&#39;
   }
 })
)

const postcssPlugins = [
 cssnano({
   core: true,
   zindex: false,
   autoprefixer: {
     add: true,
     browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
   }
 })
]


gulp.task(&#39;styles-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(sourcemaps.init({ loadMaps : true}))
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     outputStyle: &#39;expanded&#39;,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(postcssPlugins))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
   .pipe(server.stream({match: &#39;**/*.css&#39;}))
})

gulp.task(&#39;styles-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(
     [
       cssnano({
         core: true,
         zindex: false,
         autoprefixer: {
           add: true,
           browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
         }
       })
     ]
   ))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
})

gulp.task(&#39;pug-dev&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     pretty: true,
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;pug-build&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;scripts-dev&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;-min.js&#39;,
       min: &#39;.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;scripts-build&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;.js&#39;,
       min: &#39;-min.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;images-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(imagemin([
     imagemin.gifsicle({interlaced: true}),
     imagemin.jpegtran({progressive: true}),
     imagemin.optipng({optimizationLevel: 5}),
     imagemin.svgo()
   ]))
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;images-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;sitemap&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;, {
   read: false
 })
   .pipe(sitemap({
     siteUrl: &#39;https://example.com&#39; // remplazar por tu dominio
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})

gulp.task(&#39;default&#39;, gulp.parallel(startServer, gulp.series([&#39;styles-dev&#39;, &#39;pug-dev&#39;, &#39;scripts-dev&#39;, &#39;images-dev&#39;])), () =&gt; {

 watch(&#39;./src/scss/**/**&#39;, () =&gt; gulp.series(&#39;styles-dev&#39;))
 watch(&#39;./src/js/**/**&#39;, () =&gt; gulp.series(&#39;scripts-dev&#39;, server.reload))
 watch(&#39;./src/pug/**/**&#39;, () =&gt; gulp.series(&#39;pug-dev&#39;, server.reload))
 watch(&#39;./src/img/**/**&#39;, () =&gt; gulp.series(&#39;images-dev&#39;))

 return
});

gulp.task(&#39;cache&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;)
   .pipe(cachebust({
     type: &#39;timestamp&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})


gulp.task(&#39;build&#39;, gulp.series(gulp.parallel([&#39;styles-build&#39;, &#39;pug-build&#39;, &#39;scripts-build&#39;, &#39;images-build&#39;, &#39;cache&#39;, &#39;sitemap&#39;])))

En la imagen es lo que me arroja el terminal y así haga cambios se queda ahí.

LV

Luis Venturi @luisventuri22 mar

Hola, tengo una consulta, estoy teniendo problemas con Gulp, instalo todo, ejecuto Gulp en la terminal y arranca todo, pero, una vez hago los cambios en el scss o pug para empezar el proyecto, este no compila y no me refresca la página. Por favor, necesito ayuda para poder avanzar con el curso.

Este es mi gulpfile.babel.js

import gulp from &#39;gulp&#39;
import plumber from &#39;gulp-plumber&#39;
import pug from &#39;gulp-pug&#39;
import browserSync from &#39;browser-sync&#39;
import sass from &#39;gulp-sass&#39;
import postcss from &#39;gulp-postcss&#39;
import cssnano from &#39;cssnano&#39;
import watch from &#39;gulp-watch&#39;
import browserify from &#39;browserify&#39;
import babelify from &#39;babelify&#39;
import source from &#39;vinyl-source-stream&#39;
import sourcemaps from &#39;gulp-sourcemaps&#39;
import buffer from &#39;vinyl-buffer&#39;
import minify from &#39;gulp-minify&#39;
import imagemin from &#39;gulp-imagemin&#39;
import sitemap from &#39;gulp-sitemap&#39;
import cachebust from &#39;gulp-cache-bust&#39;
import tildeImporter from &#39;node-sass-tilde-importer&#39;
import autoprefixer from &#39;gulp-autoprefixer&#39;

const server = browserSync.create()

const startServer = () =&gt; (
 server.init({
   server: {
     baseDir: &#39;./public&#39;
   }
 })
)

const postcssPlugins = [
 cssnano({
   core: true,
   zindex: false,
   autoprefixer: {
     add: true,
     browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
   }
 })
]


gulp.task(&#39;styles-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(sourcemaps.init({ loadMaps : true}))
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     outputStyle: &#39;expanded&#39;,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(postcssPlugins))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
   .pipe(server.stream({match: &#39;**/*.css&#39;}))
})

gulp.task(&#39;styles-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(
     [
       cssnano({
         core: true,
         zindex: false,
         autoprefixer: {
           add: true,
           browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
         }
       })
     ]
   ))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
})

gulp.task(&#39;pug-dev&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     pretty: true,
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;pug-build&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;scripts-dev&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;-min.js&#39;,
       min: &#39;.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;scripts-build&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;.js&#39;,
       min: &#39;-min.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;images-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(imagemin([
     imagemin.gifsicle({interlaced: true}),
     imagemin.jpegtran({progressive: true}),
     imagemin.optipng({optimizationLevel: 5}),
     imagemin.svgo()
   ]))
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;images-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;sitemap&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;, {
   read: false
 })
   .pipe(sitemap({
     siteUrl: &#39;https://example.com&#39; // remplazar por tu dominio
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})

gulp.task(&#39;default&#39;, gulp.parallel(startServer, gulp.series([&#39;styles-dev&#39;, &#39;pug-dev&#39;, &#39;scripts-dev&#39;, &#39;images-dev&#39;])), () =&gt; {

 watch(&#39;./src/scss/**/**&#39;, () =&gt; gulp.series(&#39;styles-dev&#39;))
 watch(&#39;./src/js/**/**&#39;, () =&gt; gulp.series(&#39;scripts-dev&#39;, server.reload))
 watch(&#39;./src/pug/**/**&#39;, () =&gt; gulp.series(&#39;pug-dev&#39;, server.reload))
 watch(&#39;./src/img/**/**&#39;, () =&gt; gulp.series(&#39;images-dev&#39;))

 return
});

gulp.task(&#39;cache&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;)
   .pipe(cachebust({
     type: &#39;timestamp&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})


gulp.task(&#39;build&#39;, gulp.series(gulp.parallel([&#39;styles-build&#39;, &#39;pug-build&#39;, &#39;scripts-build&#39;, &#39;images-build&#39;, &#39;cache&#39;, &#39;sitemap&#39;])))

En la imagen es lo que me arroja el terminal y así haga cambios se queda ahí.

LV

Luis Venturi @luisventuri22 mar

Hola, tengo una consulta, estoy teniendo problemas con Gulp, instalo todo, ejecuto Gulp en la terminal y arranca todo, pero, una vez hago los cambios en el scss o pug para empezar el proyecto, este no compila y no me refresca la página. Por favor, necesito ayuda para poder avanzar con el curso.

Este es mi gulpfile.babel.js

import gulp from &#39;gulp&#39;
import plumber from &#39;gulp-plumber&#39;
import pug from &#39;gulp-pug&#39;
import browserSync from &#39;browser-sync&#39;
import sass from &#39;gulp-sass&#39;
import postcss from &#39;gulp-postcss&#39;
import cssnano from &#39;cssnano&#39;
import watch from &#39;gulp-watch&#39;
import browserify from &#39;browserify&#39;
import babelify from &#39;babelify&#39;
import source from &#39;vinyl-source-stream&#39;
import sourcemaps from &#39;gulp-sourcemaps&#39;
import buffer from &#39;vinyl-buffer&#39;
import minify from &#39;gulp-minify&#39;
import imagemin from &#39;gulp-imagemin&#39;
import sitemap from &#39;gulp-sitemap&#39;
import cachebust from &#39;gulp-cache-bust&#39;
import tildeImporter from &#39;node-sass-tilde-importer&#39;
import autoprefixer from &#39;gulp-autoprefixer&#39;

const server = browserSync.create()

const startServer = () =&gt; (
 server.init({
   server: {
     baseDir: &#39;./public&#39;
   }
 })
)

const postcssPlugins = [
 cssnano({
   core: true,
   zindex: false,
   autoprefixer: {
     add: true,
     browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
   }
 })
]


gulp.task(&#39;styles-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(sourcemaps.init({ loadMaps : true}))
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     outputStyle: &#39;expanded&#39;,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(postcssPlugins))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
   .pipe(server.stream({match: &#39;**/*.css&#39;}))
})

gulp.task(&#39;styles-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(
     [
       cssnano({
         core: true,
         zindex: false,
         autoprefixer: {
           add: true,
           browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
         }
       })
     ]
   ))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
})

gulp.task(&#39;pug-dev&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     pretty: true,
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;pug-build&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;scripts-dev&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;-min.js&#39;,
       min: &#39;.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;scripts-build&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;.js&#39;,
       min: &#39;-min.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;images-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(imagemin([
     imagemin.gifsicle({interlaced: true}),
     imagemin.jpegtran({progressive: true}),
     imagemin.optipng({optimizationLevel: 5}),
     imagemin.svgo()
   ]))
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;images-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;sitemap&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;, {
   read: false
 })
   .pipe(sitemap({
     siteUrl: &#39;https://example.com&#39; // remplazar por tu dominio
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})

gulp.task(&#39;default&#39;, gulp.parallel(startServer, gulp.series([&#39;styles-dev&#39;, &#39;pug-dev&#39;, &#39;scripts-dev&#39;, &#39;images-dev&#39;])), () =&gt; {

 watch(&#39;./src/scss/**/**&#39;, () =&gt; gulp.series(&#39;styles-dev&#39;))
 watch(&#39;./src/js/**/**&#39;, () =&gt; gulp.series(&#39;scripts-dev&#39;, server.reload))
 watch(&#39;./src/pug/**/**&#39;, () =&gt; gulp.series(&#39;pug-dev&#39;, server.reload))
 watch(&#39;./src/img/**/**&#39;, () =&gt; gulp.series(&#39;images-dev&#39;))

 return
});

gulp.task(&#39;cache&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;)
   .pipe(cachebust({
     type: &#39;timestamp&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})


gulp.task(&#39;build&#39;, gulp.series(gulp.parallel([&#39;styles-build&#39;, &#39;pug-build&#39;, &#39;scripts-build&#39;, &#39;images-build&#39;, &#39;cache&#39;, &#39;sitemap&#39;])))

En la imagen es lo que me arroja el terminal y así haga cambios se queda ahí.

LV

Luis Venturi @luisventuri22 mar

Hola, tengo una consulta, estoy teniendo problemas con Gulp, instalo todo, ejecuto Gulp en la terminal y arranca todo, pero, una vez hago los cambios en el scss o pug para empezar el proyecto, este no compila y no me refresca la página. Por favor, necesito ayuda para poder avanzar con el curso.

Este es mi gulpfile.babel.js

import gulp from &#39;gulp&#39;
import plumber from &#39;gulp-plumber&#39;
import pug from &#39;gulp-pug&#39;
import browserSync from &#39;browser-sync&#39;
import sass from &#39;gulp-sass&#39;
import postcss from &#39;gulp-postcss&#39;
import cssnano from &#39;cssnano&#39;
import watch from &#39;gulp-watch&#39;
import browserify from &#39;browserify&#39;
import babelify from &#39;babelify&#39;
import source from &#39;vinyl-source-stream&#39;
import sourcemaps from &#39;gulp-sourcemaps&#39;
import buffer from &#39;vinyl-buffer&#39;
import minify from &#39;gulp-minify&#39;
import imagemin from &#39;gulp-imagemin&#39;
import sitemap from &#39;gulp-sitemap&#39;
import cachebust from &#39;gulp-cache-bust&#39;
import tildeImporter from &#39;node-sass-tilde-importer&#39;
import autoprefixer from &#39;gulp-autoprefixer&#39;

const server = browserSync.create()

const startServer = () =&gt; (
 server.init({
   server: {
     baseDir: &#39;./public&#39;
   }
 })
)

const postcssPlugins = [
 cssnano({
   core: true,
   zindex: false,
   autoprefixer: {
     add: true,
     browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
   }
 })
]


gulp.task(&#39;styles-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(sourcemaps.init({ loadMaps : true}))
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     outputStyle: &#39;expanded&#39;,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(postcssPlugins))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
   .pipe(server.stream({match: &#39;**/*.css&#39;}))
})

gulp.task(&#39;styles-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/scss/*.scss&#39;)
   .pipe(plumber())
   .pipe(sass({
     importer: tildeImporter,
     includePaths: [&#39;./node_modules&#39;]
   }))
   .pipe(postcss(
     [
       cssnano({
         core: true,
         zindex: false,
         autoprefixer: {
           add: true,
           browsers: &#39;&gt; 1%, last 2 versions, Firefox ESR, Opera 12.1&#39;
         }
       })
     ]
   ))
   .pipe(gulp.dest(&#39;./public/assets/css/&#39;))
})

gulp.task(&#39;pug-dev&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     pretty: true,
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;pug-build&#39;, () =&gt; (
 gulp.src(&#39;./src/pug/pages/**/*.pug&#39;)
   .pipe(plumber())
   .pipe(pug({
     basedir: &#39;./src/pug&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
))

gulp.task(&#39;scripts-dev&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;-min.js&#39;,
       min: &#39;.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;scripts-build&#39;, () =&gt; (
 browserify(&#39;./src/js/index.js&#39;)
   .transform(babelify, {
     global: true // permite importar desde afuera (como node_modules)
   })
   .bundle()
   .on(&#39;error&#39;, function (err) {
     console.error(err)
     this.emit(&#39;end&#39;)
   })
   .pipe(source(&#39;scripts.js&#39;))
   .pipe(buffer())
   .pipe(minify({
     ext: {
       src: &#39;.js&#39;,
       min: &#39;-min.js&#39;
     }
   }))
   .pipe(sourcemaps.init({loadMaps: true}))
   .pipe(sourcemaps.write(&#39;.&#39;))
   .pipe(gulp.dest(&#39;./public/assets/js&#39;))
))

gulp.task(&#39;images-build&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(imagemin([
     imagemin.gifsicle({interlaced: true}),
     imagemin.jpegtran({progressive: true}),
     imagemin.optipng({optimizationLevel: 5}),
     imagemin.svgo()
   ]))
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;images-dev&#39;, () =&gt; {
 return gulp.src(&#39;./src/img/**/**&#39;)
   .pipe(gulp.dest(&#39;./public/assets/img&#39;))
})

gulp.task(&#39;sitemap&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;, {
   read: false
 })
   .pipe(sitemap({
     siteUrl: &#39;https://example.com&#39; // remplazar por tu dominio
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})

gulp.task(&#39;default&#39;, gulp.parallel(startServer, gulp.series([&#39;styles-dev&#39;, &#39;pug-dev&#39;, &#39;scripts-dev&#39;, &#39;images-dev&#39;])), () =&gt; {

 watch(&#39;./src/scss/**/**&#39;, () =&gt; gulp.series(&#39;styles-dev&#39;))
 watch(&#39;./src/js/**/**&#39;, () =&gt; gulp.series(&#39;scripts-dev&#39;, server.reload))
 watch(&#39;./src/pug/**/**&#39;, () =&gt; gulp.series(&#39;pug-dev&#39;, server.reload))
 watch(&#39;./src/img/**/**&#39;, () =&gt; gulp.series(&#39;images-dev&#39;))

 return
});

gulp.task(&#39;cache&#39;, () =&gt; {
 return gulp.src(&#39;./public/**/*.html&#39;)
   .pipe(cachebust({
     type: &#39;timestamp&#39;
   }))
   .pipe(gulp.dest(&#39;./public&#39;))
})


gulp.task(&#39;build&#39;, gulp.series(gulp.parallel([&#39;styles-build&#39;, &#39;pug-build&#39;, &#39;scripts-build&#39;, &#39;images-build&#39;, &#39;cache&#39;, &#39;sitemap&#39;])))

En la imagen es lo que me arroja el terminal y así haga cambios se queda ahí.

Post

Problemas al usar Edboilerplate

Post

Problemas al usar Edboilerplate

Post

Problemas al usar Edboilerplate

Post

Problemas al usar Edboilerplate

Post

Problemas al usar Edboilerplate

Post

Problemas al usar Edboilerplate