无法获取 / 在 localhost:3000

Question

我遇到了这个问题，浏览器在执行 Gulp 时只显示 Cannot GET /。

Answer 1

事实证明，gulp 似乎有点不稳定，需要一点点培养才能开始工作。

这纯粹是为了帮助它正常工作。它可能有点过头了，但如果你只是想看看它是否有效，这对我有帮助。

原始教程 https://coursetro.com/posts/code/130/Learn-Bootstrap-4-Final-in-2018-with-our-Free-Crash-Course 给了我一些已经预安装的 npm 的问题。

我发现了一些我认为可能有用的网站： https://www.npmjs.com/package/gulp 可能值得用上面 link 中的选项重写 gulpfile.js 以获得额外的依赖性。你可以稍后改回来。

如果您只是在这里复制代码，您可能需要添加这些依赖项：

npm install gulp
npm install gulp-coffee
npm install gulp-concat
npm install gulp-uglify
npm install gulp-imagemin
npm install gulp-sourcemaps

还有这个 link 可能会有帮助，它有 gulp-cli

npm install --global gulp-cli
npm install --save-dev gulp

确保根文件夹 [bs4] 中有 package.json 文件。还要确保在 src 文件夹中正确命名其他目录。

所以你应该有：

根目录[bs4] 在根目录中： [src] , gulpfile.js

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

将目录更改为 $ cd bs4

将您的 package.json 添加到 npm init -y

然后install npm

然后：npm install bootstrap jquery popper.js --save

然后全局安装gulp：npm install gulp -g browser-sync gulp-sass --save-dev

添加您的 index.html 文件（确保复制 html 文件，因为它写在 coursetro.com 上）

您最终应该会得到一个如下图所示的文件系统：

然后尝试运行宁：gulp

在运行宁 Gulp 之后，你应该最终得到一个像这个图像的文件系统，styles.css 自动添加到 css 文件夹：

（我添加 .map 文件只是因为 Safari 抛出找不到它们的错误）。

还有！确保添加 write a styles.scss（不是 styles.css）文件并将其添加到 scss 文件夹

如果你像我一样运行进入 npm 错误，请尝试卸载 npm 和依赖项，重新启动并重新安装。如果你有耐心，它就会开始起作用。额外的 15 分钟返工，这是值得的。

最后，在你之前运行 gulp。确保从 bs4

发送 shell

$你的CPU:bs4用户名$gulp

无法获取 / 在 localhost:3000

Cannot GET / on localhost:3000

npm

gulp

bootstrap-modal

bootstrap-4

gulp-watch