1

I have been attempting to get live injecting working for two days now... Getting ready to give up as I've read the docks and more git is:issues than I want to repeat.

I don't use preprcessors like less or sass. I just want to have the changed CSS live reload through Browsersync. The page reloads if I save the file and my headers are set. I've tried so many options, my head is spinning. This is the latest iteration of my attempts. Anybody care to lead me to the right path?

var gulp        = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();

gulp.task('serve', function() {
    browserSync.init({
      proxy: "https://subdomain.mysite.dev",
      open: false,
      browser: 'firefox-developer',
      injectChanges: true,
      logLevel: "debug"
    });
    gulp.watch("./style.css", ['css']);
});

gulp.task('css', function() {
  return gulp.src('./style.css')
    .pipe(autoprefixer('last 2 versions'))
    .pipe(browserSync.stream());
});

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

Kubuntu Linux 17.04

browser-sync --version

2.18.12

node -v

v7.10.0

npm -v

5.0.1

ecotechie
  • 71
  • 6
  • I'm guessing you should save your css file after passing it through autoprefixer. And your html file should link to that css file. – TheDancingCode Jun 03 '17 at 21:55
  • @TheDancingCode Added: .pipe(gulp.dest("./")) right after autoprefixer, but nothing changed. I'm, at this point, only trying to edit the style.css file on ./ Thanks for the thought – ecotechie Jun 03 '17 at 22:18

1 Answers1

0

Try

.pipe(browserSync.reload({ stream:true }));

instead of

.pipe(browserSync.stream());

and then as @The Dancing Code says have that gulp.dest after your autoprefixer call and make sure that resultant file is the one in your html.

Mark
  • 143,421
  • 24
  • 428
  • 436
  • Still does not work. It looks like it is on the header. Would the ?rel= be causing a problem? – ecotechie Jun 05 '17 at 03:21
  • @The Dancing Code After looking a bit further into the headers I find something strange. On initial load, or manual reload, the header tag is and shows up twice. After I manually save the style.css the header tag changes to it is also repeated, but the ?rel= numbers are different.... Would Wordpress have something to do with this? – ecotechie Jun 05 '17 at 03:34