Changing Laravel's Gulp/Elixir `watch` task

Question

I want to use Laravel's Elixir along with Semantic UI in my new project.

In Semantic UI docs, they suggest how to include their gulp tasks to your current project's gulpfile. In Laravel, they suggest (briefly) how to extend Elixir. But how can I include another gulp task to the watch command?

Currently I'm running gulp watch watch-ui , but I wanted to include the watch-ui task inside watch . Is it possible?

This is my current gulpfile.js :

var gulp     = require('gulp');
var elixir   = require('laravel-elixir');
var semantic = {
  watch: require('./resources/assets/semantic/tasks/watch'),
  build: require('./resources/assets/semantic/tasks/build')
};

gulp.task('watch-ui', semantic.watch);
gulp.task('build-ui', semantic.build);

elixir(function(mix) {
  mix.task('build-ui');
});

Answer 1

If I understand your question correctly, you want to add something to the Semantic UI task. However they never really define a task, but only a function that you can assign to a task.

You can't really include anything in the semantic watch task, unless you want to patch files, but you can add two watch tasks and make sure they both run.

The following code should enable you to do what you need:

var gulp     = require('gulp');
var elixir   = require('laravel-elixir');
var semantic = {
  watch: require('./resources/assets/semantic/tasks/watch'),
  build: require('./resources/assets/semantic/tasks/build')
};

// Define a task for the semantic watch function.
gulp.task('semantic-watch', semantic.watch);

// Define the main watch task, that is depended on the semantic-watch, this will run both watch tasks when you run this one.
gulp.task('watch', ['semantic-watch'], function() {
    // Do your own custom watch logic in here.
});

gulp.task('build-ui', semantic.build);

elixir(function(mix) {
  mix.task('build-ui');
});

You can see how Semantic UI actually defines that their watch tasks should use the watch function here: https://github.com/Semantic-Org/Semantic-UI/blob/master/gulpfile.js#L46

Answer 2

If you mean is it possible to add custom watcher logic through the Elixir API then the short answer is no ...

... but, since Elixir is a wrapper on top of Gulp, you can modify gulp.tasks directly to achieve the same result: simply rename the watch task that Elixir defines to something else, then create your own watch task that runs both Elixir's watch and the Semantic UI watch:

gulp.tasks['watch-elixir'] = gulp.tasks.watch;

gulp.task('watch', ['watch-elixir', 'watch-ui']);

In Elixir itself, the closest you get to custom watchers is a second argument to mix.task() that takes a set of file paths to watch and retriggers the task on change. So, although you could do something like...

mix.task('build-ui', './resources/assets/semantic/src/**/*')

... that would trigger a full rebuild on every change, which isn't the same as the more granular watch task provided by semantic.