Как настроить browsersync для wordpress?

Question

[Сергей Бурдужа]

Добрый день.
Нужен gulp только для перезагрузки страниц и возможно в дальнейшем буду использовать и scss.

Есть директория sites, где расположены все мои проекты.
В эту же директорию в папке gulp устанавливаю gulp.


Идея у меня такая, что когда нужно переходить к другому проекту, я только меняю путь в файле gulpfile.js.
Только я не понимаю, что именно нужно прописать в browsersync, basedir или proxy.

let gulp = require('gulp'),
	// sass         = require('gulp-sass'),
	// autoprefixer = require('gulp-autoprefixer'),
	browserSync = require('browser-sync').create();


gulp.task('browser-sync', function () {
	browserSync.init({
		server: {
		    baseDir: "../wc-estore/"
		},
		notify: true
		// proxy: 'localhost:8888/bober', //ссылка на локальный сайт
		// notify: true
	});
});

gulp.task('watch', function () {
	gulp.watch('../wc-estore/**/*.php').on("change", browserSync.reload); //Название папки вашей темы (your-theme)
	gulp.watch('../wc-estore/**/*.css').on("change", browserSync.reload); //Название папки вашей темы (your-theme)
	gulp.watch('../wc-estore/**/*.js').on("change", browserSync.reload); //Название папки вашей темы (your-theme)
});

gulp.task('default', gulp.parallel('watch', 'browser-sync'));

Я работаю в шторме и проекты держу на хостинге, а на локалке находятся только директории с темами и пустой wordpress проект, чтобы шторм оттуда брал синтаксис и снипеты.

Заранее благодарен за помощь.

Answer 1

[Сергей Бурдужа]

Сделал я для себя такой шаблон.
Создал папку gulp, она находится на одном уровне со всеми проектами.
Захожу в ней и запускаю команду gulp.
И теперь, при изменении файлов php, scss, css, js, браузер с задержкой в 2000ms перезагружается.
Задержка нужна, так как я работаю в шторме и нужно запулить изменения на сервер.
Вот содержимое gulpfile.js

'use strict';

let gulp = require('gulp'),
	//css
	// stylus = require('gulp-stylus'),
	sass = require('gulp-sass'),
	autoprefixer = require("gulp-autoprefixer"),
	sourcemaps = require('gulp-sourcemaps'),
	wait = require('gulp-wait'),
	notify = require("gulp-notify"),
	plumber = require("gulp-plumber"),
	browserSync = require('browser-sync').create(),
	replace = require('gulp-replace');

let siteUrl = 'http://wc-estore.host1670806.hostland.pro/';
let siteDir = '../wc-estore/';

gulp.task("scss", function () {
	return gulp.src(siteDir + 'assets/scss/my.scss')
		// .pipe(plumber())
		.pipe(sourcemaps.init())
		.pipe(wait(500))
		.pipe(sass({
			outputStyle: 'expanded'
		}).on('error', notify.onError(function (error) {
			return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
		})))
		.pipe(autoprefixer({
			cascade: false
		}))
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest(siteDir + 'assets/css/'))
		.pipe(browserSync.reload({stream: true}))
		.pipe(notify("Change css"));
});

gulp.task("watch", function () {
	gulp.watch(siteDir + 'assets/scss/**/*.scss', gulp.series('scss'));
});

gulp.task('browser-sync', function () {
	browserSync.init({
		proxy: {
			target: siteUrl,
			ws: true
		},
		reloadDelay: 2000
	});
	gulp.watch(siteDir + "**/*.php").on('change', browserSync.reload);
	gulp.watch(siteDir + "**/*.css").on('change', browserSync.reload);
	gulp.watch(siteDir + "**/*.js").on('change', browserSync.reload);
});

gulp.task('default', gulp.parallel('watch', 'browser-sync'));