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 won
t 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.
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.