Laravel Elixir 5.2自定义gulp user任务无法合并脚本样式求助

Let's break down why your gulp user task isn't working and fix it step by step:

Key Issues in Your Current Setup #

1. Your custom Task doesn't return the stream
   Gulp relies on stream handling to know when tasks complete. Right now, your task runs synchronously and exits immediately without waiting for Elixir's mixins to finish their work.
2. Missing wildcards for folder paths
   When you pass a folder path to Mix.scripts() (like /resources/assets/js/angular/user/app/), Elixir won't automatically scan for files inside it. You need to add **/*.js to tell it to include all JavaScript files in that folder and subfolders.
3. Inconsistent path formatting
   Some paths start with / (absolute) while others don't (relative), which can cause Elixir to resolve paths incorrectly relative to your project root.

Corrected gulpfile.js Code #

Here's the fixed version with explanations:

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

elixir.extend('user', function () {
    new Task('user', function () {
        // Return the entire Elixir chain so Gulp waits for all operations to finish
        return elixir(function(mix) {
            mix.scripts(
                [
                    // Add **/*.js to folder paths to include all JS files
                    '/resources/assets/js/angular/user/app/**/*.js',
                    '/resources/assets/js/angular/user/main/**/*.js',
                    '/resources/assets/js/angular/user/configs/**/*.js',
                    '/public/app/user/libs/angular/ui-bootstrap/ui-bootstrap-custom-2.0.0.js',
                    '/resources/assets/js/angular/user/models/**/*.js',
                    '/public/app/libs/angular/ng-typeahead/dist/ng-typeahead.js',
                    '/resources/assets/js/angular/user/controllers/**/*.js',
                    '/public/app/libs/angular/angularjs-toaster/toaster.js',
                    '/resources/assets/js/angular/user/filters/**/*.js',
                    '/resources/assets/js/angular/admin/directives/googlemap/map.js',
                    '/public/app/libs/assets/custom-lodash.js',
                    '/resources/assets/js/angular/user/services/**/*.js',
                    '/resources/assets/js/angular/user/directives/**/*.js',
                    '/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'
                ]
            );
        });
    })
    // Optional: Auto-re-run task when JS/Sass files change
    .watch(['resources/assets/js/**/*.js', 'public/app/user/assets/sass/**/*.scss']);
});

What Changed? #

• Returned the Elixir chain: By wrapping your mixins in elixir(function(mix) { ... }) and returning it, Gulp will wait for all the scripts, sass, styles, and version tasks to complete before marking the user task as finished.
• Added **/*.js to folder paths: This tells Elixir to recursively scan each folder for JavaScript files, which was missing before (so no files were being picked up).
• Added a watcher (optional): The .watch() method lets you automatically re-run the user task when any of your JS or Sass files change—handy for development.

Testing the Fix #

Run gulp user again, and you should see output that lists the source files and shows each mixin task executing (scripts, sass, etc.). If you still have issues, double-check that all your file paths are correct relative to your project root (where gulpfile.js is located).

内容的提问来源于stack exchange，提问作者Farhad Mohammadi