0

it seems there is something im missing - Im just trying to get the css injection working on this project.

The server proxy works The file watcher too The injection works, but the page always reloads half a second after...

Im on Mac osx 10.11.6 (15G1108) Node v4.1.1

here is my gulpfile:

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

var plumber = require('gulp-plumber');
var notify = require("gulp-notify");

var src = {
scss: 'assets/scss/**',
css: 'assets/css/',
html: 'app/*.html'
};

gulp.task('serve', ['sass'], function() {

browserSync.init({
    proxy: "intouch.local",
    open: false,
    reloadOnRestart: false,
    injectChanges: true,
});

gulp.watch(src.scss, ['sass']);
});

gulp.task('sass', function() {

var onError = function(err) {
        notify.onError({
                    title:    "Gulp",
                    subtitle: "Failure!",
                    message:  "Error: <%= error.message %>",
                    sound:    "Beep"
                })(err);

        this.emit('end');
    };


return gulp.src(src.scss)
    .pipe(plumber({errorHandler: onError}))
    .pipe(sass())
    .pipe(gulp.dest(src.css))
    // NOTE: i've tried with all of these lines, all do the same...
    // .pipe(reload({stream: true}))
    // .pipe(browserSync.stream())
    .pipe(browserSync.reload({
          stream: true
        }))
    .pipe(notify({
       title: 'Gulp',
       subtitle: 'success',
       message: 'Sass task',
       sound: "Pop"
    }));
});

gulp.task('default', ['serve']);
ulumi
  • 63
  • 1
  • 8

1 Answers1

2

Adjust the glob for the sass files you want to compile to only match .scss (or .sass) files:

e.g. in your code example change assets/scss/** to assets/scss/**/*.scss.

A broad glob can result in unexpected files (typically source maps) being passed down the pipeline and Browsersync's default behaviour when it encounters modified files that can't be streamed is to reload the page, hence you get a successful injection for the CSS and then a hard reload for some files you probably didn't expect / don't care about.

thewildandy
  • 318
  • 2
  • 8
  • 1
    In addition to source maps, other potential culprits may be directories and hidden files (e.g. `.gitignore`). Using a more specific glob or filtering the files before piping to SASS fixes all cases I've encountered so far. – thewildandy Dec 14 '16 at 11:48
  • so if my scss folder contains a subfolder with "partials", and a main scss file in the root of scss folder, would this be the right way to watch the files: `gulp.watch("scss/*.scss", ['sass']); gulp.watch("scss/*/*.scss", ['sass']); – ulumi Dec 30 '16 at 17:23
  • @ulumi personally I would use `scss/**/*.scss`. The double star part will allow you to use whatever subdirectories you'd like, and the `*.scss` part will make sure nothing unexpected makes it through the filter. – thewildandy Jan 03 '17 at 10:17
  • @ulumi I should clarify that my suggestion above will also allow you to keep using the main "scss" directory as well, e.g. `scss/master.scss` – thewildandy Jan 03 '17 at 10:27