Javascript gulp不提供css文件（如果在子文件夹中）_Javascript_Html_Css_Gulp

Javascript gulp不提供css文件（如果在子文件夹中）

javascript html css gulp

Javascript gulp不提供css文件（如果在子文件夹中）,javascript,html,css,gulp,Javascript,Html,Css,Gulp,gulp（或html文件，我真的不知道）有问题下面是代码和我的项目结构喝了一大口后，一切正常。所有文件都在需要和编译的地方。但是CSS文件的链接不起作用。我在没有使用gulp的情况下测试了它们（我可以在浏览器中打开index.html），它们似乎是正确的-库和自定义文件工作正常只有当服务器目录在子文件夹中时，这个问题才会发生——当我把它放到模板中时。例如，如果index.html位于应用程序文件夹中（不将其放入模板），则它可以正常工作（只需将html中的链接从“../”更改为“/”） gu

gulp（或html文件，我真的不知道）有问题

下面是代码和我的项目结构

喝了一大口后，一切正常。所有文件都在需要和编译的地方。但是CSS文件的链接不起作用。我在没有使用gulp的情况下测试了它们（我可以在浏览器中打开index.html），它们似乎是正确的-库和自定义文件工作正常

只有当服务器目录在子文件夹中时，这个问题才会发生——当我把它放到模板中时。例如，如果index.html位于应用程序文件夹中（不将其放入模板），则它可以正常工作（只需将html中的链接从“../”更改为“/”）

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']);

<!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>

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

和html文件（index.html）我不会使用所有的正文，只参考您需要的内容：

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']);

<!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>

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

好的，很长的问题。我试着找到同样的问题，但没有找到。我将非常感谢您的帮助，txh

app/static/assets/scss/*.scss

app/static/assets/scss/**.scss

请参阅节点中的全局绑定：

Mybe是关于browsersync中服务器的basedir吗<代码>browserSync.init（{server:{baseDir:“./”}）看这里：谢谢，我查过了。“/”只是当前目录。因此，我认为这没有问题，正如我所指出的，将SCS或js文件添加到正确的文件夹中没有问题。问题在于，当我通过gulf提供服务时，在html中引用它们时，“查找”它们。我试过地球仪，但没用。他们可以在吗？