Gulp no compila
Buenos días gente, aprovechando la cuarentena, he decidido llevar la especialidad de mi primera web. En ella, tengo un problema, y este es al ejecutar gulp, cuando lo ejecuto en la terminal, me funciona todo bien, como podemos ver en la imagen adjunta, pero cuando hago un cambio ya sea en pug o scss, este no me compila y no me refrezca la página, pongo en vista de todos el código de mi gulpfile.babel.js
import gulp from 'gulp'
import plumber from 'gulp-plumber'
import pug from 'gulp-pug'
import browserSync from 'browser-sync'
import sass from 'gulp-sass'
import postcss from 'gulp-postcss'
import cssnano from 'cssnano'
import watch from 'gulp-watch'
import browserify from 'browserify'
import babelify from 'babelify'
import source from 'vinyl-source-stream'
import sourcemaps from 'gulp-sourcemaps'
import buffer from 'vinyl-buffer'
import minify from 'gulp-minify'
import imagemin from 'gulp-imagemin'
import sitemap from 'gulp-sitemap'
import cachebust from 'gulp-cache-bust'
import tildeImporter from 'node-sass-tilde-importer'
import autoprefixer from 'gulp-autoprefixer'
const server = browserSync.create()
const startServer = () => (
server.init({
server: {
baseDir: './public'
}
})
)
const postcssPlugins = [
cssnano({
core: true,
zindex: false,
autoprefixer: {
add: true,
browsers: '> 1%, last 2 versions, Firefox ESR, Opera 12.1'
}
})
]
gulp.task('styles-dev', () => {
return gulp.src('./src/scss/*.scss')
.pipe(sourcemaps.init({ loadMaps : true}))
.pipe(plumber())
.pipe(sass({
importer: tildeImporter,
outputStyle: 'expanded',
includePaths: ['./node_modules']
}))
.pipe(postcss(postcssPlugins))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./public/assets/css/'))
.pipe(server.stream({match: '**/*.css'}))
})
gulp.task('styles-build', () => {
return gulp.src('./src/scss/*.scss')
.pipe(plumber())
.pipe(sass({
importer: tildeImporter,
includePaths: ['./node_modules']
}))
.pipe(postcss(
[
cssnano({
core: true,
zindex: false,
autoprefixer: {
add: true,
browsers: '> 1%, last 2 versions, Firefox ESR, Opera 12.1'
}
})
]
))
.pipe(gulp.dest('./public/assets/css/'))
})
gulp.task('pug-dev', () => (
gulp.src('./src/pug/pages/**/*.pug')
.pipe(plumber())
.pipe(pug({
pretty: true,
basedir: './src/pug'
}))
.pipe(gulp.dest('./public'))
))
gulp.task('pug-build', () => (
gulp.src('./src/pug/pages/**/*.pug')
.pipe(plumber())
.pipe(pug({
basedir: './src/pug'
}))
.pipe(gulp.dest('./public'))
))
gulp.task('scripts-dev', () => (
browserify('./src/js/index.js')
.transform(babelify, {
global: true // permite importar desde afuera (como node_modules)
})
.bundle()
.on('error', function (err) {
console.error(err)
this.emit('end')
})
.pipe(source('scripts.js'))
.pipe(buffer())
.pipe(minify({
ext: {
src: '-min.js',
min: '.js'
}
}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./public/assets/js'))
))
gulp.task('scripts-build', () => (
browserify('./src/js/index.js')
.transform(babelify, {
global: true // permite importar desde afuera (como node_modules)
})
.bundle()
.on('error', function (err) {
console.error(err)
this.emit('end')
})
.pipe(source('scripts.js'))
.pipe(buffer())
.pipe(minify({
ext: {
src: '.js',
min: '-min.js'
}
}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./public/assets/js'))
))
gulp.task('images-build', () => {
return gulp.src('./src/img/**/**')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo()
]))
.pipe(gulp.dest('./public/assets/img'))
})
gulp.task('images-dev', () => {
return gulp.src('./src/img/**/**')
.pipe(gulp.dest('./public/assets/img'))
})
gulp.task('sitemap', () => {
return gulp.src('./public/**/*.html', {
read: false
})
.pipe(sitemap({
siteUrl: 'https://example.com' // remplazar por tu dominio
}))
.pipe(gulp.dest('./public'))
})
gulp.task('default', gulp.parallel(startServer, gulp.series(['styles-dev', 'pug-dev', 'scripts-dev', 'images-dev'])), () => {
watch('./src/scss/**/**', () => gulp.series('styles-dev'))
watch('./src/js/**/**', () => gulp.series('scripts-dev', server.reload))
watch('./src/pug/**/**', () => gulp.series('pug-dev', server.reload))
watch('./src/img/**/**', () => gulp.series('images-dev'))
return
});
gulp.task('cache', () => {
return gulp.src('./public/**/*.html')
.pipe(cachebust({
type: 'timestamp'
}))
.pipe(gulp.dest('./public'))
})
gulp.task('build', gulp.series(gulp.parallel(['styles-build', 'pug-build', 'scripts-build', 'images-build', 'cache', 'sitemap'])))
Espero puedan ayudarme por favor, les agradecería de todo corazón. Un abrazo
