CODEWITHSUNDEEP
htmlcssservergulp
Galivan
Galivan

Reputation: 5328

Gulp-webserver : link to css doesn't work if outside the html folder?

If I have a html file and link to a css file that is in the same folder or a subfolder, the css is included when running gulp webserver.

But if I have the css file outside the html-folder, it doesn't get included.

So for example, if the css is in the same folder, I can write:

 <link rel="stylesheet" href="style.css">

and it will work. If I place it outside in the parent folder, and link to it:

 <link rel="stylesheet" href="../style.css">

it doesn't work. Is this a problem with gulp webserver or have I overlooked something? I would like to have the css at a diefferent place, like this:

<link rel="stylesheet" href="../../builds/development/postcss/css/style.css">

In the browser, it says "failed to load resource".

Here is the webserver task:

gulp.task('webserver', function() {
    gulp.src(htmlFolder)
    .pipe(webserver({
        livereload: true,
        open: true
    }));
});

Upvotes: 1

Views: 487

Answers (2)

Max Lawrence
Max Lawrence

Reputation: 438

I think the better way is to use the "browserSync" in nowadays.

function do_browserSync(done) {
    browserSync({
        server: {
            baseDir: '.'
        },
        startPath: 'debug/index.html',
        port: 8000,
        open: true,
        notify: false
    });
    done();
};

Upvotes: 0

SteveLacy
SteveLacy

Reputation: 4163

The src is the root of the server, you can't access it's parent due to security issues.

gulp-webserver does support middleware, such as serve-static.

var serveStatic = require('serve-static');

gulp.task('webserver', function() {
    gulp.src(htmlFolder)
    .pipe(webserver({
        livereload: true,
        open: true,
        middleware: [serveStatic(__dirname + '/builds')]
    }));
});

Upvotes: 2

Related Questions