@ilya77731

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

5a91966e85e4d215823010.png
После ввода команды 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']);
  • Вопрос задан
  • 3122 просмотра
Пригласить эксперта
Ответы на вопрос 1
@mellivora
Не использую 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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы