I have a file structure and task automation with gulp.
When I run the default task if I read all the css files including the ones I send from node_modules, but when I add the browser-sync task and run again gulp it does not read any css file I leave the code below.
File structure:
- build
-- development
-- css
-- js
-- img
-- index.html
- node_modules
-- animate.css
-- (muchas otras)
- src
-- templates
-- sass
-- img
-- js
In the templates folder I have the views you put in with pug (jade)
File 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"]);
Pug file (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}')
The code executed with the default task eliminating the server task calls without problems all the files, but when creating the server it does not call the csses