无法在 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 可能值得用上面链接中的选项重写 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

还有这个链接可能会有所帮助，它有 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

用npm init -y添加你的package.json

然后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 后，您应该会得到一个类似下图的文件系统，其中 style.css 会自动添加到 css 文件夹中：

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

还有！确保添加编写样式。scss（不是 styles.css）文件并将其添加到 scss 文件夹

如果您像我一样遇到 npm 错误，请尝试卸载 npm 和依赖项，重新启动并重新安装。如果你有耐心，它将开始工作。额外 15 分钟的返工，是值得的。

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

$yourCPU:bs4 用户名$gulp