Search code examples
gulpbrowser-sync

Browsersync gulp task will not inject CSS (or gulp won`t run another watch task in background)


Seems like watch tasks stops at browserSync.init. I can run all tasks seperately by calling them via gulp cssInkject for example, but they wont run when gulp watch is run. Browsersync will give "File event [change] : resources/assets/styles/modules/_breadcrumbs.css" notification but wont run task that bundles css and won`t inject CSS (stream).

Below is the code :

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

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

    browserSync.init(null, {
        notify: false,
        browser: "chrome",
        server: {baseDir: "app"},
        port: 8000
    });

    watch('./app/*.html', function() {
        browserSync.reload();
    });

    watch('./app/assets/styles/**/*.css', function() {
        gulp.start('cssInject');
    });

    watch('./app/assets/scripts/**/*.js', function() {
        gulp.start('scriptsRefresh');

    });

});

gulp.task('cssInject', ['styles'], function() {
    return gulp.src('./app/temp/styles/styles.css')
    .pipe(browserSync.stream());
});

gulp.task('scriptsRefresh', ['scriptsBundle'], function() {
        browserSync.reload();

    });

gulp.task('styles', function() {
  return gulp.src('./app/assets/styles/styles.css')
    .pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, autoprefixer]))
    .on('error', function(errorInfo) {
      console.log(errorInfo.toString());
      this.emit('end');
    })
    .pipe(gulp.dest('./app/temp/styles'));
});

I am running it in Ubuntu VM (homestead/laravel), if it makes any difference.


Solution

  • I do not know why it works, but it works:

    gulp.watch('./app/*.html', function() {
        browserSync.reload();
    });
    
    gulp.watch('./app/assets/styles/**/*.css', function() {
        gulp.start('cssInject');
    });
    
    gulp.watch('./app/assets/scripts/**/*.js', function() {
        gulp.start('scriptsRefresh');
    
    });
    

    Basically adding 'gulp' to 'watch' solved the problem, which is even weirder as it works with 'watch' only within local windows environment, but not on homestead laravel.