Laravel Elixir Not Running Inside Gulp Tasks

I am trying to separate my elixir tasks into different Gulp tasks, so I can just run a subset of them.

Here is my gulpfile.js:

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

/**
 * CSS
 */

gulp.task('styles', function()
{
    elixir( function( mix )
    {
        mix.sass( 'auth.scss' )
            .sass( 'main.scss' )
            .sass( 'dashboard.scss' )
            .sass( 'contact.scss' )
            .sass( 'login.scss' )
            .sass( 'campaign_creator.scss' )
            .sass( 'campaign_stats.scss' );
    } );
} );

/**
 * JS
 */

gulp.task('scripts', function()
{
    elixir( function( mix )
    {
        mix.scriptsIn( 'public/js/src/shared', 'public/js/dist/shared/all.js' )
            .scriptsIn( 'public/js/src/logins', 'public/js/dist/logins/all.js' )
            .scriptsIn( 'public/js/src/campaign', 'public/js/dist/campaigns/all.js' )

            // vendor scripts used in multiple places can be kept separate rather than concatenated with the page's JS files
            .copy( 'public/vendor/alertifyjs/dist/js/alertify.js', 'public/js/dist/vendor/alertifyjs/alertify.js' );
    } );
} );

gulp.task( 'default', [ 'styles', 'scripts' ] );

Running either the styles or scripts tasks produces no effect. And if I run the default task with just gulp in the terminal, the styles or scripts tasks run with no effect but then the elixir tasks run successfully.

Terminal output:

gulp
[12:28:54] Using gulpfile /path/to/my/app/application/gulpfile.js
[12:28:54] Starting 'styles'...
[12:30:03] Finished 'styles' after 1.13 min
[12:30:03] Starting 'scripts'...
[12:30:03] Finished 'scripts' after 63 ms
[12:30:03] Starting 'default'...
[12:30:03] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/auth.scss


Saving To...
   - public/css/auth.css

[12:30:25] Finished 'default' after 22 s
[12:30:27] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:27] Finished 'sass' after 24 s
[12:30:27] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/main.scss


Saving To...
   - public/css/main.css

[12:30:27] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:27] Finished 'sass' after 504 ms
[12:30:27] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/dashboard.scss


Saving To...
   - public/css/dashboard.css

[12:30:27] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:27] Finished 'sass' after 200 ms
[12:30:27] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/contact.scss


Saving To...
   - public/css/contact.css

[12:30:28] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:28] Finished 'sass' after 289 ms
[12:30:28] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/login.scss


Saving To...
   - public/css/login.css

[12:30:28] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:28] Finished 'sass' after 210 ms
[12:30:28] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/campaign_creator.scss


Saving To...
   - public/css/campaign_creator.css

[12:30:28] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:28] Finished 'sass' after 218 ms
[12:30:28] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/campaign_stats.scss


Saving To...
   - public/css/campaign_stats.css

[12:30:29] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:30:29] Finished 'sass' after 477 ms
[12:30:29] Starting 'scriptsIn'...

Fetching ScriptsIn Source Files...
   - public/js/src/shared/**/*.js


Saving To...
   - public/js/dist/shared/all.js

[12:30:56] gulp-notify: [Laravel Elixir] Scripts Merged!
[12:30:56] Finished 'scriptsIn' after 27 s
[12:30:56] Starting 'scriptsIn'...

Fetching ScriptsIn Source Files...
   - public/js/src/logins/**/*.js


Saving To...
   - public/js/dist/logins/all.js

[12:30:57] gulp-notify: [Laravel Elixir] Scripts Merged!
[12:30:57] Finished 'scriptsIn' after 738 ms
[12:30:57] Starting 'scriptsIn'...

Fetching ScriptsIn Source Files...
   - public/js/src/campaign/**/*.js


Saving To...
   - public/js/dist/campaigns/all.js

[12:30:57] gulp-notify: [Laravel Elixir] Scripts Merged!
[12:30:57] Finished 'scriptsIn' after 609 ms
[12:30:57] Starting 'copy'...

Fetching Copy Source Files...
   - public/vendor/alertifyjs/dist/js/alertify.js


Saving To...
   - public/js/dist/vendor/alertifyjs/alertify.js

[12:30:58] Finished 'copy' after 298 ms

What am I doing wrong?

Solution

so Elixir has few reserved tasks, for example: styles (for run all styles action), scripts or tdd (for tests). There are tree solutions for you problem:

Change your task name (scripts => scripts_MODULE_NAME) and then you can run in by gulp scripts_MODULE_NAME
Start using elixir.extend, read more on documentation
Just use gulp styles provided by Elixir, then you will run all styles task (sass in you example), without scripts task

I also suggest you to have one main.scss file per module in gulpfile.js, and include all *.scss files in this main.scss. It has few advantages:

Your IDE will be understand the dependency (For example if you set variable in one file, your IDE will be know that you can use this variable in another file, because you include file which set this variable)
Right now with your configuration, if you use gulp watch and you want add some new style file, you need update gulpfile.js, quit from gulp watch and run in again. If you have all dependency in one SCSS file, you don't need restart gulp watch, and just add new file to *.scss file, and gulp will be known about changes.

To import SCSS files from you example in one SCSS file, you can do this:

@import "auth";
@import "main";
@import "dashboard";
@import "contact";
@import "login";
@import "campaign_creator";
@import "campaign_stats";