Gulp error cannot get - Исправление ошибок и поиск оптимальных решений проблем

После выполнения всех последовательных шагов в уроке 3.4. Планировщик задач Gulp после запуска команды gulp в терминале появляется
gulp
[10:40:51] Using gulpfile ~DesktopУчебный 1Projekt Ubergulpfile.js
[10:40:51] Starting ‘default’…
[10:40:51] Starting ‘watch’…
[10:40:51] Starting ‘server’…
[10:40:51] Starting ‘styles’…
[10:40:51] Finished ‘styles’ after 127 ms
[Browsersync] Access URLs:
—————————————
Local: http://localhost:3000
External: http://192.168.31.219:3000
—————————————
UI: http://localhost:3001
UI External: http://localhost:3001
—————————————
[Browsersync] Serving files from: src Далее запускается браузер в нем следующая ошибка Cannot GET в адресной строке http://localhost:3000. переустановка пакетов результата не дала та же ошибка.

Package json

{
  «name»: «scr»,
  «version»: «1.0.0»,
  «main»: «index.js»,
  «scripts»: {
    «test»: «echo «Error: no test specified» && exit 1″
  },
  «author»: «»,
  «license»: «ISC»,
  «devDependencies»: {
    «browser-sync»: «^2.26.7»,
    «gulp»: «^4.0.2»,
    «gulp-autoprefixer»: «^7.0.1»,
    «gulp-clean-css»: «^4.3.0»,
    «gulp-cli»: «^2.3.0»,
    «gulp-rename»: «^2.0.0»,
    «gulp-sass»: «^4.1.0»
  },
  «description»: «»
}

Файл gulpfile.json скачан с репозитория

const gulp = require(‘gulp’);
const browserSync = require(‘browser-sync’);
const sass = require(‘gulp-sass’);
const cleanCSS = require(‘gulp-clean-css’);
const autoprefixer = require(‘gulp-autoprefixer’);
const rename = require(«gulp-rename»);

gulp.task(‘server’, function() {

    browserSync({
        server: {
            baseDir: «src»
        }
    });

gulp.watch(«src/*.html»).on(‘change’, browserSync.reload);
});

gulp.task(‘styles’, function() {
    return gulp.src(«src/sass/**/*.+(scss|sass)»)
        .pipe(sass({outputStyle: ‘compressed’}).on(‘error’, sass.logError))
        .pipe(rename({suffix: ‘.min’, prefix: »}))
        .pipe(autoprefixer())
        .pipe(cleanCSS({compatibility: ‘ie8’}))
        .pipe(gulp.dest(«src/css»))
        .pipe(browserSync.stream());
});

gulp.task(‘watch’, function() {
gulp.watch(«src/sass/**/*.+(scss|sass)», gulp.parallel(‘styles’));
})

gulp.task(‘default’, gulp.parallel(‘watch’, ‘server’, ‘styles’));

В чем ошибка не могу понять поэтапно повторял несколько раз те же шаги результат один

при запуске команды gulp запускается браузер а там ошибка Cannot GET.

Помогите Пожайлуста кто может!

index.html лежит в папке src

Источник

Because it works only with index.html by default, for example:

[email protected]:~/Templates/browsersync-project$ ls 

brow.html  css

[email protected]:~/Templates/browsersync-project$ browser-sync start --server --files '.'

Expected result:

Cannot GET/

In order to see your static web-page in the web-browser instead of that annoying message you have to rename a file brow.html to index.html. This will solve Cannot GET/ problem.

P.S. Where you are installing a browser-sync doesn’t matter. Just type npm install -g browser-sync whatever directory you are in, and after double check browser-sync --version.

Using BrowserSync as a server only works if you’re running a static site, so PHP won’t work here.

Looks like you’re using XAMPP to serve your site, you can use BrowserSync to proxy your localhost.

Example:

browser-sync start --proxy localhost/yoursite

References:

http://www.browsersync.io/docs/command-line/#proxy-example
https://github.com/BrowserSync/browser-sync/issues/5

This article was extreamly helpful for getting browsersync to work with a PHP site.

These are what the configurations for both Grunt and Gulp should look like (taken from the article)

Grunt

You will need the grunt-php plugin

grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.initConfig({
    watch: {
        php: {
            files: ['app/**/*.php']
        }
    },
    browserSync: {
        dev: {
            bsFiles: {
                src: 'app/**/*.php'
            },
            options: {
                proxy: '127.0.0.1:8010', //our PHP server
                port: 8080, // our new port
                open: true,
                watchTask: true
            }
        }
    },
    php: {
        dev: {
            options: {
                port: 8010,
                base: 'path/to/root/folder'
            }
        }
    }
});

grunt.registerTask('default', ['php', 'browserSync', 'watch']);

Gulp

You will need the gulp-connect-php plugin

// Gulp 3.8 code... differs in 4.0
var gulp = require('gulp'),
    php = require('gulp-connect-php'),
    browserSync = require('browser-sync');

var reload  = browserSync.reload;

gulp.task('php', function() {
    php.server({ base: 'path/to/root/folder', port: 8010, keepalive: true});
});
gulp.task('browser-sync',['php'], function() {
    browserSync({
        proxy: '127.0.0.1:8010',
        port: 8080,
        open: true,
        notify: false
    });
});
gulp.task('default', ['browser-sync'], function () {
    gulp.watch(['build/*.php'], [reload]);
});

Источник

let gulp = require("gulp");
let project_folder = "dist";
let source_folder = "#src";
let f = require("fs");
 
let path = {
    build:{
        html:project_folder +"/",
        css:project_folder + "/css/",
        js:project_folder + "/js/",
        img:project_folder+ "/img/",
        fonts:project_folder + "/fonts/"
    },
    src:{
        html: [ source_folder +"/*.html", "!" + source_folder + "/_*.html"],
        css:source_folder + "/scss/style.scss",
        js:source_folder + "/js/script.js",
        img:source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
        fonts:source_folder + "/fonts/*.ttf"
    },
    watch:{
        html:source_folder +"/**/*.html",
        css:source_folder + "/scss/**/*.scss",
        js:source_folder + "/js/**/*.js",
        img:source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
    },
    clean:"./" + project_folder + "/"
}
let {src, dest} = require ("gulp")
browsersync = require ("browser-sync").create()
del = require("del")
fileinclude = require("gulp-file-include")
scss = require("gulp-sass")
autoprefixer = require("gulp-autoprefixer")
group_media = require("gulp-group-css-media-queries")
clean_css = require("gulp-clean-css")
Rename = require("gulp-rename")
uglify = require("gulp-uglify-es").default;
imagemin = require("gulp-imagemin")
webp = require("gulp-webp")
webphtml = require("gulp-webp-html")
webpcss = require("gulp-webp-css")
svgSprite = require("gulp-svg-sprite")
ttf2woff = require("gulp-ttf2woff")
ttf2woff2 = require("gulp-ttf2woff2")
Fonter = require("gulp-fonter")
 
function browserSync() {
    browsersync.init({
        server: {
            baseDir: "./" + project_folder + "/"
        },
        port: 3000,
        notify: false
    })
}
 
function html() {
    return src(path.src.html)
        .pipe(fileinclude())
        .pipe(webphtml())
        .pipe(dest(path.build.html))
        .pipe(browsersync.stream())
}
 
function css() {
    return src(path.src.css)
        .pipe (
            scss({
                outputStyle: "expanded"
            })
        )
        .pipe(dest(path.build.css))
        .pipe (group_media())
        .pipe (
            autoprefixer ({
                overrideBrowserslist: ["last 5 versions"],
                cascade: true
            })
        )
        .pipe(webpcss())
        .pipe(dest(path.build.css))
        .pipe (clean_css())
        .pipe (
            Rename ({
                extname: ".min.css"
            })
        )
        .pipe(dest(path.build.css))
        .pipe(browsersync.stream())
}
 
function js() {
    return src(path.src.js)
        .pipe(fileinclude())
        .pipe(dest(path.build.js))
        .pipe (
            uglify()
        )
        .pipe (
            Rename ({
                extname: ".min.js"
            })
        )
        .pipe(dest(path.build.js))
        .pipe(browsersync.stream())
}
 
function images() {
    return src(path.src.img)
        .pipe (
            webp ({
             quality:70
            })
        )
        .pipe(dest(path.build.img))
        .pipe(src(path.src.img))
        .pipe(
            imagemin ({
                progressive: true,
                svgoPlugins: [{removeViewBox: false}],
                interlaced: true,
                optimizationLevel: 3
            })
        )
        .pipe(fileinclude())
        .pipe(dest(path.build.img))
        .pipe(browsersync.stream())
}
 
gulp.task('otf2ttf', function () {
    return gulp.src([source_folder + '/fonts/*.otf'])
        .pipe(Fonter({
            formats: ['ttf']
        }))
        .pipe(dest(source_folder + '/fonts/'))
})
 
 
gulp.task('svgSprite', function () {
    return gulp.src([source_folder + '/iconsprite/*.svg'])
        .pipe(svgSprite({
            mode: {
                stack: {
                    sprite: "../icons/icons.svg", // sprite file name
                     example: true
                }
            },
        }
        ))
    .pipe(dest(path.build.img))
})
 
function fonts() {
    src(path.src.fonts)
        .pipe(ttf2woff())
        .pipe(dest(path.build.fonts))
         return src(path.src.fonts)
        .pipe(ttf2woff2())
        .pipe(dest(path.build.fonts))
 
}
 
    function watchFiles() {
        gulp.watch( [path.watch.html], html )
        gulp.watch( [path.watch.css], css )
        gulp.watch( [path.watch.js], js )
        gulp.watch( [path.watch.img], images )
    }
 
    function clean() {
        return del( path.clean );
    }
 
    let build = gulp.series( clean, gulp.parallel( js, css, html, images, fonts ) );
    let watch = gulp.parallel( build, browserSync, watchFiles );
 
    exports.fonts = fonts;
    exports.images = images;
    exports.js = js;
    exports.css = css;
    exports.build = build;
    exports.html = html;
    exports.watch = watch;
    exports.default = watch;

Источник

Читайте также: