Change Laravel Gulp / Elixir `watch` task

Question

I want to use Laravel Elixir with the Semantic UI in my new project.

In the Semantic UI docs, they suggest including their gulp tasks in your current gulpfile project. At Laravel, they offer (briefly) how to renew an elixir. But how to include the following gulp command in the watch ?

I am currently running gulp watch watch-ui , but I wanted to enable 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 define a task, but only a function that you can assign to a task.

You cannot include anything in the semantic watch task if you do not want to fix the files, but you can add two viewing tasks and make sure that they both start.

The following code should help you 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 the Semantic UI actually determines that their watch tasks should use the clock function here: https://github.com/Semantic-Org/Semantic-UI/blob/master/gulpfile.js#L46

Answer 2

If you mean , you can add custom observer logic through the Elixir API , then the short answer will be no ...

... but since Elixir is a wrapper on top of Gulp, you can modify gulp.tasks directly to achieve the same result: just rename the watch task that Elixir defines to something else, then create your own watch task that will run as Elixir watches and Semantic UI watches:

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

In Elixir itself, closest to user observers is the second argument to mix.task() , which accepts a set of file paths for viewing and re-setting the change task. So, although you could do something like ...

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

... which will cause a complete rebuild on every change, which does not match the more detailed watch task provided by the semantics.