Почему не работает browserSync?

Question

[ilya77731]

После ввода команды gulp в консоль, всё нормально запускается, перекидывает на localhost:3000, но дальше на странице ничего не появляется..

Подскажите пожалуйста как решить проблему, буду безумно благодарен

Код gulpfile:

var gulp           = require('gulp'),
		gutil          = require('gulp-util' ),
		sass           = require('gulp-sass'),
		browserSync    = require('browser-sync'),
		cleanCSS       = require('gulp-clean-css'),
		autoprefixer   = require('gulp-autoprefixer'),
		bourbon        = require('node-bourbon'),
		ftp            = require('vinyl-ftp');

// Обновление страниц сайта на локальном сервере
gulp.task('browser-sync', function() {
	browserSync({
		proxy: "opencartshop",
		notify: false
	});
});

// Компиляция stylesheet.css
gulp.task('sass', function() {
	return gulp.src('catalog/view/theme/apple/stylesheet/stylesheet.sass')
		.pipe(sass({
			includePaths: bourbon.includePaths
		}).on('error', sass.logError))
		.pipe(autoprefixer(['last 15 versions']))
		.pipe(cleanCSS())
		.pipe(gulp.dest('catalog/view/theme/apple/stylesheet/'))
		.pipe(browserSync.reload({stream: true}))
});

// Наблюдение за файлами
gulp.task('watch', ['sass', 'browser-sync'], function() {
	gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', ['sass']);
	gulp.watch('catalog/view/theme/apple/template/**/*.tpl', browserSync.reload);
	gulp.watch('catalog/view/theme/apple/js/**/*.js', browserSync.reload);
	gulp.watch('catalog/view/theme/apple/libs/**/*', browserSync.reload);
});

// Выгрузка изменений на хостинг
gulp.task('deploy', function() {
	var conn = ftp.create({
		host:      'hostname.com',
		user:      'username',
		password:  'userpassword',
		parallel:  10,
		log: gutil.log
	});
	var globs = [
	'catalog/view/theme/apple/**'
	];
	return gulp.src(globs, {buffer: false})
	.pipe(conn.dest('/path/to/folder/on/server'));
});

gulp.task('default', ['watch']);

Comments

[Dima Polos]

Покажите код в gulpfile, как Вы bwsync настроили. Иначе, как угадать...

[ilya77731]

Dima Polos,

И на всякий случай ещё кодом:

var gulp           = require('gulp'),
		gutil          = require('gulp-util' ),
		sass           = require('gulp-sass'),
		browserSync    = require('browser-sync'),
		cleanCSS       = require('gulp-clean-css'),
		autoprefixer   = require('gulp-autoprefixer'),
		bourbon        = require('node-bourbon'),
		ftp            = require('vinyl-ftp');

// Обновление страниц сайта на локальном сервере
gulp.task('browser-sync', function() {
	browserSync({
		proxy: "opencartshop",
		notify: false
	});
});

// Компиляция stylesheet.css
gulp.task('sass', function() {
	return gulp.src('catalog/view/theme/apple/stylesheet/stylesheet.sass')
		.pipe(sass({
			includePaths: bourbon.includePaths
		}).on('error', sass.logError))
		.pipe(autoprefixer(['last 15 versions']))
		.pipe(cleanCSS())
		.pipe(gulp.dest('catalog/view/theme/apple/stylesheet/'))
		.pipe(browserSync.reload({stream: true}))
});

// Наблюдение за файлами
gulp.task('watch', ['sass', 'browser-sync'], function() {
	gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', ['sass']);
	gulp.watch('catalog/view/theme/apple/template/**/*.tpl', browserSync.reload);
	gulp.watch('catalog/view/theme/apple/js/**/*.js', browserSync.reload);
	gulp.watch('catalog/view/theme/apple/libs/**/*', browserSync.reload);
});

// Выгрузка изменений на хостинг
gulp.task('deploy', function() {
	var conn = ftp.create({
		host:      'hostname.com',
		user:      'username',
		password:  'userpassword',
		parallel:  10,
		log: gutil.log
	});
	var globs = [
	'catalog/view/theme/apple/**'
	];
	return gulp.src(globs, {buffer: false})
	.pipe(conn.dest('/path/to/folder/on/server'));
});

gulp.task('default', ['watch']);

[Dima Polos]

ilya77731, а для opencart какой сервер запущен?

[ilya77731]

Dima Polos, OpenServer

Answer 1

[Andrew Voloshyn]

Не использую OpenServer, так что предлагаю универсальное решение:
меняем следующие фрагменты кода
browserSync = require('browser-sync').create(),

gulp.task('browser-sync', function() {
	browserSync.init()
});

запускаем таск и копируем сниппет, который нам предложат в консоле

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.23.6'><\/script>".replace("HOST", location.hostname));
//]]></script>

найдите файл footer.twig по пути catalog\view\theme\default\template\common и скопируйте его в папку со свей темой
откройте этот файл и вставьте скопированный снипет перед закрывающим тегом </body>
активируйте тему в админке opencart
так же необходимо скопировать файл header.twig и изменить путь к файлу stylesheet.css

Оффтоп: думаю есть смысл купить это курс и получать консультации самого автора. Скорее всего он не будет обновлять информацию, а прогресс не стоит на месте.