CODEWITHSUNDEEP
javascripthtmlcssgulp
Artur Takoev
Artur Takoev

Reputation: 127

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

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

Upvotes: 2

Views: 1496

Answers (1)

Pandelis
Pandelis

Reputation: 1968

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

Upvotes: 1

Related Questions