tengo una estructura de archivos y automatizacion de tareas con gulp.
Cuando corro la tarea default si me lee todos los archivos css incluyendo los que mando llamar de node_modules, pero cuando agrego la tarea browser-sync y corro de nuevo gulp no me lee ningun archivo css dejo a continuacion el codigo.
Estructura de archivos:
- build
-- development
-- css
-- js
-- img
-- index.html
- node_modules
-- animate.css
-- (muchas otras)
- src
-- templates
-- sass
-- img
-- js
En la carpeta templates tengo las vistas echas en con pug (jade)
Archivo gulp:
'use stric';
const gulp = require("gulp"),
pug = require("gulp-pug"),
sass = require("gulp-sass"),
babel = require("gulp-babel"),
imagemin = require("gulp-imagemin"),
svgmin = require("gulp-svgmin"),
webp = require("gulp-webp"),
useref = require("gulp-useref"),
concat = require("gulp-concat"),
uncss = require("gulp-uncss"),
autoprefixer = require("gulp-autoprefixer"),
cleanCSS = require("gulp-uglify"),
uglify = require("gulp-uglify"),
htmlmin = require("gulp-htmlmin"),
browserSync = require("browser-sync").create();
env = process.env.NODE_ENV || "development",
dir = {
src : "src",
build : "build/development",
production : "build/production",
nm : "node_modules"
},
files = {
CSS : [
`${dir.nm}/animate.css/animate.min.css`,
`${dir.nm}/owl.carousel/dist/assets/owl.theme.default.min.css`,
`${dir.build}/css/main.css`
],
mCSS : "estilos.min.css",
JS : [
`${dir.nm}/jquery/dist/jquery.min.js`,
`${dir.nm}/owl.carousel/dist/owl.carousel.min.js`,
`${dir.nm}/wowjs/dist/wow.min.js`,
`${dir.nm}/js/codigos.lojs`,
],
mJS : "codigos.min.js"
},
opts = {
pug : {
pretty : true,
locals : {
title : "Titulo Loco",
files : files
}
},
sass : {
outputStyle : "compressed"
}
};
// Task Pug
gulp.task("pug", () => {
gulp
.src( `${dir.src}/pug/*.pug`)
.pipe( pug(opts.pug) )
.pipe(gulp.dest(`${dir.build}`))
.pipe(browserSync.reload({stream : true}));
});
// Task sass
gulp.task("sass", () => {
gulp
.src( `${dir.src}/sass/*.scss`)
.pipe( sass(opts.sass) )
.pipe(gulp.dest(`${dir.build}/css`));
});
// Task watch
gulp.task("watch", () => {
gulp.watch(`${dir.src}/pug/*.pug`, ["pug"]);
gulp.watch(`${dir.src}/sass/*.scss` , ["sass"]);
});
//Task server
gulp.task("server", () => {
browserSync.init({
server : `${dir.build}`
})
});
// Task default
gulp.task("default", ["pug", "sass", "server", "watch"]);
Archivo pug (html)
<!DOCTYPE html>
html(lang="es")
head
meta(charset="UTF-8")
title Document
each css in files.CSS
link(rel="stylesheet", href=`../../${css}`)
body
h1 probando desde jade
p hola mundo
each js in files.JS
script(src=`../${js}`)
El codigo ejecutado con la tarea default eliminando la tarea server llama sin problema todos los archivos, pero al crear el server no llama los css
server
estas apuntando a tus archivos construidosbuild
. No deberías ver los cambios realizados en tus archivos scss (src
) en ves de apuntar a los css (dir
) directamente?