CODEWITHSUNDEEP
laravelgulplaravel-elixir
Farhad Mohammadi
Farhad Mohammadi

Reputation: 41

Laravel elixir 5.2 not combine scripts in extened task

my code in gulpfile.js is:

I want to create gulp command like (gulp user) to mix scripts and styles like below, but this is not work, 


elixir.config.assetsPath = '';
elixir.config.js.folder = '';
var Task = elixir.Task;
var Mix = elixir.mixins;

elixir.extend('user', function () {

    new Task('user', function () {

        Mix.scripts(
            [
                '/resources/assets/js/angular/user/app/',
                '/resources/assets/js/angular/user/main/',
                '/resources/assets/js/angular/user/configs/',
                '/public/app/user/libs/angular/ui-bootstrap/ui-bootstrap-custom-2.0.0.js',
                '/resources/assets/js/angular/user/models/',
                '/public/app/libs/angular/ng-typeahead/dist/ng-typeahead.js',
                '/resources/assets/js/angular/user/controllers/',
                'public/app/libs/angular/angularjs-toaster/toaster.js',
                '/resources/assets/js/angular/user/filters/',
                '/resources/assets/js/angular/admin/directives/googlemap/map.js',
                '/public/app/libs/assets/custom-lodash.js',
                '/resources/assets/js/angular/user/services/',
                '/resources/assets/js/angular/user/directives/',
                '/public/app/user/assets/js/bootstrap.3.3.5.js',
                '/public/app/user/assets/js/ui-bootstrap-tpls-2.0.0.js',
                '/public/app/user/assets/js/slick.js',
                '/public/app/user/assets/js/angular-slick.min.js',
                '/public/app/user/assets/js/bootstrap-chosen.js',
                '/public/app/user/assets/js/fixto.min.js',
                '/public/app/user/ngApp/templates/templates.js'
            ],
            'public/app/user/ngApp/scripts/app-all.js'
        ).sass(
            [
                './public/app/user/assets/sass/main.scss'
            ],
            './public/app/user/assets/css/kit.css'
        ).styles(
            [
                './public/app/user/assets/css/bootstrap.css',
                './public/app/user/assets/css/font.css',
                './public/app/user/assets/css/kit.css',
                './public/app/user/assets/css/range-slider.css',
                './public/app/user/assets/css/angular-bootstrap-lightbox.css',
                './public/app/libs/angular/angularjs-toaster/toaster.css',
                './public/app/libs/angular-rateit/dist/rateit.css',
                './public/app/libs/angular/ng-typeahead/dist/ng-typeahead.css',
                './public/app/user/assets/css/app.css',
                './public/app/user/assets/css/nga.all.min.css',
                './public/app/user/assets/css/rzslider.css',
                './public/app/user/assets/css/slick.css',
                './public/app/user/assets/css/slick-theme.css',
                './public/app/user/assets/css/animate.css',
                './public/app/user/libs/jquery/select2/dist/css/select2.min.css'
            ],
            './public/app/user/assets/css/app-all.css'
        ).version(
            [
                'public/app/user/assets/css/app-all.css',
                'public/app/user/ngApp/scripts/app-all.js'
            ]
        );
    });
});

when i run (gulp user) in terminal, result is empty like this, and mix not work properly and combine scripts and styles 

[15:20:00] Using gulpfile /var/www/chilivery/web/gulpfile.js
[15:20:00] Starting 'user'...
┌────────────┬─────────┬──────────────┬─────────────┐
│ Task       │ Summary │ Source Files │ Destination │
├────────────┼─────────┼──────────────┼─────────────┤
│ mix.user() │         │
└────────────┴─────────┴──────────────┴─────────────┘
[15:20:00] Finished 'user' after 6.36 ms

any help Please, how can i create gulp command like gulp user to handle that?

Upvotes: 2

Views: 75

Answers (1)

Cedric
Cedric

Reputation: 5303

Let's forget the "custom task" part first.

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


elixir(function(mix) {
    mix.scripts(
            [
                'resources/assets/js/angular/user/app/',
                'resources/assets/js/angular/user/main/',
                'resources/assets/js/angular/user/configs/',
                'public/app/user/libs/angular/ui-bootstrap/ui-bootstrap-custom-2.0.0.js',
                'resources/assets/js/angular/user/models/',
                'public/app/libs/angular/ng-typeahead/dist/ng-typeahead.js',
                'resources/assets/js/angular/user/controllers/',
                'public/app/libs/angular/angularjs-toaster/toaster.js',
                'resources/assets/js/angular/user/filters/',
                'resources/assets/js/angular/admin/directives/googlemap/map.js',
                'public/app/libs/assets/custom-lodash.js',
                'resources/assets/js/angular/user/services/',
                'resources/assets/js/angular/user/directives/',
                'public/app/user/assets/js/bootstrap.3.3.5.js',
                'public/app/user/assets/js/ui-bootstrap-tpls-2.0.0.js',
                'public/app/user/assets/js/slick.js',
                'public/app/user/assets/js/angular-slick.min.js',
                'public/app/user/assets/js/bootstrap-chosen.js',
                'public/app/user/assets/js/fixto.min.js',
                'public/app/user/ngApp/templates/templates.js'
            ],
            'public/app/user/ngApp/scripts/app-all.js'
        );
    mix.styles(
            [
                'public/app/user/assets/css/bootstrap.css',
                'public/app/user/assets/css/font.css',
                'public/app/user/assets/css/kit.css',
                'public/app/user/assets/css/range-slider.css',
                'public/app/user/assets/css/angular-bootstrap-lightbox.css',
                'public/app/libs/angular/angularjs-toaster/toaster.css',
                'public/app/libs/angular-rateit/dist/rateit.css',
                'public/app/libs/angular/ng-typeahead/dist/ng-typeahead.css',
                'public/app/user/assets/css/app.css',
                'public/app/user/assets/css/nga.all.min.css',
                'public/app/user/assets/css/rzslider.css',
                'public/app/user/assets/css/slick.css',
                'public/app/user/assets/css/slick-theme.css',
                'public/app/user/assets/css/animate.css',
                'public/app/user/libs/jquery/select2/dist/css/select2.min.css'
            ],
            'public/app/user/assets/css/app-all.css'
        );

    mix.version(
            [
                'public/app/user/assets/css/app-all.css',
                'public/app/user/ngApp/scripts/app-all.js'
            ]
        );

});

Here, there is no custom task user, the paths are always similar ( without / or ./ in front), and we have avoided to chain the call of mix functions - all that for the sake of debugging and try to make your code work

What result do you got ? What output do you have in your console/terminal ? What output do you have in

  • public/app/user/ngApp/scripts/app-all.js
  • public/app/user/assets/css/kit.css
  • and public/app/user/assets/css/app-all.css

Upvotes: 1

Related Questions