CODEWITHSUNDEEP
javascriptlessgulp
GregH
GregH

Reputation: 43

BrowserSync in Gulp is reloading browser but live stream css doesn't update browser

I've set up a local copy of my wordpress site, and hooked in Gulp to compile .less, JS, etc. When I save off my .php the browser updates, but when I save the .less file, the .css gets compiled, but the browser doesn't update.

When I use this same gulp file on a different site it all works perfectly.

Can anyone tell me what might be blocking BrowserSync from updating css changes (but html/php changes update fine), and would affect certain sites, but not others? (I'm using OSX Yosemite & Chrome browser FYI).

Here's my gulpfile:

/* config */
var PROXY_ADDR = 'playitinteractive.dev',
	ASSET_PATH = 'html/wp-content/themes/playitinteractive/assets';
	
var globs = {
	js: [
		ASSET_PATH + '/js/src/**/*.js',
	],
	less: [
		ASSET_PATH + 'css/less/**/*.less',
	],
	files: [
		'**/.htaccess',
		'**/*.+(html|php|jpg|jpeg|gif|png)',
	],
};
var dests = {
	js:   ASSET_PATH + '/js',
	less: ASSET_PATH + '/css',
}

/* includes */
var gulp         = require('gulp'),
	gutil        = require('gulp-util'),
	rename       = require('gulp-rename'),
	
	// watching
	browserSync  = require('browser-sync'),
		
	// js
	concat       = require('gulp-concat'),
	uglify       = require('gulp-uglify'),
	ngAnnotate   = require('gulp-ng-annotate'),
	
	// css
	less         = require('gulp-less'),
	autoprefixer = require('gulp-autoprefixer'),
	minifyCss    = require('gulp-minify-css');


/* tasks */
gulp
	// build
	.task('js', function(){
		return gulp.src(globs.js)
			.pipe(concat('base.js'))
			.pipe(ngAnnotate())
			.pipe(gulp.dest(dests.js))
			
			.pipe(rename({suffix: '.min'}))
			.pipe(uglify())
			.pipe(gulp.dest(dests.js))
			
			.pipe(browserSync.reload({stream:true}));
	})
	.task('less', function(){
		return gulp.src(globs.less.concat(['!' + ASSET_PATH + '/less/**/*.inc.less']))
			.pipe(less())
			.pipe(autoprefixer('last 2 versions'))
			.pipe(minifyCss())
			.pipe(gulp.dest(dests.less))
			
			.pipe(browserSync.reload({stream:true}));
	})
	.task('build', ['js','less'])
	
	
	// watch
	.task('js.watch', ['js'], function(){
		gulp.watch(globs.js, ['js']);
	})
	.task('less.watch', ['less'], function(){
		gulp.watch(globs.less, ['less']);
	})
	.task('watch', ['js.watch','less.watch'], function(){
		browserSync.init({
			files: globs.files,
			proxy: PROXY_ADDR,
			watchOptions: {debounce: 400},
			ghostMode: false,
			notify: false,
			open: !! gutil.env.open, // call `gulp --open` to start gulp and also open a new browser window
		});
	})
	
	// default
	.task('default', ['watch'])
	

{
  "devDependencies": {
    "browser-sync": "^1.3.0",
    "gulp": "^3.8.6",
    "gulp-autoprefixer": "0.0.8",
    "gulp-concat": "^2.3.4",
    "gulp-less": "^1.3.3",
    "gulp-minify-css": "^0.3.7",
    "gulp-ng-annotate": "^0.2.0",
    "gulp-rename": "^1.2.0",
    "gulp-uglify": "^0.3.1",
    "gulp-util": "^3.0.0"
  }
}

Upvotes: 2

Views: 1771

Answers (1)

GregH
GregH

Reputation: 43

Found the issue- gulp doesn't reload the page when watching .css/.less changes (it only live updates that specific file)- in my main theme folder styles.css loaded my actual .css with

@import url("assets/css/base.css");

Since the page doesn't refresh all files, this @import never loaded the new base.css into itself.

To fix this I added a second gulp-concat task to manually add base.css into the file instead of an @import rule (the second concat doesn't minify, thus preserving theme information).

Upvotes: 1

Related Questions