Question

我正在使用gulp。任务正在运行创建所需的文件夹。但是我在浏览器中运行时得到了无法获取/错误。我已经附加了我的项目结构的图像以及

中的输出

我的index.html包含以下内容：

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <title>Bootstrap 4 Layout</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="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/styles.css">
    </head>

    <body>
        <script src="/js/jquery.min.js"></script>
        <script src="/js/popper.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
    </body>
</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', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/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/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./src"  
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

gulp.task('default', ['js','serve']);

Answer 1

我修好了！只需将index.html放在src文件夹中，然后将文件style.css重命名为＆＃34; styles.css＆＃34;。祝好运！

Answer 2

我也有这个问题。我不确定到底是什么解决了我的问题。在我的Gulpfile.js和src目录中，styles.css的命名可能不一致。可能是我不知道需要在命令行中输入“ gulp”来启动gulp。最初，gulp可能无法正常工作，因为gulp没有在全球范围内安装。另外我也不知道我需要CD到Gulpfile.js所在的目录。在运行“ gulp”之前。另一个问题是，我需要在安装了引导程序的根目录中具有index.html，而不是像我所拥有的那样具有更高的级别。我尝试仅将引导程序添加到html页面的方式无效。尽管有一些问题可以解决，但是我需要阅读各种文档https://getbootstrap.com/docs/4.0/getting-started/download/。这些视频也有所帮助。 https://www.youtube.com/watch?v=UAHfAbc8JkY https://www.youtube.com/watch?v=rTnF1U51Ie0&list=PLRAV69dS1uWRkx3Oe23_wZUylM0ecC3Hg&index=3 https://www.youtube.com/watch?v=9yQPXS7KTXM

Gulp浏览器说无法获得/

2 个答案: