Question

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

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

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

这个问题只发生在服务器目录位于子文件夹中时 - 当我把它放到模板中时。例如，如果index.html位于app文件夹中（不将其放到模板中），它可以正常工作（只需要更改html中的链接，从＆＃39; ../&# 39;到＆＃39; /＆＃39;）

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

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

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

Answer 1

app/static/assets/scss/*.scss - ＆gt; app/static/assets/scss/**/*.scss

参见节点中的Globbing ：https://css-tricks.com/gulp-for-beginners/#article-header-id-7

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

1 个答案: