Gulp watch with elixir not watching

Yep same issue. I'm modifying js and jsx files in

resources/assets/js

and watch continues watching without doing anything.

Ah figured it out. Add this to the bottom of your gulpfile.js

console.log(elixir);

which shows the default config options. You can override them and add additional watchers like this

elixir.config.registerWatcher("default", "resources/*/");

so that the default task is triggered when anything in ./resources is modified. Seems to me the instructions on the Laravel website are incorrect, but this method works.

@donahoed Seems close. This causes the batch file to hang, just like it should if it's watching but it doesn't seem to detect any changes to files

Based on what @donadhoed said, I am using

elixir.config.registerWatcher("default", "resources/**");

Having double * means it watches all the directories and the content inside. Works for me.

Someone make sure there's a PR for that D: thanks ^

Ah that makes sense. The exilir docs need an update with this nifty

Can you share gulpfile.js

Came here from Google with a similar issue. My dev environment is Laravel's Homestead on a Windows machine.

This ended up working for me:

In gulpfile.js

var elixir = require('laravel-elixir');

elixir.config.js.browserify.watchify = {
    enabled: true,
    options: {
        poll: true
    }
}

elixir(function(mix) {
    mix.sass('app.scss');
    mix.browserify('app.js');
});

Hope this prevents frustration for someone...

@zellkz Works like a charm! Many thanks!

@zellkz , Awesome. Thanks for sharing!

Thank you, @zellkz !! I still have a little hair left thanks to that! :-)

EDIT: For me, this works in that, if I run gulp, all tasks will complete, then gulp will continue to watch (does not finish), and any changes made to my vue files are picked up immediately, which is great.

Unfortunately, the rest of my files are not watched, and if I ^C, and gulp watch, the rest of my files are not watched, and neither are my vue files. In other words, gulp watch does not work at all. No matter what.

On the bright side, if I am making changes to my Vue files, I'm all set. So, again, thanks for the tip from @zellkz for that one. At the very least, half of my workflow is improved. :-)

hey guys, it works for me, follow my gulpfile.js

var gulp = require('gulp'); var sass = require('gulp-sass');

var input = './resources/assets/sass/*.scss'; var output = './public/css';

gulp.task('sass', function () { return gulp // Find all .scss files from the stylesheets/ folder .src(input) // Run Sass on those files .pipe(sass()) // Write the resulting CSS in the output folder .pipe(gulp.dest(output)); });

const elixir = require('laravel-elixir');

require('laravel-elixir-vue');

elixir(mix => { mix.sass('app.scss') .webpack('app.js'); });

@wscesar could you clean up your code? Really confuse to read. Use markdown syntax for the code.

var gulp = require('gulp'); 
var sass = require('gulp-sass');

var input = './resources/assets/sass/*.scss'; 
var output = './public/css';

gulp.task('sass', function () { 
  return gulp
    // Find all .scss files from the stylesheets/ folder 
    .src(input) 
    // Run Sass on those files 
    .pipe(sass()) 
    // Write the resulting CSS in the output folder 
    .pipe(gulp.dest(output)); 
});

const elixir = require('laravel-elixir');

require('laravel-elixir-vue');

elixir(mix => { 
  mix.sass('app.scss') 
    .webpack('app.js'); 
});

I also have the problem that elixier doenst watch my scss files.

If run the gulp command its compiling everything, so the source files are in place.

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

elixir(function(mix) {

    // App Assets
    mix.browserify('main.js', 'public/js/main.js')
        .sass('app.scss', 'resources/assets/css/libs/app.css')
        .styles([
            'libs/dropzone.css',
            'libs/bootstrap.min.css',
            'libs/custom-bootstrap.css',
            'libs/font-awesome.min.css',
            'libs/app.css', 
        ], 'public/css/app/all.css');
});

hi does anyone knows how to watch certain task?

sample code below:

var argv = require('yargs').argv;

if(argv.default || argv.production || argv.watch) { elixir(function(mix) { ... }) }

if(argv.vendor || argv.production) { elixir(function(mix) { ... }) }

how to watch only the argv.default task?.. gulp --watch will compile but will not watching it.

please help.