Hello all

I have created a gulpfile which I want to watch for any changes to PHP and SCSS files.

When I run the gulp command in the terminal, Browser-sync starts up and the page is displayed fine.  It also says it is watching files. If I try to edit a PHP or SCSS file in the terminal it says [Browsersync] Reloading Browsers..., but nothing happens.

I want the SCSS to compile directly into the theme folder I have created and overwrite the style.css. I also want any changes I make to a PHP file to reload the broswer.

My gulpfile is as follows:

// Include gulp
const gulp = require('gulp');

// Include plugins
const concat = require('gulp-concat'),
	autoprefixer = require('gulp-autoprefixer'),
	sass = require('gulp-sass'),
	sourcemaps = require('gulp-sourcemaps'),
	browserSync = require('browser-sync').create(),
	reload = browserSync.reload;

gulp.task('sass', function () {
	return sass('./assets/sass/style.scss', { sourcemap: true, style: 'compressed' })
		.on('error', sass.logError)
		.pipe(autoprefixer())
		.pipe(sourcemaps.write('.', {
			includeContent: false
		}))
		.pipe(gulp.dest('.'));
});

gulp.task('browser-sync', function () {
	var files = [
		'./*.php',
		'./template-parts/*.php',
		'./inc/*.php',
		'./assets/**/*.scss',
		'style.css'
	];

	// Initialises browserSync
	browserSync.init(files, {
		proxy: "http://localhost/test/",
		notify: false
	});
});

// Watch for changes in files
gulp.task('watch', function () {
	// Watch .scss files
	gulp.watch('./assets/**/*.scss', ['sass']);
});

// Default task to compile css
gulp.task('default', ['sass', 'browser-sync'], function () {
	gulp.watch('./assets/**/*.scss', ['sass']);
});

Any help would be greatly appreciated.

On 8/11/2018 at 1:44 PM, predatorx said:

Hello all

I have created a gulpfile which I want to watch for any changes to PHP and SCSS files.

When I run the gulp command in the terminal, Browser-sync starts up and the page is displayed fine.  It also says it is watching files. If I try to edit a PHP or SCSS file in the terminal it says [Browsersync] Reloading Browsers..., but nothing happens.

I want the SCSS to compile directly into the theme folder I have created and overwrite the style.css. I also want any changes I make to a PHP file to reload the broswer.

My gulpfile is as follows:

// Include gulp
const gulp = require('gulp');

// Include plugins
const concat = require('gulp-concat'),
	autoprefixer = require('gulp-autoprefixer'),
	sass = require('gulp-sass'),
	sourcemaps = require('gulp-sourcemaps'),
	browserSync = require('browser-sync').create(),
	reload = browserSync.reload;

gulp.task('sass', function () {
	return sass('./assets/sass/style.scss', { sourcemap: true, style: 'compressed' })
		.on('error', sass.logError)
		.pipe(autoprefixer())
		.pipe(sourcemaps.write('.', {
			includeContent: false
		}))
		.pipe(gulp.dest('.'));
});

gulp.task('browser-sync', function () {
	var files = [
		'./*.php',
		'./template-parts/*.php',
		'./inc/*.php',
		'./assets/**/*.scss',
		'style.css'
	];

	// Initialises browserSync
	browserSync.init(files, {
		proxy: "http://localhost/test/",
		notify: false
	});
});

// Watch for changes in files
gulp.task('watch', function () {
	// Watch .scss files
	gulp.watch('./assets/**/*.scss', ['sass']);
});

// Default task to compile css
gulp.task('default', ['sass', 'browser-sync'], function () {
	gulp.watch('./assets/**/*.scss', ['sass']);
});

Any help would be greatly appreciated.

Your watch task only appears to be watching for Sass files.

Edited August 13, 20187 yr by rbrtsmith