Gulp browser says Cannot get /

Question

I am using gulp.The tasks are getting run creating required folders. But I get Cannot GET/ error when run in browser.I have attached the image of my project structure and also the output in

Gulp

File structure

Problem(Cannot get/)

My index.html contains the following:

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

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

score 0 · Answer 1 · answered Apr 07 '18 at 05:45

0

I fixed it! Just put the index.html inside the src folder and rename the file style.css to "styles.css". Good luck!

answered Apr 07 '18 at 05:45

Jerico Borja

5
6

I am still facing the same issue. Instead of a blue window it only show a browser tab with localhost indication. @Jerico Borja, did you change something else? – Petter_M Oct 11 '18 at 02:08

JoshuaTaylorIllustration · Answer 2 · 2020-01-30T20:13:09.997

I had issues with this as well. I'm not sure what fixed it for me in the end. It may have been inconsistent naming of styles.css in my Gulpfile.js and src directory. It may have been that i didn't know I needed to start gulp by typing 'gulp' into the command line. Initially perhaps gulp didn't work because gulp was not installed globally. Also I didn't know I needed cd into the directory where the Gulpfile.js was located. before running 'gulp'. Another issue is that I needed to have index.html in the root directory where bootstrap was installed, instead of up a level like I had it. The way I tried to add bootstrap only to a page of html did not work. Nevertheless something fixed it but I needed to read the various documentations https://getbootstrap.com/docs/4.0/getting-started/download/ Also These videos helped. 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

Can you offer the pertinent information from the links and include it in your answer? — , Jan 30 '20 at 20:28

Gulp browser says Cannot get /

2 Answers2

Linked