0

How do I get the css files to update in the browser like livereload but have php files trigger a full reload? Everything else in my gulpfile is working, but nothing seems to be happening after gulp.dest. There's no errors and the output in my console is:

Starting 'sass'...
Finished 'sass' after 26 ms
write ./\main.css

gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    browserSync = require('browser-sync').create(),
    php = require('gulp-connect-php'),
    sourcemaps = require('gulp-sourcemaps');

var paths = {
    base: './**/',
    webroot: './public_html/',
    lib: './public_html/lib/'
};

paths.scssPath = paths.lib + 'scss/**/';
paths.scssMain = paths.scssPath + 'main.scss';
paths.scssAll = paths.scssPath + '*.scss';
paths.phpAll = paths.webroot + '**/*.php';
paths.css = paths.webroot + 'css/';
paths.cssAll = paths.css + '**/*.css';

gulp.task('php', function() {
  php.server({ base: 'public_html', port: 8010, keepalive: true });
});

gulp.task('browser-sync', ['php'], function() {
  browserSync.init({
    proxy: 'localhost:8000/',
    port: 8080,
    open: true,
    notify: false
  });
});

gulp.task('sass', function () {
  return sass(paths.scssMain)
    .on('error', function(err) {
      console.error('Error!', err.message);
    })
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.css))
    .pipe(browserSync.stream({match: '**/*.css'}));
});

gulp.task('default', ['sass', 'browser-sync'], function() {
  gulp.watch(paths.scssAll, ['sass']);
  gulp.watch([paths.phpAll], browserSync.reload);
});
sinrise
  • 391
  • 3
  • 21
  • Everything seems correct here. Does it not inject CSS changes without reloading the page, when you edit your sass? – Tigran Petrossian Jul 09 '17 at 10:11
  • It sure doesn't. I've tried several variations but I can't seem to get anything to happen after gulp.dest in the 'sass' task. It compiles the SCSS perfectly and reloads when I save php files. – sinrise Jul 09 '17 at 18:41
  • 1
    So weirdly enough, using `match: **/*.css` instead of the full path seems to fix the issue. I don't really have an explanation for this, probably a bug in the way browsersync handles globs. – Tigran Petrossian Jul 09 '17 at 23:00
  • Well, dangit, that was it! Thanks so much! I doubt that would have occurred to me. ;) – sinrise Jul 10 '17 at 01:29

0 Answers0