Gulp-webserver：如果在 html 文件夹之外，指向 css 的链接不起作用？答案

【问题标题】：Gulp-webserver : link to css doesn't work if outside the html folder?Gulp-webserver：如果在 html 文件夹之外，指向 css 的链接不起作用？
【发布时间】：2016-08-14 10:15:33
【问题描述】：

如果我有一个 html 文件并链接到同一文件夹或子文件夹中的 css 文件，则在运行 gulp webserver 时会包含 css。

但如果我在 html 文件夹之外有 css 文件，它不会被包含在内。

例如，如果css在同一个文件夹中，我可以写：

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

它会起作用的。如果我将它放在父文件夹之外，并链接到它：

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

它不起作用。这是 gulp 网络服务器的问题还是我忽略了什么？我想把css放在一个不同的地方，像这样：

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

在浏览器中显示“加载资源失败”。

这是网络服务器任务：

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

【问题讨论】：

root 是它可以返回的最远距离：github.com/schickling/gulp-ebserver#usage。

标签： html css server gulp

【解决方案1】：

src 是服务器的根，由于安全问题，您无法访问它的父级。

gulp-webserver确实支持中间件，比如serve-static。

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

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

【讨论】：

【解决方案2】：

我认为现在更好的方法是使用“browserSync”。

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

【讨论】：