gulp does not serve css files (if is in sub folder)

Question

Having a problem with gulp (or html file, I really don't know).

Below see the code and my project structure.

After running gulp everything works fine. All the files are where needed and compiled. BUT the links to CSS files do not work. I tested them without using gulp (I can just open index.html in browser) and they seem to be right - the library and custom file work right.

And this problem only occurs when the server directory is in the subfolder - when I put it to templates. For example, if the index.html is in the app folder (without putting it to templates) it works correctly (just need to change links in html from '../' to '/')

gulpfile.js:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'app/static/assets/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("app/static/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /static/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/popper.min.js'])
        .pipe(gulp.dest("app/static/js"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

        browserSync.init({
            server: "./app/templates"
        });

        gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'app/static/assets/scss/*.scss'], ['sass']);
        gulp.watch("app/*.html").on('change', browserSync.reload);
    });

    gulp.task('default', ['js','serve']);

And the html file (index.html) I won't use all the body, just refs you need:

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <title>2.1 ///</title>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
        <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="../static/css/bootstrap.css">
        <link rel="stylesheet" href="../static/css/custom.css">
    </head>

    <body>
        <script src="../static/js/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>        
        <script src="../static/js/bootstrap.min.js"></script>
    </body>

And the project structure:

/myapplication
    /node_modules
        /bootstrap
        /...
    /app
        /static
            /assets
                /scss
                    custom.scss
            /css
                custom.css
                bootstrap.css
            /js
                /...
        /templates
            index.html
    gulpfile.js
    ...

Ok, really long question. I've tried to find the same problem, but didn't. I will appreciate any help, txh

Mybe is something about basedir of server in browsersync? browserSync.init({ server: { baseDir: "./" } }); look here: browsersync — Jack Skeletron
– Jack Skeletron, Commented Nov 13, 2017 at 17:04
thx, I checked. "./" is just current dir. So I think no problem with that — Artur Takoev
– Artur Takoev, Commented Nov 14, 2017 at 13:19

Pandelis · Accepted Answer · 2017-11-13 17:01:50Z

1

app/static/assets/scss/*.scss -> app/static/assets/scss/**/*.scss

See Globbing in Node: https://css-tricks.com/gulp-for-beginners/#article-header-id-7

answered Nov 13, 2017 at 17:01

Pandelis

1,99714 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Artur Takoev Over a year ago

as i've pointed, I have no problem with adding scss or js files to the right folders. the problem is just with "finding" them when I refer them in the html while serving by gulf. i've tried globes, but it didn't help

Pandelis Over a year ago

Are they accessible at <link rel="stylesheet" href="/static/css/bootstrap.css"> <link rel="stylesheet" href="/static/css/custom.css"> ?

Collectives™ on Stack Overflow

gulp does not serve css files (if is in sub folder)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related